/* 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 video {
    width: 85%;
    height: 28rem;
    object-fit: contain;
}

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

.process-right video {
    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);
    }


    font-size:1.111111vw;
    text-size-adjust:100%;
    color:#161616;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    background-color: #000;
    border-block: 1px solid #777;
    grid-template-columns: 83% 17%;
    display: flex;
    flex-direction: column;

    .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;
    }

    
    .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: #000000;
        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: #000000;
        margin-bottom: 16px;
    }

    .work-reel {
        gap: 24px;
        padding-top: 16px;
        padding-bottom: 30px;
        align-items: start;
        scrollbar-color: #000000 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: #000000;
        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 #000000;
        border-block: 1px solid #b4c7bc44;
        background: #000000;
    }

    .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: #ffffff;
        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: #ffffff;
        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: #ffffff;
        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: rgb(243, 243, 243);
        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;
    }

}


.picture{
    position:relative;
}


.step-video{

    position:absolute;

    width:85%;
    height:28rem;

    object-fit:contain;

    opacity:0;

    transition:
    opacity .8s ease,
    transform .8s ease;

}



/* 默认显示step1 */

.step-video.video1{

opacity:1;

}



/* 根据步骤切换 */


.steps .using ~ .picture .video3{
opacity:1;
}

@media(max-width:600px){

.needle-stage video{

width:80%;

height:auto;

object-fit:contain;

}

}

