/*==================================================
  万星楼 暮年版 - 前台样式（夕阳金色风格）
  温暖治愈 · 宽松留白 · 圆角柔和 · 长辈友好
  ==================================================*/

/* ---- 重置 ---- */
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:18px;-webkit-text-size-adjust:100%}
body{
    font-family:"STSong","SimSun","宋体","Microsoft YaHei",serif;
    background:linear-gradient(180deg,#F5F5F5 0%,#EFEFEF 100%);
    background-attachment:fixed;
    color:#3D2817;
    line-height:1.9;
    font-size:18px;
    min-height:100vh;
}
a{color:#B85D00;text-decoration:none;transition:color .25s ease}
a:hover{color:#FA710F;text-decoration:underline}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
input,textarea,select,button{font-family:inherit;font-size:inherit;outline:none}

/* ---- 通用 ---- */
.wrapper{max-width:1100px;margin:0 auto;padding:0 22px}
.text-center{text-align:center}

/* ---- 顶部横幅（三图轮换背景 + 文字浮层） ---- */
.site-header{
    position:relative;
    overflow:hidden;
    border-bottom:1px solid #F0D9A0;
    padding:86px 0 82px;
    background:#FFE9B0;
}
/* 背景轮换层 */
.banner-bg,.banner-mask{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    z-index:0;
}
.banner-bg .banner-slide{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background-size:cover;
    background-position:center center;
    opacity:0;
}
.banner-bg .banner-slide:nth-child(1){animation:bannerFade1 18s infinite ease-in-out}
.banner-bg .banner-slide:nth-child(2){animation:bannerFade2 18s infinite ease-in-out}
.banner-bg .banner-slide:nth-child(3){animation:bannerFade3 18s infinite ease-in-out}
@keyframes bannerFade1{
    0%{opacity:1}30%{opacity:1}33%{opacity:0}97%{opacity:0}100%{opacity:1}
}
@keyframes bannerFade2{
    0%{opacity:0}30%{opacity:0}33%{opacity:1}63%{opacity:1}66%{opacity:0}100%{opacity:0}
}
@keyframes bannerFade3{
    0%{opacity:0}63%{opacity:0}66%{opacity:1}96%{opacity:1}100%{opacity:0}
}
/* 半透明遮罩，增强文字对比度 */
.banner-mask{
    background:linear-gradient(180deg,rgba(45,22,0,.32) 0%,rgba(45,22,0,.45) 100%);
    z-index:1;
}
.header-inner{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}
/* 站名：浅金 + 文字阴影，在图片上突出 */
.site-header .brand h1{
    font-family:"STKaiti","KaiTi","楷体",serif;
    font-size:2.6rem;
    color:#FFF4D6;
    letter-spacing:8px;
    font-weight:normal;
    line-height:1.2;
    text-shadow:0 2px 12px rgba(0,0,0,.6),0 0 1px rgba(0,0,0,.4);
}
.site-header .brand h1 a{color:#FFF4D6;text-decoration:none}
.site-header .brand h1 a:hover{color:#FFE9B0;text-decoration:none}
.site-header .subtitle{
    color:#FFE9B0;
    font-size:1.25rem;
    letter-spacing:4px;
    margin-top:6px;
    font-family:"STKaiti","KaiTi","楷体",serif;
    text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.header-search form{display:flex}
.header-search input[type="text"]{
    width:220px;
    padding:12px 16px;
    background:rgba(255,253,248,.92);
    border:1px solid rgba(240,217,160,.6);
    border-radius:24px 0 0 24px;
    font-size:.95rem;
    color:#3D2817;
}
.header-search input[type="text"]:focus{border-color:#FF9C1E;background:rgba(255,253,248,1)}
.header-search button{
    background:#FF9C1E;
    color:#fff;
    padding:12px 24px;
    cursor:pointer;
    font-size:.92rem;
    letter-spacing:2px;
    border-radius:0 24px 24px 0;
    min-height:48px;
    text-shadow:0 1px 2px rgba(0,0,0,.2);
}
.header-search button:hover{background:#FA710F}

/* ---- 导航栏（扁平4项，无下拉） ---- */
.nav-bar{
    background:#FFFCF5;
    border-bottom:1px solid #F0D9A0;
}
.nav-bar .wrapper{padding-top:14px;padding-bottom:14px}
.nav-toggle{display:none}
.nav-list{
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
}
.nav-list > li{position:relative}
.nav-list > li > a{
    display:block;
    padding:12px 32px;
    color:#7A3E00;
    font-family:"SimHei","黑体","Microsoft YaHei",sans-serif;
    font-weight:bold;
    font-size:1rem;
    letter-spacing:3px;
    border-radius:28px;
    transition:background .25s ease,color .25s ease;
    min-height:48px;
    line-height:24px;
}
.nav-list > li > a:hover{
    background:#FFE9B0;
    color:#FA710F;
    text-decoration:none;
}
.nav-list > li > a.active{
    background:#FF9C1E;
    color:#fff;
}
.nav-list .caret{font-size:.72rem;opacity:.65;margin-left:2px}

/* 二级下拉菜单（PC悬停展开） */
.sub-nav{
    display:none;
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    min-width:170px;
    background:#FFFCF5;
    border:1px solid #F0D9A0;
    border-radius:12px;
    z-index:100;
    box-shadow:0 6px 18px rgba(120,80,20,.15);
    padding:6px 0;
    margin-top:4px;
}
.nav-list .has-sub:hover .sub-nav,
.nav-list .has-sub:focus-within .sub-nav{display:block}
.sub-nav li a{
    display:block;
    padding:10px 22px;
    color:#7A3E00;
    font-family:"SimHei","黑体","Microsoft YaHei",sans-serif;
    font-weight:bold;
    font-size:.92rem;
    letter-spacing:1px;
    white-space:nowrap;
    transition:background .2s,color .2s;
}
.sub-nav li a:hover{
    background:#FFE9B0;
    color:#FA710F;
    text-decoration:none;
}
.sub-nav li a.active{background:#FF9C1E;color:#fff}

/* ---- 主体布局 ---- */
.main-body{
    max-width:1100px;
    margin:32px auto;
    padding:0 22px;
    display:flex;
    gap:32px;
    align-items:flex-start;
}
.content-area{flex:1;min-width:0}
.sidebar-area{width:300px;flex-shrink:0}

/* ---- 频道块（首页一级栏目分区） ---- */
.channel-block{
    background:#FFFCF5;
    border:1px solid #F0D9A0;
    border-radius:16px;
    margin-bottom:26px;
    overflow:hidden;
    box-shadow:0 2px 10px rgba(180,120,40,.06);
}
.channel-head{
    background:linear-gradient(180deg,#FFF4D6 0%,#FFEFC8 100%);
    padding:16px 28px;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    border-bottom:1px solid #F0D9A0;
}
.channel-head h2{
    font-size:1.2rem;
    color:#7A3E00;
    font-family:"STKaiti","KaiTi","楷体",serif;
    font-weight:bold;
    letter-spacing:3px;
    margin-right:auto;
}
.channel-head h2 a{color:#7A3E00;text-decoration:none}
.channel-head h2 a:hover{color:#FA710F;text-decoration:none}
.channel-head .channel-desc{
    color:#9C6B2E;
    font-size:.85rem;
    letter-spacing:1px;
}
.channel-head .more{
    font-size:.88rem;
    color:#B85D00;
    text-decoration:none;
}
.channel-head .more:hover{color:#FA710F}
.sub-col-tabs{
    background:#FFFEF5;
    padding:12px 28px;
    border-bottom:1px solid #F5E6C0;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.sub-col-tabs .sub-tab{
    display:inline-block;
    padding:6px 18px;
    font-size:.9rem;
    color:#7A3E00;
    background:#FFF4D6;
    border:1px solid #F0D9A0;
    border-radius:20px;
    text-decoration:none;
}
.sub-col-tabs .sub-tab:hover{
    background:#FF9C1E;
    color:#fff;
    border-color:#FF9C1E;
    text-decoration:none;
}
.channel-body{padding:10px 28px 16px}
.channel-empty{
    text-align:center;
    padding:28px 0;
    color:#C9A86A;
    font-size:.95rem;
}
.art-list-z li{
    padding:12px 0;
    border-bottom:1px solid #F5E6C0;
    display:flex;
    align-items:center;
    gap:10px;
    line-height:1.7;
}
.art-list-z li:last-child{border-bottom:none}
.art-list-z li .top-tag{
    color:#FA710F;
    font-size:.8rem;
    font-weight:bold;
    flex-shrink:0;
}
.art-list-z li .col-tag{
    color:#fff;
    background:#E8A050;
    font-size:.78rem;
    padding:2px 10px;
    border-radius:12px;
    flex-shrink:0;
    letter-spacing:1px;
}
.art-list-z li a{
    color:#3D2817;
    font-size:.95rem;
    flex:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    padding-right:10px;
}
.art-list-z li a:hover{color:#FA710F}
.art-list-z li .date{
    color:#B89360;
    font-size:.8rem;
    flex-shrink:0;
}

/* ---- 文章列表页 ---- */
.page-title{
    background:#FFFCF5;
    border:1px solid #F0D9A0;
    border-left:5px solid #FF9C1E;
    border-radius:12px;
    padding:18px 28px;
    margin-bottom:26px;
    box-shadow:0 2px 10px rgba(180,120,40,.06);
}
.page-title h2{
    font-size:1.3rem;
    color:#7A3E00;
    font-family:"STKaiti","KaiTi","楷体",serif;
    letter-spacing:2px;
}
.page-title .crumb{font-size:.85rem;color:#B89360;margin-top:8px}
.page-title .crumb a{color:#B85D00}
.page-title .crumb a:hover{color:#FA710F}

.art-list{
    background:#FFFCF5;
    border:1px solid #F0D9A0;
    border-radius:16px;
    margin-bottom:26px;
    overflow:hidden;
    box-shadow:0 2px 10px rgba(180,120,40,.06);
}
.art-list .art-item{
    padding:22px 28px;
    border-bottom:1px solid #F5E6C0;
}
.art-list .art-item:last-child{border-bottom:none}
.art-list .art-item .title{
    font-size:1.1rem;
    margin-bottom:8px;
    line-height:1.5;
}
.art-list .art-item .title a{color:#3D2817;font-weight:bold}
.art-list .art-item .title a:hover{color:#FA710F}
.art-list .art-item .meta{
    font-size:.82rem;
    color:#B89360;
    margin-bottom:8px;
}
.art-list .art-item .meta span{margin-right:18px}
.art-list .art-item .summary{
    font-size:.92rem;
    color:#6B4A2A;
    line-height:1.8;
}

/* ---- 文章详情 ---- */
.art-view{
    background:#FFFCF5;
    border:1px solid #F0D9A0;
    border-radius:16px;
    padding:38px 46px;
    box-shadow:0 2px 10px rgba(180,120,40,.06);
}
.art-view h1.art-title{
    font-size:1.65rem;
    color:#5A3500;
    text-align:center;
    font-family:"STKaiti","KaiTi","楷体",serif;
    font-weight:normal;
    margin-bottom:12px;
    line-height:1.4;
    letter-spacing:2px;
}
.art-view .art-info{
    text-align:center;
    font-size:.85rem;
    color:#B89360;
    padding:14px 0;
    border-top:1px solid #F0D9A0;
    border-bottom:1px solid #F0D9A0;
    margin-bottom:32px;
}
.art-view .art-info span{margin:0 12px}
.art-view .art-content{
    font-size:1.05rem;
    line-height:2.1;
    color:#3D2817;
}
.art-view .art-content p{margin-bottom:20px;text-indent:2em}
.art-view .art-content h2,.art-view .art-content h3{
    margin:26px 0 14px;
    color:#7A3E00;
    font-family:"STKaiti","KaiTi","楷体",serif;
    border-left:4px solid #FF9C1E;
    padding-left:14px;
}
.art-view .art-content img{margin:20px auto;border-radius:8px}
.art-view .art-content blockquote{
    border-left:4px solid #FF9C1E;
    padding:14px 22px;
    margin:20px 0;
    background:#FFF8E8;
    color:#6B4A2A;
    font-size:.95rem;
    border-radius:0 8px 8px 0;
}
.art-view .art-nav{
    display:flex;
    justify-content:space-between;
    padding:22px 0 0;
    margin-top:28px;
    border-top:1px solid #F0D9A0;
    font-size:.92rem;
}
.art-view .art-nav a{color:#B85D00}
.art-view .art-nav a:hover{color:#FA710F}

/* ---- 侧边栏 ---- */
.widget{
    background:#FFFCF5;
    border:1px solid #F0D9A0;
    border-radius:16px;
    margin-bottom:26px;
    overflow:hidden;
    box-shadow:0 2px 10px rgba(180,120,40,.06);
}
.widget .widget-head{
    background:linear-gradient(180deg,#FFF4D6 0%,#FFEFC8 100%);
    border-bottom:1px solid #F0D9A0;
    padding:14px 22px;
}
.widget .widget-head h3{
    font-size:1.05rem;
    color:#7A3E00;
    font-family:"STKaiti","KaiTi","楷体",serif;
    letter-spacing:3px;
}
.widget .widget-body{padding:12px 22px}
.widget .widget-body ul li{
    padding:11px 0;
    border-bottom:1px solid #F5E6C0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.widget .widget-body ul li:last-child{border-bottom:none}
.widget .widget-body ul li a{color:#3D2817;font-size:.92rem}
.widget .widget-body ul li a:hover{color:#FA710F}
.widget .rank-list li{
    display:flex;
    align-items:center;
    gap:12px;
}
.widget .rank-list li .rank{
    display:inline-block;
    width:24px;
    height:24px;
    line-height:24px;
    text-align:center;
    background:#F0D9A0;
    color:#fff;
    font-size:.78rem;
    border-radius:50%;
    flex-shrink:0;
    font-weight:bold;
}
.widget .rank-list li:nth-child(1) .rank{background:#FF9C1E}
.widget .rank-list li:nth-child(2) .rank{background:#FA710F}
.widget .rank-list li:nth-child(3) .rank{background:#E8A050}
.widget .rank-list li a{flex:1;overflow:hidden;text-overflow:ellipsis}

/* ---- 友情链接（底部） ---- */
.friend-links{
    background:#FFFCF5;
    border-top:1px solid #F0D9A0;
    border-bottom:1px solid #F0D9A0;
    padding:22px 0;
}
.friend-links h3{
    font-size:1rem;
    color:#7A3E00;
    font-family:"STKaiti","KaiTi","楷体",serif;
    margin-bottom:12px;
    letter-spacing:3px;
    text-align:center;
}
.friend-links .links{
    display:flex;
    flex-wrap:wrap;
    gap:10px 26px;
    justify-content:center;
}
.friend-links .links a{
    color:#B85D00;
    font-size:.9rem;
    padding:3px 0;
}
.friend-links .links a:hover{color:#FA710F;text-decoration:none}

/* ---- 分页 ---- */
.pagination{
    text-align:center;
    padding:26px 0;
}
.pagination a,.pagination span{
    display:inline-block;
    padding:10px 18px;
    margin:0 3px;
    border:1px solid #F0D9A0;
    color:#7A3E00;
    font-size:.9rem;
    background:#FFFCF5;
    border-radius:24px;
    min-height:40px;
    line-height:20px;
}
.pagination a:hover{background:#FF9C1E;color:#fff;border-color:#FF9C1E;text-decoration:none}
.pagination .current{background:#FF9C1E;color:#fff;border-color:#FF9C1E}
.pagination .disabled{color:#D9C290;background:#FFFEF5}

/* ---- 底部 ---- */
.site-footer{
    background:linear-gradient(180deg,#FFEFC8 0%,#FFE0A0 100%);
    color:#7A5A2A;
    text-align:center;
    padding:32px 22px;
    font-size:.88rem;
    line-height:2;
}
.site-footer a{color:#B85D00}
.site-footer a:hover{color:#FA710F}
.site-footer .footer-nav{margin-bottom:10px}
.site-footer .footer-nav a{margin:0 12px}
.site-footer .copyright{color:#9C7B40}

/* ---- 搜索框（侧栏内） ---- */
.search-box{margin-bottom:0}
.search-box form{display:flex}
.search-box input[type="text"]{
    flex:1;
    border:1px solid #F0D9A0;
    padding:12px 14px;
    background:#FFFDF8;
    border-radius:24px 0 0 24px;
    color:#3D2817;
}
.search-box input[type="text"]:focus{border-color:#FF9C1E}
.search-box button{
    background:#FF9C1E;
    color:#fff;
    padding:12px 22px;
    cursor:pointer;
    font-size:.9rem;
    border-radius:0 24px 24px 0;
    min-height:48px;
}
.search-box button:hover{background:#FA710F}

/* ---- 空状态 ---- */
.empty{
    text-align:center;
    padding:56px 24px;
    color:#C9A86A;
    font-size:1rem;
}

/*==================================================
  无障碍：减少动画偏好（长辈友好，仅显示首图）
  ==================================================*/
@media (prefers-reduced-motion:reduce){
    .banner-bg .banner-slide{animation:none}
    .banner-bg .banner-slide:nth-child(1){opacity:1}
}

/*==================================================
  响应式 - 手机端
  ==================================================*/
@media screen and (max-width:768px){
    html{font-size:17px}
    .site-header{padding:42px 0 38px}
    .header-inner{flex-direction:column;gap:14px}
    .site-header .brand h1{font-size:1.9rem;letter-spacing:4px;text-align:center}
    .site-header .subtitle{font-size:.78rem;letter-spacing:2px;text-align:center}
    .header-search input[type="text"]{width:170px}

    /* 导航：手机端也横排，字号略小但保持可点 */
    .nav-list{gap:8px}
    .nav-list > li > a{padding:10px 16px;font-size:.92rem;letter-spacing:1px}
    /* 手机端二级菜单：点击展开，不悬停 */
    .sub-nav{
        display:none;
        position:static;
        transform:none;
        left:auto;
        box-shadow:none;
        border:none;
        border-top:1px solid #F0D9A0;
        border-radius:0;
        margin-top:0;
        padding:4px 0;
        background:#FFF8EC;
    }
    .nav-list .has-sub.open .sub-nav{display:block}
    .sub-nav li a{padding:9px 24px;font-size:.88rem}

    .main-body{flex-direction:column;padding:0 16px;margin:22px auto;gap:22px}
    .sidebar-area{width:100%}

    .art-view{padding:26px 20px}
    .art-view h1.art-title{font-size:1.35rem}
    .art-view .art-content{font-size:1rem;line-height:2}

    .channel-head{padding:14px 20px}
    .channel-head h2{font-size:1.1rem}
    .channel-body{padding:10px 20px 14px}
    .art-list-z li .date{display:none}

    .art-list .art-item{padding:18px 20px}
    .page-title{padding:14px 20px}

    .pagination a,.pagination span{padding:8px 13px;font-size:.85rem}
}

@media screen and (max-width:480px){
    html{font-size:16px}
    .site-header .brand h1{font-size:1.6rem}
    .wrapper{padding:0 14px}
    .header-search input[type="text"]{width:130px;font-size:.9rem}
    /* 超窄屏导航自动换行 */
    .nav-list{gap:6px}
    .nav-list > li > a{padding:9px 12px;font-size:.88rem}
}