:root{
    --sand:#b99d78;
    --ink:#685035;
    --gold:#99703b;
    --paper:#f4ecd8}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px};
body{margin:0;background:var(--paper);
    color:var(--ink);
    font-family:Georgia,'Times New Roman',serif;font-size:clamp(13px,1.85vw,27px);
    line-height:1.35
}
body.header,main,body.footer{
    max-width:1440px;
    margin:auto}
h1,h2,h3,p,figure{
    margin:0}
h1,h2,h3{line-height:1.1}
h2{font-size:clamp(25px,4.1vw,59px);
    color:var(--gold);text-shadow:1px 2px 0 #dec9a2
}
h3{font-size:1.15em}p+p{margin-top:1em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}

a:focus-visible,button:focus-visible{
    outline:3px solid #835624;
    outline-offset:4px}
a:hover{
    text-decoration:underline}
section{position:relative;overflow:hidden}
section[id]{scroll-margin-top:20px}
.topbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#675033;
    color:#fff5df;
    min-height:clamp(44px,6.5vw,94px);
    padding:0 5%;
    font-size:.95em;
    font-family: 'Irish Grover', cursive;}

    .topbar nav{
    display:flex;
    gap:5vw}

.account{display:flex;gap:2vw;align-items:center;}
.account-btn{
    cursor:pointer;
    font-size:.85em;
    display:inline-block;
    font-family: 'Irish Grover', cursive;}
.account .signup{
    background:var(--sand);
    padding:.15em .6em;
}

.hero{
    height:min(71vw,1022px);
    background:url('https://res.cloudinary.com/imej4dva/image/upload/v1790178439/page1_zhenggebeij.webp') center/100% 100% no-repeat;
    display:flex;
    justify-content:center;
    align-items:flex-start}

/* ---- 开关本体：藏在卡片位置，只用来记录选中状态 ---- */
.book-toggle{
    position:absolute;
    top:5.5%;
    left:50%;
    width:1px;
    height:1px;
    margin:0;
    opacity:0;
    pointer-events:none;
}

/* 键盘聚焦时给卡片一个焦点环 */
.book-toggle:focus-visible ~ .hero-card{
    outline:3px solid #835624;
    outline-offset:6px;
}