/* Motion only: original design rules above are preserved verbatim. */
/* One artwork at a time: no global colour switch. */
.container .articles .article:not(.text) img {
 filter:grayscale(1);
 transition:filter .55s ease,transform .65s cubic-bezier(.2,.7,.2,1);
}
@media(hover:hover) and (pointer:fine) {
 .container .articles .article:not(.text):hover img { filter:grayscale(0); transform:scale(1.65); }
}
.container .articles .article:not(.text):focus-visible img { filter:grayscale(0); }
.container .articles .article:not(.text):focus-visible { outline:1px solid #888; outline-offset:-3px; }
@media(hover:none) {
 .container .articles .article:not(.text):active img,.container .articles .article:not(.text):focus img { filter:grayscale(0); }
}
.phase-choice { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; }
.process .steps label { cursor:pointer; display:block; }
.process .steps .phase-label { position:relative; transition:color .4s,padding .4s; }
.process .steps .phase-label::before { content:''; position:absolute; left:-1.85rem; top:.5rem; width:.9rem; height:.9rem; border-radius:50%; background:#f39a00; opacity:0; }
.process .picture .phase-film { position:absolute; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .65s ease,transform .8s ease,visibility .65s; transform:translateY(18px); }
.process .process-right { display:grid; align-content:start; }
.process .phase-copy { grid-area:1/1; min-width:0; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(14px); transition:opacity .55s ease,transform .7s ease,visibility .55s; }
.process .phase-copy .phase-preview { visibility:inherit; }
/* Static fallback and initial state. */
.process:not(:has(.phase-choice:checked)) .phase-film.phase-1,
.process:not(:has(.phase-choice:checked)) .phase-copy.phase-1 { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.process:not(:has(.phase-choice:checked)) .phase-label.phase-1 { color:#f39a00; padding-left:1.2rem; }
.process:not(:has(.phase-choice:checked)) .phase-label.phase-1::before { opacity:1; }

#phase-1:checked ~ .process-content .phase-film.phase-1,
#phase-1:checked ~ .process-content .phase-copy.phase-1 { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
#phase-1:checked ~ .process-content .phase-label.phase-1 { color:#f39a00; padding-left:1.2rem; }
#phase-1:checked ~ .process-content .phase-label.phase-1::before { opacity:1; }
#phase-1:focus-visible ~ .process-content label[for="phase-1"] { outline:2px solid #f39a00; outline-offset:4px; }

#phase-2:checked ~ .process-content .phase-film.phase-2,
#phase-2:checked ~ .process-content .phase-copy.phase-2 { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
#phase-2:checked ~ .process-content .phase-label.phase-2 { color:#f39a00; padding-left:1.2rem; }
#phase-2:checked ~ .process-content .phase-label.phase-2::before { opacity:1; }
#phase-2:focus-visible ~ .process-content label[for="phase-2"] { outline:2px solid #f39a00; outline-offset:4px; }

#phase-3:checked ~ .process-content .phase-film.phase-3,
#phase-3:checked ~ .process-content .phase-copy.phase-3 { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
#phase-3:checked ~ .process-content .phase-label.phase-3 { color:#f39a00; padding-left:1.2rem; }
#phase-3:checked ~ .process-content .phase-label.phase-3::before { opacity:1; }
#phase-3:focus-visible ~ .process-content label[for="phase-3"] { outline:2px solid #f39a00; outline-offset:4px; }

#phase-4:checked ~ .process-content .phase-film.phase-4,
#phase-4:checked ~ .process-content .phase-copy.phase-4 { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
#phase-4:checked ~ .process-content .phase-label.phase-4 { color:#f39a00; padding-left:1.2rem; }
#phase-4:checked ~ .process-content .phase-label.phase-4::before { opacity:1; }
#phase-4:focus-visible ~ .process-content label[for="phase-4"] { outline:2px solid #f39a00; outline-offset:4px; }

/* The original phone composition and PHASE rail stay in place. */
.ex-process .needle-stage { position:relative; }
body .ex-process .needle-stage .phone-phase { position:absolute; width:80%; height:300px; right:0; object-fit:contain; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(16px); transition:opacity .6s ease,transform .7s ease,visibility .6s; }
body .ex-process #making-1:checked ~ .making-scene .phone-phase.phase-1 { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
body .ex-process #making-2:checked ~ .making-scene .phone-phase.phase-2 { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
body .ex-process #making-3:checked ~ .making-scene .phone-phase.phase-3 { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
body .ex-process #making-4:checked ~ .making-scene .phone-phase.phase-4 { opacity:1; visibility:visible; pointer-events:auto; transform:none; }

/* Desktop / tablet: native CSS scroll timeline, with original three-column design. */
@supports (animation-timeline:view()) {
 @media(min-width:601px) and (prefers-reduced-motion:no-preference) {
  .process-scroll { height:400svh; view-timeline-name:--making; view-timeline-axis:block; }
  .process-scroll > .process { position:sticky; top:0; }
  .process:not(:has(.phase-choice:checked)) .phase-film,
  .process:not(:has(.phase-choice:checked)) .phase-copy { animation:phase-scene linear both; animation-timeline:--making; animation-range:contain 0% contain 100%; }
  .process:not(:has(.phase-choice:checked)) .phase-label { animation:phase-label linear both; animation-timeline:--making; animation-range:contain 0% contain 100%; }
  .process:not(:has(.phase-choice:checked)) .phase-label::before { animation:phase-dot linear both; animation-timeline:--making; animation-range:contain 0% contain 100%; }
  .process:not(:has(.phase-choice:checked)) .phase-film.phase-1,.process:not(:has(.phase-choice:checked)) .phase-copy.phase-1 { animation-name:scene-1; }
  .process:not(:has(.phase-choice:checked)) .phase-label.phase-1 { animation-name:label-1; }
  .process:not(:has(.phase-choice:checked)) .phase-label.phase-1::before { animation-name:dot-1; }
  .process:not(:has(.phase-choice:checked)) .phase-film.phase-2,.process:not(:has(.phase-choice:checked)) .phase-copy.phase-2 { animation-name:scene-2; }
  .process:not(:has(.phase-choice:checked)) .phase-label.phase-2 { animation-name:label-2; }
  .process:not(:has(.phase-choice:checked)) .phase-label.phase-2::before { animation-name:dot-2; }
  .process:not(:has(.phase-choice:checked)) .phase-film.phase-3,.process:not(:has(.phase-choice:checked)) .phase-copy.phase-3 { animation-name:scene-3; }
  .process:not(:has(.phase-choice:checked)) .phase-label.phase-3 { animation-name:label-3; }
  .process:not(:has(.phase-choice:checked)) .phase-label.phase-3::before { animation-name:dot-3; }
  .process:not(:has(.phase-choice:checked)) .phase-film.phase-4,.process:not(:has(.phase-choice:checked)) .phase-copy.phase-4 { animation-name:scene-4; }
  .process:not(:has(.phase-choice:checked)) .phase-label.phase-4 { animation-name:label-4; }
  .process:not(:has(.phase-choice:checked)) .phase-label.phase-4::before { animation-name:dot-4; }
 }
}
@keyframes scene-1 { 0% {opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)} 22% {opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)} 25% {opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px)} 100% {opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px)} }
@keyframes label-1 { 0% {color:#f39a00;padding-left:1.2rem} 24.99% {color:#f39a00;padding-left:1.2rem} 25% {color:#888;padding-left:0} 100% {color:#888;padding-left:0} }
@keyframes dot-1 { 0% {opacity:1} 24.99% {opacity:1} 25% {opacity:0} 100% {opacity:0} }
@keyframes scene-2 { 0% {opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px)} 24% {opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px)} 27% {opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)} 47% {opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)} 50% {opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px)} 100% {opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px)} }
@keyframes label-2 { 0% {color:#888;padding-left:0} 24.99% {color:#888;padding-left:0} 25% {color:#f39a00;padding-left:1.2rem} 49.99% {color:#f39a00;padding-left:1.2rem} 50% {color:#888;padding-left:0} 100% {color:#888;padding-left:0} }
@keyframes dot-2 { 0% {opacity:0} 24.99% {opacity:0} 25% {opacity:1} 49.99% {opacity:1} 50% {opacity:0} 100% {opacity:0} }
@keyframes scene-3 { 0% {opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px)} 49% {opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px)} 52% {opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)} 72% {opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)} 75% {opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px)} 100% {opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px)} }
@keyframes label-3 { 0% {color:#888;padding-left:0} 49.99% {color:#888;padding-left:0} 50% {color:#f39a00;padding-left:1.2rem} 74.99% {color:#f39a00;padding-left:1.2rem} 75% {color:#888;padding-left:0} 100% {color:#888;padding-left:0} }
@keyframes dot-3 { 0% {opacity:0} 49.99% {opacity:0} 50% {opacity:1} 74.99% {opacity:1} 75% {opacity:0} 100% {opacity:0} }
@keyframes scene-4 { 0% {opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px)} 74% {opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px)} 77% {opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)} 100% {opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)} }
@keyframes label-4 { 0% {color:#888;padding-left:0} 74.99% {color:#888;padding-left:0} 75% {color:#f39a00;padding-left:1.2rem} 100% {color:#f39a00;padding-left:1.2rem} }
@keyframes dot-4 { 0% {opacity:0} 74.99% {opacity:0} 75% {opacity:1} 100% {opacity:1} }

@media(prefers-reduced-motion:reduce) {
 .container .articles .article img,.process .phase-film,.process .phase-copy,.process .phase-label,.ex-process .phone-phase { transition:none!important; animation:none!important; }
}
/* Connect the existing mobile descriptions to their existing radio controls. */
.ex-process .step-choice { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
#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:original-step-copy .55s ease both; }
@keyframes original-step-copy { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.process-scroll { background:#fff; }

/* Revision 4: only history cards, archive and touch hero motion. STEP rules untouched. */
@media(min-width:601px) {
 .Origin .cards article { cursor:pointer; transition:box-shadow .25s; }
 .Origin .cards article:focus { z-index:50; box-shadow:0 12px 28px #0005; outline:none; }
 .Origin .cards article:focus-visible { outline:2px solid #ef9c00; outline-offset:3px; }
}
@media(max-width:600px) {
 body .Origin .left { width:100%; padding-left:0; padding-right:0; }
 body .Origin .history-tabs { margin-left:12px; margin-right:12px; }
 body .Origin .cards { width:100%; padding:0; margin:0; gap:0; align-items:stretch; scroll-padding:0; }
 body .Origin .cards article { flex:0 0 100%; width:100%; min-width:100%; height:auto; min-height:0; margin:0; padding:18px; align-self:stretch; grid-template-rows:96px 52px 220px 52px auto; box-sizing:border-box; }
 body .Origin .cards article:last-child { margin-right:0; }
 body .Origin .cards article .title { margin:0; }
 body .Origin .cards article img { height:220px; }
}
.single-gallery { background:linear-gradient(#96a4af,#d4dade 70%,#fafafa); padding:24px 0; }
.single-track { display:flex; gap:30px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:12px calc((100% - min(62%,700px))/2) 0; scrollbar-width:thin; scrollbar-color:#8c969b transparent; overscroll-behavior-x:contain; }
.single-work { flex:0 0 min(62vw,700px); width:min(62vw,700px); margin:0; scroll-snap-align:center; scroll-snap-stop:always; }
.single-image { height:clamp(300px,40vw,530px); position:relative; margin-bottom:92px; }
.single-image > img { width:100%; height:100%; object-fit:cover; border-radius:16px; }
.single-image > .reflection { position:absolute; top:calc(100% + 10px); left:0; transform:scaleY(-1); opacity:.24; filter:blur(3px); mask-image:linear-gradient(to top,#000,transparent 22%); -webkit-mask-image:linear-gradient(to top,#000,transparent 22%); pointer-events:none; }
.single-work figcaption { position:relative; text-align:center; font:14px/1.4 Georgia,serif; padding-bottom:18px; }
.single-caption { text-align:center; font:bold 26px/1.25 Georgia,serif; margin:20px 0; }
.single-nav { display:flex; justify-content:center; gap:14px; }
.single-nav a { width:44px; min-height:44px; display:grid; place-items:center; font:12px Arial,sans-serif; text-decoration:none; border-bottom:1px solid #929b9e; }
@media(max-width:600px) {
 .single-gallery { padding-top:16px; }
 .single-track { gap:16px; padding:8px 0 0; }
 .single-work { flex:0 0 100%; width:100%; }
 .single-image { height:390px; margin:0 16px 76px; }
 .single-image > img { object-fit:contain; border-radius:12px; }
 .single-work figcaption { font-size:13px; }
 .single-caption { font-size:22px; }
}
@media(max-width:1100px), (hover:none) {
 .container .articles .article:not(.text) img { animation:quicker-colour var(--cycle,9s) var(--delay,0s) infinite ease-in-out; }
 .container .articles .article:not(.text):focus img { animation:none; filter:grayscale(0); }
}
@keyframes quicker-colour { 0%,4%,32%,100% { filter:grayscale(1); transform:scale(1); } 12%,23% { filter:grayscale(0); transform:scale(1.5); } }
.articles .article:nth-child(1) { --cycle:10s; --delay:-3.3s; }
.articles .article:nth-child(2) { --cycle:12s; --delay:-6.3s; }
.articles .article:nth-child(3) { --cycle:9s; --delay:-9.3s; }
.articles .article:nth-child(4) { --cycle:14s; --delay:-1.3s; }
.articles .article:nth-child(5) { --cycle:8s; --delay:-4.3s; }
.articles .article:nth-child(6) { --cycle:10s; --delay:-7.3s; }
.articles .article:nth-child(7) { --cycle:12s; --delay:-10.3s; }
.articles .article:nth-child(8) { --cycle:9s; --delay:-2.3s; }
.articles .article:nth-child(9) { --cycle:14s; --delay:-5.3s; }
.articles .article:nth-child(10) { --cycle:8s; --delay:-8.3s; }
.articles .article:nth-child(11) { --cycle:10s; --delay:-0.3s; }
.articles .article:nth-child(12) { --cycle:12s; --delay:-3.3s; }
.articles .article:nth-child(13) { --cycle:9s; --delay:-6.3s; }
.articles .article:nth-child(14) { --cycle:14s; --delay:-9.3s; }
.articles .article:nth-child(15) { --cycle:8s; --delay:-1.3s; }
@media(prefers-reduced-motion:reduce) { .container .articles .article:not(.text) img { animation:none!important; } .single-track { scroll-behavior:auto; } }
@media(max-width:600px) { .single-image > img { object-fit:cover; } }

/* Motifs-only replacement: a movable soft spotlight over the complete artwork. */
@property --spot-x { syntax:'<percentage>'; inherits:true; initial-value:50%; }
@property --spot-y { syntax:'<percentage>'; inherits:true; initial-value:45%; }
.spot-motifs { background:#000; color:#eee; text-align:center; }
.spot-motifs > h2 { font-size:3.65rem; line-height:1.1; padding:.6rem 1rem; border-bottom:1px solid #777; }
.spot-choice { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; }
.spot-stage { position:relative; height:clamp(440px,49vw,680px); --spot-x:50%; --spot-y:45%; transition:--spot-x .18s linear,--spot-y .18s linear; }
.spot-panel { position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .55s,visibility .55s; }
.spot-picture { position:absolute; inset:5% 10% 20%; mask-image:radial-gradient(circle at var(--spot-x) var(--spot-y),#000 0 78px,#000d 103px,transparent 145px); -webkit-mask-image:radial-gradient(circle at var(--spot-x) var(--spot-y),#000 0 78px,#000d 103px,transparent 145px); }
.spot-picture img { width:100%; height:100%; object-fit:cover; }
.spot-copy { position:absolute; bottom:10%; left:20%; right:20%; pointer-events:none; }
.spot-copy h3 { font:700 20px/1.3 Georgia,serif; margin-bottom:10px; }
.spot-copy p { max-width:520px; margin:auto; font:12px/1.5 Arial,sans-serif; color:#999; }
.spot-prev,.spot-next { position:absolute; top:39%; width:48px; height:64px; cursor:pointer; z-index:5; display:grid; place-items:center; }
.spot-prev { left:3%; }.spot-next { right:3%; }
.spot-prev::before,.spot-next::before { content:''; width:24px; height:24px; border-top:1px solid #aaa; border-right:1px solid #aaa; }
.spot-prev::before { transform:rotate(-135deg); }.spot-next::before { transform:rotate(45deg); }
.spot-prev:hover::before,.spot-next:hover::before { border-color:white; }
.spot-sensors { position:absolute; inset:5% 10% 20%; display:grid; grid-template-columns:repeat(16,1fr); grid-template-rows:repeat(8,1fr); z-index:2; }
.spot-sensors span { display:block; }
#spot-1:checked ~ .spot-stage .spot-panel-1 { opacity:1; visibility:visible; }
#spot-1:focus-visible ~ .spot-stage { outline:1px solid #aaa; outline-offset:-4px; }
#spot-2:checked ~ .spot-stage .spot-panel-2 { opacity:1; visibility:visible; }
#spot-2:focus-visible ~ .spot-stage { outline:1px solid #aaa; outline-offset:-4px; }
#spot-3:checked ~ .spot-stage .spot-panel-3 { opacity:1; visibility:visible; }
#spot-3:focus-visible ~ .spot-stage { outline:1px solid #aaa; outline-offset:-4px; }
#spot-4:checked ~ .spot-stage .spot-panel-4 { opacity:1; visibility:visible; }
#spot-4:focus-visible ~ .spot-stage { outline:1px solid #aaa; outline-offset:-4px; }
.spot-stage:has(.spot-sensors span:nth-child(1):hover) { --spot-x:3.125%; --spot-y:6.25%; }
.spot-stage:has(.spot-sensors span:nth-child(2):hover) { --spot-x:9.375%; --spot-y:6.25%; }
.spot-stage:has(.spot-sensors span:nth-child(3):hover) { --spot-x:15.625%; --spot-y:6.25%; }
.spot-stage:has(.spot-sensors span:nth-child(4):hover) { --spot-x:21.875%; --spot-y:6.25%; }
.spot-stage:has(.spot-sensors span:nth-child(5):hover) { --spot-x:28.125%; --spot-y:6.25%; }
.spot-stage:has(.spot-sensors span:nth-child(6):hover) { --spot-x:34.375%; --spot-y:6.25%; }
.spot-stage:has(.spot-sensors span:nth-child(7):hover) { --spot-x:40.625%; --spot-y:6.25%; }
.spot-stage:has(.spot-sensors span:nth-child(8):hover) { --spot-x:46.875%; --spot-y:6.25%; }
.spot-stage:has(.spot-sensors span:nth-child(9):hover) { --spot-x:53.125%; --spot-y:6.25%; }
.spot-stage:has(.spot-sensors span:nth-child(10):hover) { --spot-x:59.375%; --spot-y:6.25%; }
.spot-stage:has(.spot-sensors span:nth-child(11):hover) { --spot-x:65.625%; --spot-y:6.25%; }
.spot-stage:has(.spot-sensors span:nth-child(12):hover) { --spot-x:71.875%; --spot-y:6.25%; }
.spot-stage:has(.spot-sensors span:nth-child(13):hover) { --spot-x:78.125%; --spot-y:6.25%; }
.spot-stage:has(.spot-sensors span:nth-child(14):hover) { --spot-x:84.375%; --spot-y:6.25%; }
.spot-stage:has(.spot-sensors span:nth-child(15):hover) { --spot-x:90.625%; --spot-y:6.25%; }
.spot-stage:has(.spot-sensors span:nth-child(16):hover) { --spot-x:96.875%; --spot-y:6.25%; }
.spot-stage:has(.spot-sensors span:nth-child(17):hover) { --spot-x:3.125%; --spot-y:18.75%; }
.spot-stage:has(.spot-sensors span:nth-child(18):hover) { --spot-x:9.375%; --spot-y:18.75%; }
.spot-stage:has(.spot-sensors span:nth-child(19):hover) { --spot-x:15.625%; --spot-y:18.75%; }
.spot-stage:has(.spot-sensors span:nth-child(20):hover) { --spot-x:21.875%; --spot-y:18.75%; }
.spot-stage:has(.spot-sensors span:nth-child(21):hover) { --spot-x:28.125%; --spot-y:18.75%; }
.spot-stage:has(.spot-sensors span:nth-child(22):hover) { --spot-x:34.375%; --spot-y:18.75%; }
.spot-stage:has(.spot-sensors span:nth-child(23):hover) { --spot-x:40.625%; --spot-y:18.75%; }
.spot-stage:has(.spot-sensors span:nth-child(24):hover) { --spot-x:46.875%; --spot-y:18.75%; }
.spot-stage:has(.spot-sensors span:nth-child(25):hover) { --spot-x:53.125%; --spot-y:18.75%; }
.spot-stage:has(.spot-sensors span:nth-child(26):hover) { --spot-x:59.375%; --spot-y:18.75%; }
.spot-stage:has(.spot-sensors span:nth-child(27):hover) { --spot-x:65.625%; --spot-y:18.75%; }
.spot-stage:has(.spot-sensors span:nth-child(28):hover) { --spot-x:71.875%; --spot-y:18.75%; }
.spot-stage:has(.spot-sensors span:nth-child(29):hover) { --spot-x:78.125%; --spot-y:18.75%; }
.spot-stage:has(.spot-sensors span:nth-child(30):hover) { --spot-x:84.375%; --spot-y:18.75%; }
.spot-stage:has(.spot-sensors span:nth-child(31):hover) { --spot-x:90.625%; --spot-y:18.75%; }
.spot-stage:has(.spot-sensors span:nth-child(32):hover) { --spot-x:96.875%; --spot-y:18.75%; }
.spot-stage:has(.spot-sensors span:nth-child(33):hover) { --spot-x:3.125%; --spot-y:31.25%; }
.spot-stage:has(.spot-sensors span:nth-child(34):hover) { --spot-x:9.375%; --spot-y:31.25%; }
.spot-stage:has(.spot-sensors span:nth-child(35):hover) { --spot-x:15.625%; --spot-y:31.25%; }
.spot-stage:has(.spot-sensors span:nth-child(36):hover) { --spot-x:21.875%; --spot-y:31.25%; }
.spot-stage:has(.spot-sensors span:nth-child(37):hover) { --spot-x:28.125%; --spot-y:31.25%; }
.spot-stage:has(.spot-sensors span:nth-child(38):hover) { --spot-x:34.375%; --spot-y:31.25%; }
.spot-stage:has(.spot-sensors span:nth-child(39):hover) { --spot-x:40.625%; --spot-y:31.25%; }
.spot-stage:has(.spot-sensors span:nth-child(40):hover) { --spot-x:46.875%; --spot-y:31.25%; }
.spot-stage:has(.spot-sensors span:nth-child(41):hover) { --spot-x:53.125%; --spot-y:31.25%; }
.spot-stage:has(.spot-sensors span:nth-child(42):hover) { --spot-x:59.375%; --spot-y:31.25%; }
.spot-stage:has(.spot-sensors span:nth-child(43):hover) { --spot-x:65.625%; --spot-y:31.25%; }
.spot-stage:has(.spot-sensors span:nth-child(44):hover) { --spot-x:71.875%; --spot-y:31.25%; }
.spot-stage:has(.spot-sensors span:nth-child(45):hover) { --spot-x:78.125%; --spot-y:31.25%; }
.spot-stage:has(.spot-sensors span:nth-child(46):hover) { --spot-x:84.375%; --spot-y:31.25%; }
.spot-stage:has(.spot-sensors span:nth-child(47):hover) { --spot-x:90.625%; --spot-y:31.25%; }
.spot-stage:has(.spot-sensors span:nth-child(48):hover) { --spot-x:96.875%; --spot-y:31.25%; }
.spot-stage:has(.spot-sensors span:nth-child(49):hover) { --spot-x:3.125%; --spot-y:43.75%; }
.spot-stage:has(.spot-sensors span:nth-child(50):hover) { --spot-x:9.375%; --spot-y:43.75%; }
.spot-stage:has(.spot-sensors span:nth-child(51):hover) { --spot-x:15.625%; --spot-y:43.75%; }
.spot-stage:has(.spot-sensors span:nth-child(52):hover) { --spot-x:21.875%; --spot-y:43.75%; }
.spot-stage:has(.spot-sensors span:nth-child(53):hover) { --spot-x:28.125%; --spot-y:43.75%; }
.spot-stage:has(.spot-sensors span:nth-child(54):hover) { --spot-x:34.375%; --spot-y:43.75%; }
.spot-stage:has(.spot-sensors span:nth-child(55):hover) { --spot-x:40.625%; --spot-y:43.75%; }
.spot-stage:has(.spot-sensors span:nth-child(56):hover) { --spot-x:46.875%; --spot-y:43.75%; }
.spot-stage:has(.spot-sensors span:nth-child(57):hover) { --spot-x:53.125%; --spot-y:43.75%; }
.spot-stage:has(.spot-sensors span:nth-child(58):hover) { --spot-x:59.375%; --spot-y:43.75%; }
.spot-stage:has(.spot-sensors span:nth-child(59):hover) { --spot-x:65.625%; --spot-y:43.75%; }
.spot-stage:has(.spot-sensors span:nth-child(60):hover) { --spot-x:71.875%; --spot-y:43.75%; }
.spot-stage:has(.spot-sensors span:nth-child(61):hover) { --spot-x:78.125%; --spot-y:43.75%; }
.spot-stage:has(.spot-sensors span:nth-child(62):hover) { --spot-x:84.375%; --spot-y:43.75%; }
.spot-stage:has(.spot-sensors span:nth-child(63):hover) { --spot-x:90.625%; --spot-y:43.75%; }
.spot-stage:has(.spot-sensors span:nth-child(64):hover) { --spot-x:96.875%; --spot-y:43.75%; }
.spot-stage:has(.spot-sensors span:nth-child(65):hover) { --spot-x:3.125%; --spot-y:56.25%; }
.spot-stage:has(.spot-sensors span:nth-child(66):hover) { --spot-x:9.375%; --spot-y:56.25%; }
.spot-stage:has(.spot-sensors span:nth-child(67):hover) { --spot-x:15.625%; --spot-y:56.25%; }
.spot-stage:has(.spot-sensors span:nth-child(68):hover) { --spot-x:21.875%; --spot-y:56.25%; }
.spot-stage:has(.spot-sensors span:nth-child(69):hover) { --spot-x:28.125%; --spot-y:56.25%; }
.spot-stage:has(.spot-sensors span:nth-child(70):hover) { --spot-x:34.375%; --spot-y:56.25%; }
.spot-stage:has(.spot-sensors span:nth-child(71):hover) { --spot-x:40.625%; --spot-y:56.25%; }
.spot-stage:has(.spot-sensors span:nth-child(72):hover) { --spot-x:46.875%; --spot-y:56.25%; }
.spot-stage:has(.spot-sensors span:nth-child(73):hover) { --spot-x:53.125%; --spot-y:56.25%; }
.spot-stage:has(.spot-sensors span:nth-child(74):hover) { --spot-x:59.375%; --spot-y:56.25%; }
.spot-stage:has(.spot-sensors span:nth-child(75):hover) { --spot-x:65.625%; --spot-y:56.25%; }
.spot-stage:has(.spot-sensors span:nth-child(76):hover) { --spot-x:71.875%; --spot-y:56.25%; }
.spot-stage:has(.spot-sensors span:nth-child(77):hover) { --spot-x:78.125%; --spot-y:56.25%; }
.spot-stage:has(.spot-sensors span:nth-child(78):hover) { --spot-x:84.375%; --spot-y:56.25%; }
.spot-stage:has(.spot-sensors span:nth-child(79):hover) { --spot-x:90.625%; --spot-y:56.25%; }
.spot-stage:has(.spot-sensors span:nth-child(80):hover) { --spot-x:96.875%; --spot-y:56.25%; }
.spot-stage:has(.spot-sensors span:nth-child(81):hover) { --spot-x:3.125%; --spot-y:68.75%; }
.spot-stage:has(.spot-sensors span:nth-child(82):hover) { --spot-x:9.375%; --spot-y:68.75%; }
.spot-stage:has(.spot-sensors span:nth-child(83):hover) { --spot-x:15.625%; --spot-y:68.75%; }
.spot-stage:has(.spot-sensors span:nth-child(84):hover) { --spot-x:21.875%; --spot-y:68.75%; }
.spot-stage:has(.spot-sensors span:nth-child(85):hover) { --spot-x:28.125%; --spot-y:68.75%; }
.spot-stage:has(.spot-sensors span:nth-child(86):hover) { --spot-x:34.375%; --spot-y:68.75%; }
.spot-stage:has(.spot-sensors span:nth-child(87):hover) { --spot-x:40.625%; --spot-y:68.75%; }
.spot-stage:has(.spot-sensors span:nth-child(88):hover) { --spot-x:46.875%; --spot-y:68.75%; }
.spot-stage:has(.spot-sensors span:nth-child(89):hover) { --spot-x:53.125%; --spot-y:68.75%; }
.spot-stage:has(.spot-sensors span:nth-child(90):hover) { --spot-x:59.375%; --spot-y:68.75%; }
.spot-stage:has(.spot-sensors span:nth-child(91):hover) { --spot-x:65.625%; --spot-y:68.75%; }
.spot-stage:has(.spot-sensors span:nth-child(92):hover) { --spot-x:71.875%; --spot-y:68.75%; }
.spot-stage:has(.spot-sensors span:nth-child(93):hover) { --spot-x:78.125%; --spot-y:68.75%; }
.spot-stage:has(.spot-sensors span:nth-child(94):hover) { --spot-x:84.375%; --spot-y:68.75%; }
.spot-stage:has(.spot-sensors span:nth-child(95):hover) { --spot-x:90.625%; --spot-y:68.75%; }
.spot-stage:has(.spot-sensors span:nth-child(96):hover) { --spot-x:96.875%; --spot-y:68.75%; }
.spot-stage:has(.spot-sensors span:nth-child(97):hover) { --spot-x:3.125%; --spot-y:81.25%; }
.spot-stage:has(.spot-sensors span:nth-child(98):hover) { --spot-x:9.375%; --spot-y:81.25%; }
.spot-stage:has(.spot-sensors span:nth-child(99):hover) { --spot-x:15.625%; --spot-y:81.25%; }
.spot-stage:has(.spot-sensors span:nth-child(100):hover) { --spot-x:21.875%; --spot-y:81.25%; }
.spot-stage:has(.spot-sensors span:nth-child(101):hover) { --spot-x:28.125%; --spot-y:81.25%; }
.spot-stage:has(.spot-sensors span:nth-child(102):hover) { --spot-x:34.375%; --spot-y:81.25%; }
.spot-stage:has(.spot-sensors span:nth-child(103):hover) { --spot-x:40.625%; --spot-y:81.25%; }
.spot-stage:has(.spot-sensors span:nth-child(104):hover) { --spot-x:46.875%; --spot-y:81.25%; }
.spot-stage:has(.spot-sensors span:nth-child(105):hover) { --spot-x:53.125%; --spot-y:81.25%; }
.spot-stage:has(.spot-sensors span:nth-child(106):hover) { --spot-x:59.375%; --spot-y:81.25%; }
.spot-stage:has(.spot-sensors span:nth-child(107):hover) { --spot-x:65.625%; --spot-y:81.25%; }
.spot-stage:has(.spot-sensors span:nth-child(108):hover) { --spot-x:71.875%; --spot-y:81.25%; }
.spot-stage:has(.spot-sensors span:nth-child(109):hover) { --spot-x:78.125%; --spot-y:81.25%; }
.spot-stage:has(.spot-sensors span:nth-child(110):hover) { --spot-x:84.375%; --spot-y:81.25%; }
.spot-stage:has(.spot-sensors span:nth-child(111):hover) { --spot-x:90.625%; --spot-y:81.25%; }
.spot-stage:has(.spot-sensors span:nth-child(112):hover) { --spot-x:96.875%; --spot-y:81.25%; }
.spot-stage:has(.spot-sensors span:nth-child(113):hover) { --spot-x:3.125%; --spot-y:93.75%; }
.spot-stage:has(.spot-sensors span:nth-child(114):hover) { --spot-x:9.375%; --spot-y:93.75%; }
.spot-stage:has(.spot-sensors span:nth-child(115):hover) { --spot-x:15.625%; --spot-y:93.75%; }
.spot-stage:has(.spot-sensors span:nth-child(116):hover) { --spot-x:21.875%; --spot-y:93.75%; }
.spot-stage:has(.spot-sensors span:nth-child(117):hover) { --spot-x:28.125%; --spot-y:93.75%; }
.spot-stage:has(.spot-sensors span:nth-child(118):hover) { --spot-x:34.375%; --spot-y:93.75%; }
.spot-stage:has(.spot-sensors span:nth-child(119):hover) { --spot-x:40.625%; --spot-y:93.75%; }
.spot-stage:has(.spot-sensors span:nth-child(120):hover) { --spot-x:46.875%; --spot-y:93.75%; }
.spot-stage:has(.spot-sensors span:nth-child(121):hover) { --spot-x:53.125%; --spot-y:93.75%; }
.spot-stage:has(.spot-sensors span:nth-child(122):hover) { --spot-x:59.375%; --spot-y:93.75%; }
.spot-stage:has(.spot-sensors span:nth-child(123):hover) { --spot-x:65.625%; --spot-y:93.75%; }
.spot-stage:has(.spot-sensors span:nth-child(124):hover) { --spot-x:71.875%; --spot-y:93.75%; }
.spot-stage:has(.spot-sensors span:nth-child(125):hover) { --spot-x:78.125%; --spot-y:93.75%; }
.spot-stage:has(.spot-sensors span:nth-child(126):hover) { --spot-x:84.375%; --spot-y:93.75%; }
.spot-stage:has(.spot-sensors span:nth-child(127):hover) { --spot-x:90.625%; --spot-y:93.75%; }
.spot-stage:has(.spot-sensors span:nth-child(128):hover) { --spot-x:96.875%; --spot-y:93.75%; }

@media(max-width:1100px) { .spot-motifs > h2 { font-size:clamp(26px,4vw,48px); } .spot-stage { height:510px; } }
@media(hover:none), (pointer:coarse) {
 .spot-stage { animation:spot-roam 12s ease-in-out infinite; }
 .spot-sensors { pointer-events:none; }
}
@keyframes spot-roam { 0%,100% { --spot-x:50%; --spot-y:45%; } 25% { --spot-x:78%; --spot-y:25%; } 50% { --spot-x:65%; --spot-y:75%; } 75% { --spot-x:25%; --spot-y:50%; } }
@media(max-width:600px) {
 .spot-motifs > h2 { font-size:30px; padding:22px 16px; }
 .spot-stage { height:470px; animation:spot-roam 12s ease-in-out infinite; }
 .spot-picture,.spot-sensors { inset:5% 7% 26%; }
 .spot-picture { mask-image:radial-gradient(circle at var(--spot-x) var(--spot-y),#000 0 52px,#000d 68px,transparent 98px); -webkit-mask-image:radial-gradient(circle at var(--spot-x) var(--spot-y),#000 0 52px,#000d 68px,transparent 98px); }
 .spot-picture img { object-fit:cover; }
 .spot-copy { left:12%; right:12%; bottom:9%; }
 .spot-copy h3 { font-size:18px; }.spot-copy p { font-size:11px; }
 .spot-prev { left:0; }.spot-next { right:0; }
 .spot-prev::before,.spot-next::before { width:16px; height:16px; }
}
@media(prefers-reduced-motion:reduce) { .spot-stage { animation:none; transition:none; } .spot-panel { transition:none; } }