.article-hero{
      min-height: 56vh;
      background:
        linear-gradient(rgba(70,45,32,.34), rgba(70,45,32,.22)),
        url("../images/banner.png") center center / cover no-repeat;
    }

    .article-hero .hero-content{
      max-width: 900px;
    }

    .article-hero .hero-badge{
      margin-bottom: 18px;
    }

    .article-hero h1{
      max-width: 900px;
      font-size: clamp(2.2rem, 4vw, 4.2rem);
      margin-bottom: 16px;
    }

    .article-hero .hero-meta{
      color: rgba(255,255,255,.9);
      font-size: .98rem;
      letter-spacing: .04em;
    }

    

    .article-shell{
      padding: 40px 0 110px;
    }

    .article-wrap{
      max-width: 920px;
      margin: 0 auto;
    }

    .article-card{
      background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,250,243,.96));
      border: 1px solid rgba(200,171,114,.18);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow);
      padding: 42px 42px 46px;
    }

    .article-lead{
      font-size: 1.08rem;
      color: var(--text);
      margin-bottom: 26px;
    }

    .article-card h2{
      font-size: clamp(1.6rem, 2.2vw, 2.2rem);
      margin-top: 42px;
      margin-bottom: 18px;
      color: #4e3d33;
    }

    .article-card h3{
      font-size: 1.2rem;
      margin-top: 24px;
      margin-bottom: 12px;
      color: #5a463b;
    }

    .article-card p{
      color: var(--text-light);
      margin-bottom: 16px;
    }

    .article-card strong{
      color: var(--text);
    }

    .article-card ul,
    .article-card ol{
      margin: 0 0 18px;
      padding-left: 1.35em;
      color: var(--text-light);
    }

    .article-card li{
      margin: 8px 0;
    }

    .article-divider{
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(200,171,114,.42), transparent);
      margin: 28px 0;
    }

    .article-highlight{
      background: linear-gradient(180deg, #fff9f1, #fff5ea);
      border: 1px solid #eadcc8;
      border-radius: 18px;
      padding: 20px 22px;
      margin: 20px 0 26px;
      color: var(--text);
      font-weight: 600;
      box-shadow: var(--shadow-sm);
    }

    .article-summary{
      background: linear-gradient(180deg, rgba(255,248,240,.95), rgba(255,244,235,.98));
      border: 1px solid rgba(216,176,106,.22);
      border-radius: 22px;
      padding: 24px 24px;
      margin-top: 30px;
    }

    .article-summary h2{
      margin-top: 0;
    }

    .article-quick-nav{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:14px;
      margin-bottom: 28px;
    }

    .article-quick-nav a{
      display:block;
      padding:14px 16px;
      border-radius:16px;
      background:#fffaf4;
      border:1px solid var(--line);
      color:var(--text);
      font-weight:700;
      text-align:center;
    }

    .article-quick-nav a:hover{
      border-color:var(--gold);
      color:var(--gold-dark);
      transform:translateY(-2px);
    }

    .article-figure{
      margin: 28px 0 30px;
      background: rgba(255,255,255,.78);
      border: 1px solid rgba(200,171,114,.16);
      border-radius: 22px;
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }

    .article-figure img{
      width:100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
    }

    .article-figure figcaption{
      padding: 14px 18px 16px;
      font-size: .92rem;
      color: var(--text-light);
      background: linear-gradient(180deg, rgba(255,250,243,.72), rgba(255,247,240,.94));
    }

    .article-cta-box{
      margin-top: 38px;
      padding: 28px;
      border-radius: 24px;
      background: linear-gradient(135deg, rgba(255,238,225,.95), rgba(248,228,205,.96));
      border: 1px solid rgba(233,194,164,.26);
      box-shadow: var(--shadow-sm);
    }

    .article-cta-box h3{
      margin:0 0 10px;
      font-size:1.5rem;
    }

    .article-cta-box p{
      margin-bottom:18px;
    }

    .article-cta-actions{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
    }

    .related-posts{
      margin-top: 42px;
    }

    .related-posts h2{
      margin-bottom: 22px;
      font-size: clamp(1.6rem, 2.2vw, 2.2rem);
    }

    .related-grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:24px;
    }

    .related-card{
      background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,247,242,.96));
      border-radius: var(--radius-lg);
      overflow:hidden;
      box-shadow: var(--shadow-md);
      border:1px solid rgba(233,194,164,.22);
    }

    .related-card a.thumb{
      display:block;
      overflow:hidden;
    }
    
    .related-card a.thumb img{
      aspect-ratio: 3 / 2;
      width:100%;
      height:100%;
      object-fit:cover;
      transition: transform .8s ease;
    }

    .related-card:hover a.thumb img{
      transform: scale(1.06);
    }

    .related-body{
      padding: 20px 20px 22px;
    }

    .related-body h3{
      font-size: 1.12rem;
      margin:0 0 10px;
      line-height:1.45;
    }

    .related-body h3 a:hover{
      color: var(--gold-dark);
    }

    .related-body p{
      color: var(--text-light);
      margin:0;
      font-size:.95rem;
    }

    @media (max-width: 980px){
      .related-grid{
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 768px){
      .article-shell{
        padding: 26px 0 84px;
      }

      .article-card{
        padding: 28px 22px 32px;
      }

      .article-quick-nav{
        grid-template-columns: 1fr;
      }

      .article-cta-actions{
        flex-direction:column;
      }

      .article-cta-actions .btn{
        width:100%;
      }
    }