/* 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;
}

/* 从制作过程开始增加版块高度与留白；rem 随现有 @media 同比例适配。
   保持图片大小和比例，不通过拉伸图片增加高度。 */

/* 制作过程：保持步骤 / 主图 / 说明三列 */

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

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

}

/* iPad：明确保留原来的构图和叠放顺序 */

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

}