/* ---- 卡片容器：保留位置尺寸，加上 3D 透视 ---- */
.hero-card{
    position:relative;
    display:block;
    width:35.5%;
    height:76%;
    margin-top:5.5%;
    perspective:1600px;
    perspective-origin:50% 50%;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

/* ---- 书本容器：翻开后整体右移半张卡片宽，使展开面居中 ---- */
.book{
    position:absolute;
    inset:0;
    transform-style:preserve-3d;
    transform:translateX(0);
    transition:transform .9s cubic-bezier(.45,.05,.2,1);
}
.book-toggle:checked ~ .hero-card .book{
    transform:translateX(50%);
}

/* ---- 书脊中缝：翻开后浮现 ---- */
.book::after{
    content:'';
    position:absolute;
    top:5%;
    bottom:5%;
    left:0;
    width:2px;
    margin-left:-1px;
    background:linear-gradient(180deg,
        transparent,
        #7a61421f 12%,
        #7a614233 50%,
        #7a61421f 88%,
        transparent);
    transform:translateZ(40px);
    opacity:0;
    transition:opacity .5s ease .35s;
    pointer-events:none;
}
.book-toggle:checked ~ .hero-card .book::after{opacity:1}

/* ---- 每一张纸 ---- */
.sheet{
    position:absolute;
    inset:0;
    transform-style:preserve-3d;
    transform-origin:left center;
    transform:rotateY(0deg);
    transition:transform .9s cubic-bezier(.45,.05,.2,1);
    will-change:transform;
}

/* 只有带 .turn 的纸会翻过去 */
.book-toggle:checked ~ .hero-card .turn{
    transform:rotateY(-180deg);
}

/* 翻开顺序：封面先翻，后面一张接一张 */
.book-toggle:checked ~ .hero-card .cover{transition-delay:0s}
.book-toggle:checked ~ .hero-card .t1{transition-delay:.14s}
.book-toggle:checked ~ .hero-card .t2{transition-delay:.28s}
.book-toggle:checked ~ .hero-card .t3{transition-delay:.42s}
.book-toggle:checked ~ .hero-card .t4{transition-delay:.56s}

/* 合上顺序：最后翻过去的先回来，封面最后合 */
.book-toggle:not(:checked) ~ .hero-card .cover{transition-delay:.42s}
.book-toggle:not(:checked) ~ .hero-card .t1{transition-delay:.32s}
.book-toggle:not(:checked) ~ .hero-card .t2{transition-delay:.22s}
.book-toggle:not(:checked) ~ .hero-card .t3{transition-delay:.12s}
.book-toggle:not(:checked) ~ .hero-card .t4{transition-delay:0s}

/* ---- 纸张双面 ---- */
.face{
    position:absolute;
    inset:0;
    overflow:hidden;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    box-shadow:inset 0 0 0 1px #0000000a;
}
.face.back{
    transform:rotateY(180deg);
}

/* 内页纸面质感 */
.sheet .front{
    background:radial-gradient(120% 100% at 80% 20%,#fffaf0,#f2e8d3);
}
.sheet .front p{
    color:#875620;
    font-family: 'Itim', cursive;
    margin-top: 70%;
    margin-left: 28%;
}

.sheet .back{
    background:radial-gradient(120% 100% at 20% 80%,#fffaf0,#ece1c9);
}

/* 留在右边的底层纸：加一点侧边厚度 */
.base .front{
    box-shadow:
        inset 0 0 0 1px #00000008,
        -3px 0 8px #00000012;
}

/* ---- 封面 ---- */
.cover .front{
    background:var(--sand) url('https://res.cloudinary.com/imej4dva/image/upload/v1790178442/page1_kapian.webp') center/100% 100% no-repeat;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:0 9% 12%;
}
.cover .front p{
    text-align:center;
    color:#fff;
    font-size:.92em;
    text-shadow:0 1px 3px #3d301680;
    margin:0;
    font-family: 'Itim', cursive;
}
/* 封面翻过去后看到的背面（书封内衬） */
.cover .back{
    background:
        linear-gradient(90deg,#00000014,#0000 14%),
        linear-gradient(160deg,#e8dbbc,#d8c8a4);
}

.enter{
    position:absolute;
    bottom:2.5%;
    color:#fff7df;
    text-align:center;
    font-weight:bold;
    font-family: 'Irish Grover', cursive;
    }
.enter span{
    display:block;
    font-size:1.8em;
    line-height:.8;
    margin-bottom:.15em}
.paper{
    background:url('https://res.cloudinary.com/imej4dva/image/upload/v1790178438/zishan_beijing.webp') center/100% 100% no-repeat}
.mountains{
    background:url('https://res.cloudinary.com/imej4dva/image/upload/v1790178447/shan_beijing.webp') center/cover no-repeat}
.foreword{
    padding:3% 12% 7%;
    min-height:min(54vw,778px)}
.foreword h1{
    text-align:center;
    color:#875620;
    font-size:clamp(30px,6vw,86px);
    font-style:italic;margin-bottom:5%;
    font-family: 'Irish Grover', cursive;}
.foreword h1:after{
    content:'';
    display:block;
    width:29%;
    height:2px;
    background:#c1a679;
    margin:2% auto}
.intro{font-size:.95em;
    color:#875620;
    font-family: 'Itim', cursive;}
.continue{
    float:right;
    margin-top:5%}
.button{
    display:inline-block;
    border:0;
    color:white;
    background:var(--sand);
    padding:.15em .8em;
    box-shadow:4px 4px 0 #a6896550;
    font-weight:bold;
    font-family: 'Itim', cursive;
}
.ancient{
    padding:5% 6%;
    min-height:min(65vw,936px)}
.ancient h2{
    font-size:clamp(30px,6.1vw,88px);
    max-width:85%;margin-bottom:4%;
    color:#875620;
    font-family: 'Irish Grover', cursive;
}
.ancient-grid{
    display:grid;
    grid-template-columns:1.8fr 1fr;
    gap:6%;
    align-items:center}
.ancient-grid>div{
    font-size:.96em;
    color:#664C2F;
    font-family: 'Itim', cursive;
}
.ancient-grid>img{width:100%;border:7px solid #b39666}
.sites{background:var(--sand) url('https://res.cloudinary.com/imej4dva/image/upload/v1790178441/page4_ditubeijing.webp') center/cover;padding:3% 2% 2%}
    .sites h2{
        color:white;
        margin:0 4% 3%;
        text-shadow:1px 2px #523c1f;
        font-family: 'Irish Grover', cursive;
    }
    .site-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:2%}
    .site-cards a{display:flex;flex-direction:column;align-items:center;background:#f6edd8;box-shadow:3px 4px 0 #65533c80;min-width:0}
    .site-cards img{height:min(33vw,475px);width:100%;object-fit:contain;padding:8% 12%}
    .site-cards span{
        font-weight:bold;
        text-align:center;
        padding:.4em .1em;
        font-size:1.08em;
        color:#664C2F;
        font-family: 'Itim', cursive;
    }

    .academy{padding:4% 6% 3%}
    .academy h2{
        margin-bottom:4%;
        color:#875620;
        font-family: 'Irish Grover', cursive;
    }
    .academy-photo{aspect-ratio:1237/547;background:url('https://res.cloudinary.com/imej4dva/image/upload/v1790178444/page5_yulubeijing.webp') center/cover;position:relative}
    .academy-caption{
        position:absolute;
        right:0;bottom:0;
        width:61%;
        padding:3%;
        text-align:right;
        color:white;
        background:linear-gradient(90deg,transparent,#162b297d);
        font-size:.88em;text-shadow:0 1px 3px #000;
        font-family: 'Itim', cursive;
    }
    .academy-caption h3{
        margin-bottom:.5em;
        font-family: 'Irish Grover', cursive;
    }
    .history{padding:4% 3% 5%;min-height:min(63vw,907px)}
    .ribbon{
        display:table;
        margin:0 auto;
        background:var(--sand);
        padding:.4em 1.4em;
        color:white;
        font-size:1.15em;
        box-shadow:8px 8px 0 #99826555;text-shadow:none;
        font-family: 'Irish Grover', cursive;
    }
    .timeline{
        display:flex;
        list-style:none;
        margin:0;
        padding:0;
        position:relative;
        min-height:min(43vw,619px);
        font-size:.9em;
        font-family: 'Itim', cursive;
    }
    .timeline:before{
        content:'';
        position:absolute;
        top:51%;
        left:0;
        right:0;
        border-top:3px solid #b6996f}
    .timeline li{
        width:20%;position:relative;text-align:center;padding:0 1%}
    .timeline li:before{
            content:'';
            position:absolute;
            top:51%;
            left:calc(50% - .9em);
            width:1.6em;
            height:1.6em;
            border:2px solid #b6996f;
            background:#ece4c9;
            border-radius:50%;
            transform:translateY(-50%)}
    .timeline p{
        position:absolute;
        left:3%;
        right:3%;
        top:58%;}
    .timeline li:nth-child(even) p{
        top:auto;bottom:55%}
    .mawangdui{min-height:min(57vw,821px);
        padding-top:3%;
    }
    .ma-title{
        margin-left:59%;
        color:#875620;
        font-family: 'Irish Grover', cursive;
    }.ma-title p{
        margin-top:.4em;
        font-family: 'Itim', cursive;
        color:#664C2F;
    }
    .cosmos{position:relative;width:100%;height:min(44vw,634px);margin-top:1%}
    .semicircle{position:absolute;bottom:0;left:22%;width:54%;height:67%;border-radius:100% 100% 0 0;background:var(--sand)}
    .beast{
        position:absolute;
        width:21%;
        text-align:center;
        font-size:.9em;
        color:#664C2F;
        font-family: 'Itim', cursive;
    }
    .beast img{height:min(8vw,115px);object-fit:contain;margin:auto}
    .beast figcaption{margin-top:.35em}
    .one{left:4%;bottom:8%}
    .two{left:17%;bottom:33%}
    .three{left:40%;bottom:55%;width:26%}
    .four{right:15%;bottom:33%}
    .five{right:3%;bottom:5%}
    .silks{display:grid;grid-template-columns:1fr 1fr;gap:9%;background:var(--sand);padding:4% 5% 6%;color:#fff3dc}
    .silks article{
        position:relative}
    .silks h3{
        float:left;
        margin-right:.8em;
        font-family: 'Irish Grover', cursive;
    }
    .silks article p{
        font-size:.9em;
        min-height:6em;
        font-family: 'Itim', cursive;
    }
    .silk-panel{
        position:relative;
        background:#e9decb;
        min-height:min(46vw,662px);
        color:#705a3d;
        padding:5%;
        display:flex;
        justify-content:center}
    .silk-panel img{
        height:min(40vw,576px);
        object-fit:contain;
        max-width:70%}
    .silk-panel span{
        position:absolute;
        left:3%;
        top:20%;
        font-size:.75em;
        max-width:28%;
        font-family: 'Itim', cursive;
    }
    .silk-panel span:nth-of-type(2){
        left:auto;
        right:3%;
        top:53%;
        text-align:right}
    .silk-panel span:nth-of-type(3){top:83%}

    .tianxin{
        min-height:min(60vw,864px);
        background:var(--sand) url('https://res.cloudinary.com/imej4dva/image/upload/v1790178446/page9_beijing.webp') center/100% 100%;
        padding:8% 15%}
    .tianxin-photo{
        width:67%;
        position:relative;
        background:#e8ddc6;
        padding-top:3%}
    .tianxin h2{
        font-size:clamp(25px,4.2vw,60px);
        margin:0 5% 4%;
        color:#875620;
        font-family: 'Irish Grover', cursive;
    }
    .tianxin-photo img{width:100%}
    .pavilion-story{
        padding:7% 7% 4%;
        background-image:url('https://res.cloudinary.com/imej4dva/image/upload/v1790181011/page10_beijing.webp');
        min-height:min(65vw,936px)}
    .story-row{
        display:flex;
        align-items:center;
        gap:3%;
        width:77%;
        margin-bottom:5%}
    .story-row img{
        width:43%}
    .story-row p{
        flex:1;
        color:#664C2F;
        font-family: 'Itim', cursive;
    }
    .story-columns{
        display:grid;
        grid-template-columns:1fr 1.45fr;
        gap:8%;
        color:#664C2F;
        font-family: 'Itim', cursive;
    }
    .story-columns article img{
        width:45%;
        margin-bottom:4%}
    .rebuilt{
        display:flex;
        align-items:flex-start;
        gap:5%;}
    .rebuilt img{
        width:40%!important}
    .rebuilt p{
        flex:1;
        color:#664C2F;
        font-family: 'Itim', cursive;}
    .orange{
        min-height:min(54vw,778px);padding:12% 12% 7%;display:grid;grid-template-columns:1.3fr 1fr;gap:10%;background-image:url('web2/zi beijing.webp')}
    .orange h2{
        margin-top:8%;
        color:#875620;
        font-family: 'Irish Grover', cursive;
    }
    .orange .button{
        margin-top:37%;
        color:#fff;
        font-family: 'Itim', cursive;
    }
    .orange-photo{
        position:relative;align-self:start}
    .orange-photo img{width:100%;position:relative;z-index:1}
    .orange-photo:before{content:'';position:absolute;border:1px solid #9a8c70;width:90%;height:90%;top:12%;left:32%}
    .orange-photo:after{content:'';position:absolute;width:1px;height:155%;background:#9a8c70;top:-20%;left:85%;transform:rotate(22deg)}
    .juzi{background:var(--sand) url('https://res.cloudinary.com/imej4dva/image/upload/v1790189508/page12_beijing.webp') center/100% 100%;padding:6% 6% 3%;display:grid;grid-template-columns:1.05fr 1.35fr .95fr .95fr;gap:3%;align-items:center;color:#fff4df;font-size:.92em}
    .juzi h2,.juzi-portrait figcaption{
        font-size:1.9em;
        color:#fff4df;
        text-align:center;
        text-shadow:none;
        font-family: 'Irish Grover', cursive;
    }
    .juzi-intro{
        text-align:right;
        font-family: 'Itim', cursive;
    }
    .juzi-intro p+p{
        margin-top:.6em;
        font-family: 'Itim', cursive;
    }
    .juzi figure>img{width:100%}
    .juzi figure>figcaption{
        margin-top:.4em;
        font-family: 'Itim', cursive;
        }
    .juzi-portrait{padding-right:16%}
    .footer{background:var(--paper) url('https://res.cloudinary.com/imej4dva/image/upload/v1790178440/page13_beijing.webp') center/100% 100%;position:relative}
    .footer-main{padding:4% 3% 0 4%;display:grid;grid-template-columns:2fr 1fr;gap:2%;min-height:min(48vw,691px)}
    .footer-mark{width:48%;height:min(16vw,230px);margin-bottom:6%}
    .footer nav{
        display:grid;
        grid-template-columns:1fr 1.2fr 1fr;
        gap:5%;
        font-size:.8em;
        color:#664C2F;
        font-family: 'Itim', cursive;
    }
    .footer ul{list-style:none;margin:0;padding:0}
    .footer-art{width:100%;height:min(43vw,619px);object-fit:contain}
    .footer-bottom{
        min-height:2em;
        text-align:right;
        color:#fff1d5;
        font-weight:bold;
        padding:.5em 7% .5em 0;
        font-size:.9em;
        font-family: 'Itim', cursive;
    }
    .visit-note{
        font-size:.8em;
        background:#f5ebd7;
        padding:1em;margin-top:1em}
    .dialog{border:1px solid var(--sand);background:var(--paper);color:var(--ink);max-width:450px;padding:30px}
    .dialog::backdrop{background:#0008}dialog h2{font-size:28px;margin-bottom:20px}dialog p{font-size:16px;margin-bottom:20px}
    .close{float:right;background:none;border:0;font-size:25px}


    /* ===== 账户弹窗：纯 CSS 开关 ===== */
    .account-radio{
    position:absolute;
    width:1px;height:1px;
    margin:-1px;padding:0;border:0;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    overflow:hidden;
    white-space:nowrap;
}
/* 键盘聚焦时给对应的 label 加焦点环 */
#accLogin:focus-visible ~ .topbar label[for="accLogin"],
#accSignup:focus-visible ~ .topbar label[for="accSignup"]{
    outline:3px solid #835624;
    outline-offset:4px;
}

/* 遮罩层 */
.account-dialog{
    display:none;
    position:fixed;
    inset:0;
    z-index:999;
    background:#0008;
    align-items:center;
    justify-content:center;
    padding:20px;
}
#accLogin:checked ~ .account-dialog,
#accSignup:checked ~ .account-dialog{
    display:flex;
}

/* 弹窗本体 */
.account-dialog-inner{
    position:relative;
    background:var(--paper);
    color:var(--ink);
    border:1px solid var(--sand);
    width:100%;
    max-width:450px;
    padding:30px;
    box-shadow:0 10px 30px #00000044;
}
.account-dialog-inner h2{
    font-size:28px;
    margin-bottom:20px;
}
.account-dialog-inner p{
    font-size:16px;
    margin-bottom:20px;
}

/* 两个标题默认都隐藏，按选中的 radio 显示对应那个 */
.dialog-title{display:none}
#accLogin:checked ~ .account-dialog .dialog-title-login{display:block}
#accSignup:checked ~ .account-dialog .dialog-title-signup{display:block}

/* 右上角的 × */
.account-dialog-inner .close{
    position:absolute;
    top:8px;
    right:14px;
    font-size:25px;
    line-height:1;
    cursor:pointer;
    color:inherit;
}
.dialog-close{cursor:pointer}

/* ===== 预约说明：用 :target 显示 ===== */
.visit-note{
    display:none;
    font-size:.8em;
    background:#f5ebd7;
    padding:1em;
    margin-top:1em;
}
.visit-note:target{
    display:block;
}

    @media(min-width:1440px){.topbar nav{gap:72px}.account{gap:28px}}
    @media(max-width:600px){
        body{font-size:14px}
    .topbar{padding:12px 4%;font-size:11px}
    .topbar nav{gap:15px}
    .account{gap:7px}
    .hero-card p{font-size:10px}
    .hero{min-height:310px}
    .foreword{padding:24px 8% 36px}
    .foreword h1{margin-bottom:24px}
    .intro{display:flow-root}
    .ancient{padding:28px 6%}
    .ancient-grid{grid-template-columns:1.5fr 1fr;gap:5%}
    .ancient-grid>div{font-size:12px}.sites{padding:20px 3%}
    .sites h2{font-size:24px}
    .site-cards{grid-template-columns:repeat(2,1fr);gap:14px}
    .site-cards img{height:180px}.site-cards span{font-size:14px}
    .academy{padding:24px 6%}
    .academy-photo{aspect-ratio:auto;padding-top:38%;background-position:center top;background-size:100% auto;background-repeat:no-repeat;background-color:#31443b}
    .academy-caption{position:relative;width:100%;padding:18px;background:none;text-align:left;font-size:13px}
    .history{padding:25px 7%}
    .timeline{display:block;margin-top:30px;min-height:0}
    .timeline:before{top:0;bottom:0;left:9px;right:auto;border-top:0;border-left:2px solid #b6996f}
    .timeline li{width:100%;padding:0 0 24px 35px;text-align:left}
    .timeline li:before{left:0;top:8px;width:20px;height:20px}
    .timeline p,
    .timeline li:nth-child(even) p{position:static}
    .mawangdui{padding-top:25px}
    .ma-title{margin-left:40%;padding-right:5%}
    .cosmos{height:260px}.beast{font-size:10px}
    .beast img{height:40px}
    .silks{gap:6%;padding:25px 5%}
    .silks article>p{min-height:135px;font-size:12px}
    .silk-panel{min-height:250px}
    .silk-panel img{height:230px}
    .silk-panel span{font-size:9px}
    .tianxin{min-height:320px;padding:35px 10%}
    .tianxin-photo{width:80%}
    .pavilion-story{padding:28px 6%;font-size:12px}
    .story-row{width:100%}
    .story-columns{gap:6%}
    .story-columns>article>img{width:65%}
    .rebuilt{display:block}
    .rebuilt img{width:65%!important}
    .orange{padding:40px 10%}
    .orange h2{font-size:25px}
    .orange .button{font-size:12px}
    .juzi{padding:30px 6%;grid-template-columns:1fr 1fr;gap:22px;font-size:13px}
    .juzi-portrait{max-width:170px;padding:0;justify-self:center}
    .footer-main{grid-template-columns:2fr 1fr;padding-top:20px;min-height:260px}
    .footer-mark{height:80px}
    .footer nav{font-size:10px;gap:8px}
    .footer-art{height:210px}
    .footer-bottom{font-size:12px}}
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

    /* ---- 移动端适配 ---- */
@media(max-width:600px){
    .hero-card{perspective:900px}
    .book{transition-duration:.7s}
    .sheet{transition-duration:.7s}
    .cover .front p{font-size:10px}
    .book-toggle:checked ~ .hero-card .t1{transition-delay:.1s}
    .book-toggle:checked ~ .hero-card .t2{transition-delay:.2s}
    .book-toggle:checked ~ .hero-card .t3{transition-delay:.3s}
    .book-toggle:checked ~ .hero-card .t4{transition-delay:.4s}
    .book-toggle:not(:checked) ~ .hero-card .cover{transition-delay:.3s}
    .book-toggle:not(:checked) ~ .hero-card .t1{transition-delay:.22s}
    .book-toggle:not(:checked) ~ .hero-card .t2{transition-delay:.15s}
    .book-toggle:not(:checked) ~ .hero-card .t3{transition-delay:.08s}
    .book-toggle:not(:checked) ~ .hero-card .t4{transition-delay:0s}
}

/* 无障碍：减少动效 */
@media(prefers-reduced-motion:reduce){
    .sheet,.book,.book::after{transition-duration:.01s!important}
}