:root{--cream:#F5F1E7;--white:#FFFFFF;--navy:#1B2138;--navy-2:#12162A;--gold-1:#D9B463;--gold-2:#B5872E;--ink:#1E1C16;--text-secondary:#6B6659;--text-muted:#9A9484;--border:#E4DECD;--pill-bg:#EFE9D9}*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Outfit',sans-serif;background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased}.page{max-width:1400px;margin:0 auto;padding:36px 40px 80px}.filters{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:40px}.pill{padding:10px 20px;border-radius:999px;font-size:13px;border:1px solid var(--border);background:var(--white);color:var(--ink);white-space:nowrap}.pill.active{background:var(--navy);border-color:var(--navy);color:var(--white)}.pill.current{border-color:var(--gold-2);color:var(--gold-2)}.crumb{font-size:13px;color:var(--text-muted);margin-bottom:20px}.crumb a{color:var(--text-secondary);text-decoration:none;font-weight:500}.crumb a:hover{color:var(--gold-2)}.layout{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start}.cat-badge{display:inline-block;background:var(--white);border-radius:999px;padding:7px 16px;font-size:12px;font-weight:500;color:var(--ink);margin-bottom:18px;border:1px solid var(--border)}.article-title{font-size:28px;font-weight:600;line-height:1.22;letter-spacing:-.01em;margin-bottom:18px}.article-dek{font-size:16px;line-height:1.6;color:var(--text-secondary);margin-bottom:26px;max-width:640px}.byline{display:flex;align-items:center;gap:12px;padding-bottom:24px;border-bottom:1px solid var(--border);margin-bottom:28px}.avatar{width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;flex-shrink:0}.byline-info{font-size:13px;color:var(--text-muted)}.byline-name{color:var(--ink);font-weight:600}.byline-dot{margin:0 6px}.hero{height:380px;border-radius:16px;background:url(../../assets/img.png) no-repeat center center;background-size:cover;position:relative;margin-bottom:36px;overflow:hidden}.hero-tag{position:absolute;top:18px;left:18px;background:var(--white);padding:8px 16px;border-radius:999px;font-size:12px;font-weight:500}.hero-count{position:absolute;top:18px;right:18px;background:rgb(0 0 0 / .28);color:#fff;padding:6px 13px;border-radius:999px;font-size:12px;font-weight:500}.article-body{font-size:17px;line-height:1.85;color:#2B2818;max-width:100%}.article-body p{font-size:16px;margin-bottom:22px}.article-body h2{font-size:24px;font-weight:600;margin:38px 0 16px;letter-spacing:-.005em}.article-body h3{font-size:19px;font-weight:500;margin:30px 0 14px}.article-body ul{margin:0 0 22px 0;padding-left:22px}.article-body li{margin-bottom:10px}.pullquote{border-left:3px solid var(--gold-2);padding:6px 0 6px 22px;margin:32px 0;font-size:17px;font-weight:600;line-height:1.5;color:var(--ink)}.inline-figure{margin:32px 0}.inline-figure .box{height:220px;border-radius:12px;background:linear-gradient(135deg,var(--navy),var(--navy-2))}.inline-figure figcaption{font-size:13px;color:var(--text-muted);margin-top:10px}.compare-table{width:100%;border-collapse:collapse;margin:28px 0;font-size:15px}.compare-table th,.compare-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--border)}.compare-table th{color:var(--text-muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;font-weight:500}.tags{display:flex;gap:8px;flex-wrap:wrap;margin:36px 0 32px}.tag{background:var(--pill-bg);color:var(--text-secondary);font-size:12px;font-weight:600;padding:7px 14px;border-radius:999px}.author-card{display:flex;gap:16px;background:var(--white);border:1px solid var(--border);border-radius:14px;padding:22px;max-width:680px;margin-bottom:44px}.author-card .avatar{width:52px;height:52px;font-size:16px}.author-card-name{font-weight:500;font-size:15px;margin-bottom:4px}.author-card-bio{font-size:13.5px;color:var(--text-secondary);line-height:1.6}.section-heading{font-size:20px;font-weight:600;margin-bottom:20px}.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:680px}.rel-card{cursor:pointer}.rel-thumb{height:130px;border-radius:12px;margin-bottom:12px}.rel-thumb.gold{background:linear-gradient(135deg,var(--gold-1),var(--gold-2))}.rel-thumb.navy{background:linear-gradient(135deg,var(--navy),var(--navy-2))}.rel-cat{font-size:11px;font-weight:500;color:var(--gold-2);margin-bottom:6px}.rel-title{font-size:15px;font-weight:500;line-height:1.4;margin-bottom:6px}.rel-meta{font-size:12px;color:var(--text-muted)}.sidebar-card{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:24px;margin-bottom:24px}.sidebar-title{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--gold-2);text-transform:uppercase;margin-bottom:18px}.cat-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--border);font-size:14px}.cat-row:last-child{border-bottom:none;padding-bottom:0}.cat-row.active .cat-name{color:var(--gold-2);font-weight:500}.cat-count{background:var(--pill-bg);color:var(--text-secondary);font-size:12px;font-weight:500;padding:3px 10px;border-radius:999px}.recent-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}.recent-item:last-child{border-bottom:none;padding-bottom:0}.recent-thumb{width:56px;height:56px;border-radius:10px;flex-shrink:0}.recent-thumb.gold{background:linear-gradient(135deg,var(--gold-1),var(--gold-2))}.recent-thumb.navy{background:linear-gradient(135deg,var(--navy),var(--navy-2))}.recent-title{font-size:14px;font-weight:500;line-height:1.35;margin-bottom:6px}.recent-meta{font-size:11.5px;color:var(--text-muted)}@media (max-width:900px){.layout{grid-template-columns:1fr}.related-grid{grid-template-columns:1fr}.article-title{font-size:29px}}
/* 📱 Mobile responsiveness */
@media (max-width: 768px) {
  .page {
    padding: 20px;
  }

  .layout {
    grid-template-columns: 1fr; /* stack article and sidebar */
    gap: 24px;
  }

  .article-title {
    font-size: 22px;
    line-height: 1.3;
  }

  .article-dek {
    font-size: 14px;
    line-height: 1.5;
  }

  .byline {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .inline-figure img {
    width: 100%;
    height: auto;
    border-radius: 6px;
  }

  .compare-table th,
  .compare-table td {
    font-size: 13px;
    padding: 8px;
  }

  .sidebar-card {
    padding: 16px;
  }

  .recent-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .recent-thumb {
    width: 100%;
    height: 140px;
    margin-bottom: 10px;
  }
}

@media (max-width: 480px) {
  .filters {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .pill {
    font-size: 12px;
    padding: 8px 14px;
    text-align: center;
  }

  .article-body {
    font-size: 15px;
    line-height: 1.7;
  }

  .article-body h2 {
    font-size: 20px;
  }

  .article-body h3 {
    font-size: 17px;
  }

  .author-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .author-card .avatar {
    margin-bottom: 12px;
  }
}

.thumb img {
  width: 100%;        /* fills container width */
  height: auto;       /* keeps aspect ratio */
  display: block;     /* removes inline gaps */
  object-fit: cover;  /* crops gracefully if container is smaller */
  border-radius: 6px; /* optional */
  max-width: 100%;    /* prevents overflow */
}

/* 📱 Extra control for very small screens */
@media (max-width: 480px) {
  .thumb img {
    max-height: 220px; /* keeps images from being too tall */
  }
}