.container{max-width:860px;margin:0 auto;padding:0 24px;}

/* Page header */
.page-header{padding:52px 0 40px;border-bottom:1px solid #ebebeb;}
.page-eyebrow{font-size:11px;font-weight:600;color:#BA7517;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:14px;}
.page-title{font-size:34px;font-weight:700;color:#111;letter-spacing:-0.02em;margin-bottom:10px;}
.page-sub{font-size:15px;color:#666;line-height:1.8;}

/* Posts grid */
.posts-section{padding:48px 0;}
.posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px;}

/* Post card */
.post-card{display:block;color:inherit;border:1px solid #ebebeb;border-radius:16px;padding:24px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.04),0 4px 12px rgba(0,0,0,0.05);transition:all .2s;}
.post-card:hover{box-shadow:0 4px 24px rgba(0,0,0,0.1);transform:translateY(-2px);}
.post-meta{display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.post-date{font-size:11px;color:#aaa;font-family:monospace;}
.post-tag{font-size:10px;padding:2px 8px;border-radius:99px;font-weight:600;}
.post-tag.qa{background:#e8f0fe;color:#1a56db;}
.post-tag.ai{background:#fce8ff;color:#7c3aed;}
.post-tag.tips{background:#e8f5e9;color:#2e7d32;}
.post-tag.essay{background:#fdf0e8;color:#C0634C;}
.post-title{font-size:15px;font-weight:700;color:#111;line-height:1.5;margin-bottom:10px;letter-spacing:-0.01em;}
.post-excerpt{font-size:13px;color:#666;line-height:1.8;}
.post-card:hover .post-title{color:#BA7517;}

/* Category sections */
.col-category{margin-bottom:56px;}
.col-category-header{margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid #C0634C;}
.col-category-label{font-size:13px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#C0634C;}
.col-category-desc{font-size:13px;color:#999;margin-top:6px;}

/* note section */
.note-section{padding:32px 0 8px;border-top:1px solid #ebebeb;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.note-section-label{font-size:13px;color:#999;}
.note-link{font-size:13px;font-weight:600;padding:8px 20px;border-radius:8px;border:1px solid #ddd;color:#ccc;transition:all .15s;}
.note-link-disabled{pointer-events:none;cursor:default;}

/* WIP state */
.wip-banner{margin-top:40px;padding:32px;background:#fafafa;border:1px dashed #ddd;border-radius:16px;text-align:center;}
.wip-banner p{font-size:14px;color:#999;line-height:1.9;}
.wip-banner strong{color:#BA7517;}

/* Post page */
.post-page{padding:40px 0 80px;}
.post-back{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:#999;margin-bottom:32px;transition:color .15s;}
.post-back:hover{color:#333;}
.post-header{margin-bottom:0;padding-bottom:24px;}
.post-h1{font-size:26px;font-weight:700;line-height:1.5;color:#111;letter-spacing:-0.02em;margin-top:14px;}
.post-body{font-size:14px;line-height:2;color:#333;margin-top:36px;}
.post-body p{margin-bottom:1.8em;}
.post-rule{border:none;border-top:1px solid #ebebeb;margin:2em 0;}
.post-body .lead{font-size:15px;color:#111;font-weight:700;padding-bottom:24px;border-bottom:1px solid #ebebeb;}
.post-cta{margin-top:48px;padding:28px 24px;background:#fafafa;border:1px solid #ebebeb;border-radius:16px;text-align:center;}
.post-cta p{font-size:14px;color:#666;margin-bottom:16px;line-height:1.8;}
.post-cta-btn{display:inline-block;padding:14px 32px;background:#2C2C2A;color:#fff;font-size:14px;font-weight:600;border-radius:8px;transition:background .15s;}
.post-cta-btn:hover{background:#444;}

/* Lead text inside post-header */
.post-lead{font-size:15px;font-weight:700;color:#555;line-height:1.9;margin-top:16px;padding-bottom:24px;border-bottom:1px solid #ebebeb;}

/* Feature cards (full container width, outside post-body) */
.post-features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:28px 0 32px;border-bottom:1px solid #ebebeb;margin-bottom:0;}
.post-feature-card{background:#fafafa;border:1px solid #ebebeb;border-radius:12px;padding:20px;}
.post-feature-title{font-size:13px;font-weight:700;color:#111;margin-bottom:8px;}
.post-feature-desc{font-size:12px;color:#666;line-height:1.8;}

@media(min-width:1000px){
  .post-page .container{max-width:700px;}
  .post-lead{font-size:17px;}
  .post-body{font-size:16px;}
  .post-body .lead{font-size:17px;}
}

@media(max-width:600px){
  .page-title{font-size:26px;}
  .posts-grid{grid-template-columns:1fr;}
  .post-h1{font-size:22px;}
  .post-features{grid-template-columns:1fr;}
}