/* 基础变量与重置 */
:root {
    --bg-color: #FFFFFF;
    --text-main: #333333;
    --text-light: #666666;
    --accent: #C8A97E;
    --border-color: #E6DFD3;
    --font-serif: 'Times New Roman', 'Songti SC', 'SimSun', serif;
}

* { margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-serif);
    line-height: 1.8;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; 
    color: inherit; 
}

img { max-width: 100%; 
    height: auto; 
}

/* ================== 顶部导航 ================== */
.top-nav {
    display: flex; 
    justify-content: center; 
    gap: 4rem;
    padding: 30px 20px; 
    font-size: 0.9rem; 
    letter-spacing: 1px;
    font-family: 'Roboto Mono', monospace;
}

.top-nav a { 
    color: var(--text-light); 
    transition: color 0.3s; 
    text-align: center; 
}

.top-nav a:hover { 
    color: var(--accent); 
}


/* ================== 主标题区域 (包含四个云纹) ================== */
.hero-container{
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

.hero-title { 
    padding: 250px 5vw 350px; 
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Italiana', serif;
}

.hero-title h1 {
    font-size: 100px; 
    font-weight: normal; 
    line-height: 1.2;
    letter-spacing: 3px; 
    color: #222; 
    margin: 15px 0;
    position: relative; 
    z-index: 2; /* 确保文字在云纹上方 */
}

/* 云纹通用基础样式 */
.cloud-wrapper {
    position: absolute; /* 绝对定位，使其能够在标题周围自由浮动 */
    z-index: 1; /* 放在文字下层，或者如果你希望覆盖文字可以设为 3 */
    pointer-events: none; /* 不阻挡鼠标点击文字或链接 */
}

.cloud-wrapper img {
    width: 100%; 
    height: auto; 
    opacity: 0.8; 
}

.cloud-1 {
    top: -570px;       
    left: -10%;      
    width: 1100px;    
}

.cloud-2 {
    top: -650px;       
    right: -22%;     
    width: 1250px;
}

.cloud-3 {
    bottom: -770px;    
    left: -26%;        
    width: 1500px;
    transform: scaleX(-1);
}

/* 云纹 4 (默认在右下角) */
.cloud-4 {
    bottom: -750px;   /* 距离底部 100px */
    right: -20%;      /* 距离右侧 15% */
    width: 1400px;
}

/* ================== 通用 Section ================== */
.section { 
    position: relative; 
    padding: 200px 20%; 
    max-width: 100%; 
    margin: 0 auto; 
}

.section-title { 
    position: absolute;
    top: 350px;
    right: 25%;
    font-size: 55px; 
    font-weight: normal; 
    color: #775100; 
    margin-bottom: 70px; 
    letter-spacing: 0px; 
    font-family: 'Questrial', sans-serif;
}

.sun-moon { 
    position: absolute; 
    top: 130px; 
    right: 15%; 
    width: 400px; 
    height: 400px; 
    background-color: #FFF9E1; 
    border-radius: 50%; 
    z-index: -1; 
    opacity: 0.8; 
}

.sun-moon-large { 
    position: absolute; 
    top: 80px; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 150px; 
    height: 150px; 
    background-color: #F5F5F5; 
    border-radius: 50%; 
    z-index: -1; 
    opacity: 0.6; 
}

/* ================== 1. Background ================== */
.bg-section { 
    position: relative;
    text-align: right; 
    padding-top: 250px; 
}

.bg-section .text-content { 
    position: absolute;
    max-width: 550px; 
    margin-left: auto; 
    text-align: right; 
    font-size: 17px; 
    position: relative; 
    z-index: 2; 
    bottom: -350px;
    right: 8%;
}

.bg-section .text-content p { 
    margin-bottom: 15px; 
    font-family: 'Questrial', sans-serif;
}

.illustration-left { 
    position: absolute; 
    top: 220px; 
    left: -897px; 
    width: 1500px; 
    z-index: 1; 
}

.illustration-right { 
    position: absolute; 
    top: 700px; 
    right: 0px; 
    width: 1700px; 
    z-index: 1; 
}

.events-section { 
    position: relative;
    padding-top: 1150px; 
}

.events-section .section-title{
    text-align: center;
    margin-top: 540px;
    margin-right: 840px;
    font-size: 55px;
    font-family: 'Questrial', sans-serif;
}

.event-item { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    margin-bottom: 80px; 
}

.event-text { 
    width: 45%; 
    font-size: 15px; 
    text-align: justify; 
    font-family: 'Questrial', sans-serif;
}

.event-text h3 { 
    font-size: 40px; 
    font-weight: normal; 
    color: var(--accent); 
    margin-bottom: 40px; 
    color: #222;
}

.event-text.left-title-1 h3 {
    margin-left: 850px; 
    margin-top: 5%;/* 让标题向右移动 50px */
    text-align: center;
    display: block;
    width: 500px;
    position: absolute;
    top: 52%;
}

.event-text.left-title-2 h3{
    display: block;
    width: 500px;
    position: absolute;
    top: 92%;
    left: 10%;
}

.event-text.right-title h3{
    display: block;
    position: absolute;
    width: 500px;
    top: 143%;
    right: 0.5%;
}

.event-text.left-text-1 p {
    display: block;
    margin-top: 5%;
    margin-right: 45%;
    text-align: left;
    position: absolute;
    top: 60%;
    left: 40%;
    font-family: 'Questrial', sans-serif;
}

.event-text.left-text-2 p{
    display: block;
    position: absolute;
    top: 99%;
    left: 10%;
    margin-right: 75%;
    text-align: left;
    font-family: 'Questrial', sans-serif;
}

.event-text.right-text p{
    display: block;
    position: absolute;
    top: 150%;
    left: 70%;
    margin-right: 15%;
    text-align: left;
    font-family: 'Questrial', sans-serif;
}

.event-image { 
    width: 50%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 15px; 
}

.event-image img { 
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.event-image.right-image{
    position: absolute;
    top: 65%;
    right: -2%;
    width: 850px;
}

.event-image.right-image.dual-img{
    position: absolute;
    top: 117%;
    left: 14%;
}

.event-image.left-image{
    position: absolute;
    top: 150%;
    left: 35%;
}

.finally-block { 
    margin-top: 100px; 
    text-align: left; 
}

.finally-title { 
    font-size: 40px; 
    font-weight: normal; 
    color: black; 
    margin-bottom: 40px; 
    position: absolute;
    display: block;
    top: 180%;
    left: 40%;
    font-family: 'Questrial', sans-serif;
}

.finally-content { 
    display: flex; 
    justify-content: center; 
    align-items: center; gap: 40px; 
    max-width: 800px; 
    margin: 0 auto; 
    font-family: 'Questrial', sans-serif;
}

.finally-img img { 
    width: 200px; 
    position: absolute;
    top: 190%;
    left: 24%;
}

.finally-text { 
    text-align: left ;
    font-size: 15px;
    text-align: justify; 
    margin-right: 45%;
    position: absolute;
    top: 188%;
    left: 40%;
}

.relics-section { 
    padding-top: 2700px; 
    padding-bottom: 150px; 
}
.watermark { 
    position: absolute; 
    top: 1870px; 
    right: -2%; 
    font-size: 84px; 
    font-weight: bold; 
    color: #EEEEEE; 
    line-height: 1.8; 
    text-align: right; 
    z-index: 0; 
    pointer-events: auto; 
    white-space: nowrap; 
    filter: blur(5px);
}

.section-title-1{
    position: absolute;
    display: block;
    top: 45%;
    left: 30%;
    font-family: 'Questrial', sans-serif;
}

.watermark span { 
    display: block; 
}

.section-title h2{
    display: block;
    position: absolute;
    top: 100%;
}

.relic-item.align-left-1{
    display: block;
    position: absolute;
    width: 160px;
    top: 0%;
    left: 0%;
}

.relic-item.align-right-1{
    display: block;
    position: absolute;
    width: 140px;
    top: 2%;
    right: -17%;
}

.relic-item.align-right-2{
    display: block;
    position: absolute;
    width: 130px;
    top: 60%;
    right: -15%;
}

.relic-item.align-left-2{
    display: block;
    position: absolute;
    width: 80px;
    top: 160%;
    left: 50%;
}

.relic-item.align-right-3{
    display: block;
    position: absolute;
    width: 230px;
    top: 225%;
    left: 43%;
}

.relic-item.align-left-3{
    display: block;
    position: absolute;
    width: 135px;
    top: 300%;
    left: 0%;
}

.relic-item.align-left-4{
    display: block;
    position: absolute;
    width: 150px;
    top: 370%;
    left: -1%;
}

.relic-item.align-right-4{
    display: block;
    position: absolute;
    width: 250px;
    top: 370%;
    right: -17%;
}

.relic-item.align-left-5{
    display: block;
    position: absolute;
    width: 300px;
    top: 450%;
    left: 35%;
}

.relic-item-text-1{
    display: block;
    position: absolute;
    top: 1%;
    left: -14%;
    font-family: 'Questrial', sans-serif;
}

.relic-item-text-2{
    display: block;
    position: absolute;
    top: 4%;
    right: 0%;
    font-family: 'Questrial', sans-serif;
}

.relic-item-text-3{
    display: block;
    position: absolute;
    top: 65%;
    right: 3%;
    font-family: 'Questrial', sans-serif;
}

.relic-item-text-4{
    display: block;
    position: absolute;
    top: 163%;
    left: 35%;
    font-family: 'Questrial', sans-serif;
}

.relic-item-text-5{
    display: block;
    position: absolute;
    top: 228%;
    left: 32%;
    font-family: 'Questrial', sans-serif;
}

.relic-item-text-6{
    display: block;
    position: absolute;
    top: 305%;
    left: -15%;
    font-family: 'Questrial', sans-serif;
}

.relic-item-text-7{
    display: block;
    position: absolute;
    top: 370%;
    left: -15%;
    font-family: 'Questrial', sans-serif;
}

.relic-item-text-8{
    display: block;
    position: absolute;
    top: 373%;
    right: 13%;
    font-family: 'Questrial', sans-serif;
}

.relic-item-text-9{
    display: block;
    position: absolute;
    top: 453%;
    left: 20%;
    font-family: 'Questrial', sans-serif;
}

.relics-gallery { 
    position: relative; 
    z-index: 2; 
    margin-top: 100px; 
}

.relic-row { 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 80px; 
    align-items: flex-end; 
}

.relic-row.justify-start { 
    justify-content: flex-start; 
}

.relic-row.justify-end { 
    justify-content: flex-end; 
}

.relic-item { 
    display: flex; 
    flex-direction: column; 
    max-width: 300px; 
}

.relic-item.align-left { 
    align-items: flex-start; 
    text-align: left; 
}

.relic-item.align-right { 
    align-items: flex-end; 
    text-align: right; 
}

.relic-item img { 
    margin-bottom: 15px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.03); 
    background-color: #FAFAFA; 
}

.relic-item .en { 
    font-size: 0.9rem; 
    color: var(--text-light); 
    line-height: 1.4; 
}

.social-section { 
    padding-top: 2200px; 
    padding-bottom: 100px; 
}

.social-text { 
    max-width: 800px; 
    font-size: 15px; 
    text-align: justify; 
    margin-bottom: 130px; 
    font-family: 'Questrial', sans-serif;
}

.social-text p { 
    margin-bottom: 25px; 
}

.more-links { 
    font-size: 40px; 
    color: var(--text-light); 
    padding-top: 0px; 
    font-family: 'Russo One', sans-serif;
    margin-top: -5%;
}

.socia-title h2{
    display: block;
    position: absolute;
    top: 69%;
    left: 20%;
    font-family: 'Questrial', sans-serif;
}

.conclusion-section { 
    text-align: center; 
    padding-top: 550px; 
    padding-bottom: 550px; 
    background-color: #FFFBF4;
}

.conclusion-section .center-title { 
    text-align: center; 
    font-size: 40px; 
    margin-bottom: 50px; 
    display: block;
    position: absolute;
    top: 35%;
    left: 25%;
    font-family: 'Questrial', sans-serif;
}

.conclusion-illustration { 
    margin-bottom: 50px; 
    width: 1700px;
    display: block;
    position: absolute;
    top: 15%;
    left: 0%;
}

.conclusion-text { 
    max-width: 700px; 
    margin: 0 auto; 
    font-size: 15px; 
    text-align: left; 
    margin-left: 25%;
    margin-right: 20%;
    font-family: 'Questrial', sans-serif;
}

.site-footer { 
    padding: 50px 10%; 
    font-size: 15px; 
    color: var(--text-light); 
    font-family: 'Questrial', sans-serif;
}

.footer-links { 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 30px; 
}

.footer-group { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
}

.footer-group a { 
    color: var(--text-light); 
    transition: color 0.3s; 
}

.footer-group a:hover { 
    color: var(--text-main);
}

.footer-copyright { 
    text-align: left; 
    font-size: 0.8rem; 
    color: #999; 
}


/* =================================================================
   📱 移动端彻底重构 (屏幕 <= 768px 时触发)
   核心逻辑：隐藏冗余图片、取消所有绝对定位、让元素自然流式排列
   ================================================================= */
@media (max-width: 768px) {

    /* 1. 全局修正：字体、间距与溢出 */
    body {
        line-height: 1.6;
    }
    
    .section {
        padding: 60px 5% !important; /* 大幅缩减电脑端动辄200px、2700px的内边距 */
    }

    /* 2. 顶部导航：允许换行，缩小间距 */
    .top-nav {
        flex-wrap: wrap;
        gap: 10px 20px;
        padding: 15px;
        font-size: 0.85rem;
    }

    /* ================= 🚫 隐藏指定图片 ================= */
    /* 去掉第一页（主标题区域）的云纹图片 */
    .cloud-wrapper, 
    .cloud-1, 
    .cloud-2, 
    .cloud-3, 
    .cloud-4,
    /* 去掉第二页（背景介绍区域）的左右插图 */
    .illustration-left,
    .illustration-right,
    /* 去掉第三页（关键事件区域）的配图，防止重合 */
    .event-image {
        display: none !important; 
    }

    /* 3. 主标题：去掉云纹后，调整内边距让标题居中 */
    .hero-container {
        min-height: auto;
        padding-bottom: 50px;
    }
    
    .hero-title {
        padding: 120px 20px 80px; /* 调整上下留白 */
    }

    .hero-title h1 {
        font-size: 38px; /* 从 100px 猛缩到 38px */
        letter-spacing: 1px;
        margin: 10px 0;
    }

    /* 4. 各个区块的通用标题调整 */
    .section-title {
        position: static !important; /* 取消绝对定位 */
        font-size: 36px;
        text-align: center;
        margin: 0 auto 30px auto !important;
        right: auto !important;
        top: auto !important;
    }

    /* 5. 第二页（背景介绍）：修复文字位置 */
    #background .text-content {
        position: static !important; 
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important; 
        right: auto !important;
        bottom: auto !important;
    }
    #background .text-content p {
        text-align: justify !important;
        padding: 0 10px;
    }

    /* 6. 第三页（关键事件）：彻底取消绝对定位 */
    .events-section {
        padding-top: 80px !important; 
    }

    .events-section .section-title {
        margin: 0 0 30px 0 !important;
        text-align: center;
    }

    .event-item {
        flex-direction: column !important; /* 改为垂直排列 */
        margin-bottom: 60px !important;
        display: flex !important;
    }

    /* 强制清除所有文字子元素的绝对定位 */
    .event-text,
    .event-text.left-title-1 h3, .event-text.left-title-2 h3, .event-text.right-title h3,
    .event-text.left-text-1 p, .event-text.left-text-2 p, .event-text.right-text p,
    .finally-title, .finally-img img, .finally-text {
        position: static !important;
        width: 100% !important;
        max-width: 100%;
        margin: 0 0 20px 0 !important;
        text-align: left !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
    }

    .event-text h3 {
        font-size: 32px !important;
        margin-bottom: 15px !important;
    }

    .event-text p {
        font-size: 15px !important; 
        text-align: justify !important; 
    }

    /* 7. Finally 区块 */
    .finally-block {
        margin-top: 40px !important;
    }
    .finally-content {
        flex-direction: column !important;
        gap: 20px !important;
    }
    .finally-img img {
        width: 80% !important;
        margin: 0 auto !important;
        display: block;
    }
    .finally-title {
        font-size: 32px !important;
        text-align: center !important;
    }
    .finally-text {
        font-size: 15px !important;
        text-align: justify !important;
        padding: 0 10px;
    }

    /* 8. 文物区块 (Relics) */
    .relics-section {
        padding-top: 80px !important;
        padding-bottom: 50px !important;
    }

    .section-title-1 {
        position: static !important;
        text-align: center;
        margin-bottom: 30px;
    }
    .section-title-1 h2 {
        font-size: 36px;
    }

    /* 水印缩小并居中 */
    .watermark {
        position: static !important;
        font-size: 32px !important;
        text-align: center !important;
        margin-bottom: 40px !important;
        filter: blur(2px);
        top: auto !important;
        right: auto !important;
        white-space: normal !important;
    }

    .relics-gallery {
        margin-top: 20px !important;
    }

    .relic-row {
        flex-direction: column !important; /* 改为垂直堆叠 */
        align-items: center !important;
        margin-bottom: 40px !important;
    }

    .relic-item, 
    [class^="relic-item align-"], 
    [class^="relic-item-text-"] {
        position: static !important; 
        width: 80% !important; 
        max-width: 300px;
        margin: 0 auto 15px auto !important;
        text-align: center !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
    }

    .relic-item img {
        margin: 0 auto 10px auto;
        width: 100%;
        height: auto;
    }

    /* 9. 社会生活区块 */
    .social-section {
        padding-top: 80px !important;
    }
    .socia-title h2 {
        position: static !important;
        text-align: center;
        margin-bottom: 30px;
    }
    .social-text {
        font-size: 15px !important;
        margin-bottom: 40px !important;
    }
    .more-links {
        font-size: 18px !important;
        margin-top: 20px !important;
        text-align: center;
    }

    /* 10. 结论区块 */
    .conclusion-section {
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }
    .conclusion-section .center-title {
        position: static !important;
        font-size: 36px !important;
        margin-bottom: 20px !important;
    }
    .conclusion-illustration {
        position: static !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }
    .conclusion-illustration img {
        width: 100%;
        height: auto;
    }
    .conclusion-text {
        margin: 0 auto !important;
        width: 90% !important;
        font-size: 15px !important;
    }

    /* 11. 页脚 */
    .site-footer {
        padding: 30px 5% !important;
    }
    .footer-links {
        flex-direction: column !important;
        gap: 20px !important;
    }
    .footer-group {
        text-align: center;
    }
}

/* 针对极小屏幕 (宽度小于 380px) 的进一步微调 */
@media (max-width: 380px) {
    .hero-title h1 {
        font-size: 32px;
    }
    .event-text h3, .section-title, .section-title-1 h2 {
        font-size: 28px !important;
    }
}