/* ============================================================
   魔都生活美学 · shangh12
   现代极简、Bento Box、克莱因蓝
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",Arial,sans-serif;background:#FAFAFA;color:#111;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;transition:all .2s}
img{max-width:100%;height:auto;display:block;border:0;object-fit:cover}
ul,ol{list-style:none}
.wrap{width:1200px;max-width:94%;margin:0 auto}

/* 顶部导航 */
.header{background:#fff;position:sticky;top:0;z-index:100;border-bottom:1px solid #EBEBEB}
.header-inner{display:flex;justify-content:space-between;align-items:center;height:72px}
.logo{display:flex;align-items:center;gap:12px}
.logo-box{width:32px;height:32px;background:#002FA7;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;border-radius:8px}
.logo-text h1{font-size:18px;font-weight:900;letter-spacing:1px;line-height:1.2}
.logo-text p{font-size:10px;color:#888;letter-spacing:2px}
.nav ul{display:flex;gap:28px}
.nav a{font-size:14px;font-weight:700;color:#555;padding:4px 0}
.nav a:hover,.nav a.on{color:#002FA7}
.btn-post{background:#111;color:#fff;padding:8px 20px;border-radius:30px;font-size:13px;font-weight:700}
.btn-post:hover{background:#002FA7}

/* Bento 网格 */
.bento-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,240px);gap:16px;margin:30px 0}
.bento-item{border-radius:16px;overflow:hidden;position:relative;background:#EBEBEB}
.bento-item.large{grid-column:span 2;grid-row:span 2}
.bento-item.wide{grid-column:span 2}
.img-link{display:block;width:100%;height:100%}
.img-link img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.img-link:hover img{transform:scale(1.05)}
.bento-mask{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.8),transparent 70%);display:flex;flex-direction:column;justify-content:flex-end;padding:30px;color:#fff}
.bento-mask.small{padding:20px}
.bento-mask h2{font-size:26px;font-weight:900;margin:10px 0;line-height:1.3}
.bento-mask h3{font-size:16px;font-weight:800}
.tag{background:#002FA7;color:#fff;font-size:12px;padding:4px 10px;border-radius:20px;align-self:flex-start;font-weight:700}
.text-card{display:flex;height:100%;background:#fff}
.tc-content{flex:1;padding:24px;display:flex;flex-direction:column;justify-content:center}
.tag-outline{border:1px solid #002FA7;color:#002FA7;font-size:12px;padding:2px 8px;border-radius:4px;align-self:flex-start;margin-bottom:10px;font-weight:700}
.tc-content h3{font-size:18px;font-weight:800;margin-bottom:8px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tc-content p{font-size:13px;color:#777;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.text-card img{width:40%;height:100%;object-fit:cover}

/* 胶囊导航 */
.capsule-nav{display:flex;gap:12px;overflow-x:auto;padding:10px 0 20px;margin-bottom:10px}
.capsule-nav::-webkit-scrollbar{display:none}
.capsule-nav a{white-space:nowrap;padding:8px 20px;background:#fff;border:1px solid #EBEBEB;border-radius:30px;font-size:14px;font-weight:700;color:#555}
.capsule-nav a:hover,.capsule-nav a.active{background:#002FA7;color:#fff;border-color:#002FA7}

/* 左右布局 */
.split-layout{display:grid;grid-template-columns:1fr 320px;gap:40px;margin-bottom:60px}
.timeline{position:relative;padding-left:20px}
.timeline::before{content:"";position:absolute;left:0;top:10px;bottom:0;width:2px;background:#EBEBEB}
.timeline-item{display:flex;gap:24px;margin-bottom:30px;position:relative}
.timeline-item::before{content:"";position:absolute;left:-24px;top:8px;width:10px;height:10px;border-radius:50%;background:#002FA7;border:2px solid #fff}
.time-date{display:flex;flex-direction:column;align-items:center;width:50px;flex-shrink:0;padding-top:4px}
.time-date .day{font-size:20px;font-weight:900;color:#111}
.time-date .month{font-size:12px;color:#888}
.timeline-content{display:flex;gap:20px;background:#fff;padding:16px;border-radius:12px;flex:1;border:1px solid #EBEBEB;transition:border-color .2s}
.timeline-content:hover{border-color:#002FA7}
.t-img{width:180px;height:110px;border-radius:8px;overflow:hidden;flex-shrink:0}
.t-img img{width:100%;height:100%;transition:transform .4s}
.timeline-content:hover .t-img img{transform:scale(1.05)}
.t-text{flex:1;display:flex;flex-direction:column;justify-content:center}
.t-cat{font-size:12px;color:#002FA7;font-weight:700;margin-bottom:6px}
.t-text h3{font-size:17px;font-weight:800;margin-bottom:8px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.t-text p{font-size:13px;color:#666;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 侧边栏 */
.side-content{display:flex;flex-direction:column;gap:24px}
.side-widget{background:#fff;padding:24px;border-radius:16px;border:1px solid #EBEBEB}
.widget-title{font-size:16px;font-weight:900;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid #EBEBEB}
.hot-list li{margin-bottom:12px}
.hot-list a{display:flex;gap:12px;align-items:baseline}
.h-num{font-size:16px;font-weight:900;color:#002FA7;font-style:italic;width:16px;flex-shrink:0}
.h-title{font-size:14px;font-weight:700;color:#333;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.hot-list a:hover .h-title{color:#002FA7}
.widget-text{font-size:13px;color:#666;line-height:1.7}

/* 列表页 */
.page-header{margin:40px 0;text-align:center}
.page-header h1{font-size:32px;font-weight:900;margin-bottom:10px}
.page-header p{color:#888}
.grid-list{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:40px}
.grid-card{background:#fff;border-radius:12px;overflow:hidden;border:1px solid #EBEBEB;transition:all .3s}
.grid-card:hover{border-color:#002FA7;transform:translateY(-4px)}
.gc-img{height:180px;overflow:hidden}
.gc-img img{width:100%;height:100%;transition:transform .4s}
.grid-card:hover .gc-img img{transform:scale(1.05)}
.gc-info{padding:16px}
.gc-info h3{font-size:16px;font-weight:800;margin-bottom:8px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gc-info p{font-size:13px;color:#777;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gc-meta{font-size:12px;color:#aaa}
.page-nav{text-align:center;margin-bottom:60px}
.page-nav a,.page-nav span{display:inline-block;padding:8px 16px;margin:0 4px;background:#fff;border:1px solid #EBEBEB;border-radius:8px;font-size:14px;font-weight:700;color:#555}
.page-nav a:hover,.page-nav span{background:#002FA7;color:#fff;border-color:#002FA7}

/* 文章页 */
.article-layout{max-width:860px;margin:40px auto}
.single-article{background:#fff;padding:40px;border-radius:16px;border:1px solid #EBEBEB}
.article-header{text-align:center;margin-bottom:40px;padding-bottom:30px;border-bottom:1px solid #EBEBEB}
.a-cat{display:inline-block;background:#F0F4FF;color:#002FA7;padding:4px 12px;border-radius:20px;font-size:13px;font-weight:700;margin-bottom:16px}
.article-header h1{font-size:32px;font-weight:900;line-height:1.4;margin-bottom:20px}
.a-meta{font-size:13px;color:#888;display:flex;justify-content:center;gap:20px}
.article-body{font-size:16px;line-height:1.9;color:#333}
.article-body p{margin-bottom:24px}
.article-body img{border-radius:12px;margin:30px 0;max-width:100%;height:auto}
.related-articles{margin-top:50px;padding-top:30px;border-top:1px solid #EBEBEB}
.related-articles h2{font-size:20px;font-weight:900;margin-bottom:20px}

/* 表单页 */
.form-bg{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#FAFAFA}
.form-box{background:#fff;width:100%;max-width:400px;padding:40px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,0.05);border:1px solid #EBEBEB}
.form-box h2{font-size:24px;font-weight:900;text-align:center;margin-bottom:8px}
.subtitle{text-align:center;color:#888;font-size:14px;margin-bottom:30px}
.input-group{margin-bottom:20px}
.input-group label{display:block;font-size:13px;font-weight:700;margin-bottom:8px;color:#555}
.input-group input,.input-group textarea{width:100%;height:48px;background:#FAFAFA;border:1px solid #EBEBEB;border-radius:8px;padding:0 16px;font-size:14px;outline:none;transition:all .2s}
.input-group textarea{height:120px;padding:16px;resize:none}
.input-group input:focus,.input-group textarea:focus{border-color:#002FA7;background:#fff}
.btn-submit{width:100%;height:48px;background:#002FA7;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:700;cursor:pointer;margin-top:10px;transition:background .2s}
.btn-submit:hover{background:#001D6E}
.form-footer{text-align:center;margin-top:20px;font-size:13px;color:#888}
.form-footer a{color:#002FA7;font-weight:700}

/* 页脚 */
.footer{background:#fff;border-top:1px solid #EBEBEB;padding:40px 0 20px}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:20px}
.f-logo{font-weight:900;font-size:18px;letter-spacing:2px}
.f-links a{margin:0 15px;font-size:14px;color:#666;font-weight:700}
.f-links a:hover{color:#002FA7}
.copyright{font-size:12px;color:#aaa}

/* 响应式 */
@media(max-width:1024px){
  .bento-grid{grid-template-columns:repeat(2,1fr)}
  .bento-item.large{grid-column:span 2}
  .bento-item.wide{grid-column:span 1;flex-direction:column}
  .text-card img{width:100%;height:150px}
  .split-layout{grid-template-columns:1fr}
  .grid-list{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
  .header-inner{flex-wrap:wrap;height:auto;padding:15px 0;gap:15px}
  .nav ul{flex-wrap:wrap;gap:15px}
  .bento-grid{grid-template-columns:1fr}
  .bento-item.large{grid-column:span 1;height:300px}
  .timeline-content{flex-direction:column}
  .t-img{width:100%;height:180px}
  .grid-list{grid-template-columns:repeat(2,1fr)}
  .single-article{padding:20px}
  .article-header h1{font-size:24px}
}
@media(max-width:480px){
  .grid-list{grid-template-columns:1fr}
}