*{box-sizing:border-box}body{margin:0;color:#282828;background:#fff;font-family:"Microsoft YaHei",Arial,sans-serif}.nav{position:sticky!important;top:0;z-index:1000}.pd-hero{height:420px;min-height:0;display:flex;align-items:flex-end;background:linear-gradient(90deg,rgba(8,10,13,.86),rgba(8,10,13,.25)),var(--project-cover) center/cover no-repeat;color:#fff}.pd-hero-inner{width:min(1180px,calc(100% - 48px));margin:0 auto;padding:44px 0 46px}.pd-hero a{color:#50c9f8;text-decoration:none}.pd-hero span{display:block;margin-top:30px;color:#50c9f8;letter-spacing:.22em;text-transform:uppercase}.pd-hero h1{font-family:Georgia,"Songti SC",serif;font-size:clamp(36px,4.3vw,58px);font-weight:400;line-height:1.15;margin:10px 0}.pd-hero p{margin:0;font-size:18px;color:rgba(255,255,255,.78)}.pd-content{width:min(1240px,calc(100% - 48px));margin:0 auto;padding:56px 0 100px}.pd-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#eee;border:1px solid #eee;margin-bottom:42px}.pd-meta span{background:#fff;padding:22px;color:#999}.pd-meta strong{display:block;color:#222;margin-top:8px}.pd-rich{width:min(960px,100%);margin:54px auto 0;font-size:17px;line-height:2;color:#666}.pd-rich img{max-width:100%;height:auto}.pd-gallery{position:relative;width:100%;margin:0;overflow:hidden;border-radius:12px;background:#111}.pd-gallery-viewport{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden}.pd-gallery-track{display:flex;width:100%;height:100%;transition:transform .45s ease}.pd-gallery-slide{display:block;flex:0 0 100%;width:100%;height:100%;object-fit:cover}.pd-gallery-arrow{position:absolute;top:50%;z-index:2;width:44px;height:44px;border:0;border-radius:50%;transform:translateY(-50%);background:rgba(0,0,0,.42);color:#fff;font-size:34px;line-height:1;cursor:pointer}.pd-gallery-prev{left:18px}.pd-gallery-next{right:18px}.pd-gallery-dots{position:absolute;bottom:18px;left:50%;z-index:2;display:flex;gap:8px;transform:translateX(-50%)}.pd-gallery-dot{width:9px;height:9px;padding:0;border:1px solid #fff;border-radius:50%;background:transparent;cursor:pointer}.pd-gallery-dot.is-active{background:#fff}@media(max-width:700px){.pd-hero{height:340px}.pd-hero-inner{width:calc(100% - 36px);padding:40px 0}.pd-hero span{margin-top:22px}.pd-content{width:calc(100% - 36px);padding-top:40px}.pd-gallery-viewport{aspect-ratio:4/3}.pd-gallery-arrow{width:36px;height:36px;font-size:28px}.pd-gallery-prev{left:10px}.pd-gallery-next{right:10px}.pd-gallery-dots{bottom:12px}.pd-rich{margin-top:38px}}

/* Replace the decorative cover with a compact text header on mobile. */
@media (max-width: 640px) {
    .pd-hero {
        height: auto;
        min-height: 0;
        background: #15191f;
    }
    .pd-hero-inner {
        padding: 24px 0 28px;
    }
    .pd-hero span {
        margin-top: 18px;
    }
}

/* Keep each metadata label and value together on mobile. */
@media (max-width: 640px) {
    .pd-meta {
        grid-template-columns: minmax(0, 1fr);
        margin-bottom: 24px;
    }
    .pd-meta > span {
        padding: 13px 16px;
        font-size: 14px;
        line-height: 1.7;
        overflow-wrap: anywhere;
    }
    .pd-meta strong {
        display: inline;
        margin-top: 0;
        font-weight: 500;
    }
    .pd-meta strong::before {
        content: '：';
        color: #999;
        font-weight: 400;
    }
}

/* Consistent black metadata text on all screen sizes. */
.pd-meta > span,
.pd-meta strong,
.pd-meta strong::before {
    color: #000;
}

.pd-image-preview {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 60px 12px;
    border: 0;
    background: rgba(0, 0, 0, .96);
    overflow: auto;
}
.pd-image-preview[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}
.pd-image-preview::backdrop { background: #000; }
.pd-image-preview img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
}
.pd-preview-close {
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #333;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
}
@media (max-width: 640px) {
    .pd-gallery-slide { cursor: zoom-in; }
}

/* Draw the close icon geometrically so font metrics cannot shift it. */
.pd-preview-close {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0;
    line-height: 1;
}
.pd-preview-close::before,
.pd-preview-close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transform: translate(-50%, -50%) rotate(45deg);
}
.pd-preview-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}