:root {
     --olive-deep: #263019;
     --olive-black: #0D0D07;
     --gold: #D4820A;
     --gold-soft: #e8a23c;
     --cream: #FBF6EC;
     --cream-soft: #FAF5EC;
     --ink: #2b2a24;
     --line: rgba(38, 48, 25, 0.14);
     --shadow: 0 20px 40px -20px rgba(13, 13, 7, 0.25);
 }

 * {
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     margin: 0;
     background: var(--cream);
     color: var(--ink);
     font-family: 'Jost', sans-serif;
     font-weight: 300;
     -webkit-font-smoothing: antialiased;
 }

 h1,
 h2,
 h3,
 h4,
 .serif {
     font-family: 'Cormorant Garamond', serif;
     font-weight: 600;
     color: var(--olive-deep);
     margin: 0;
 }

 a {
     text-decoration: none;
     color: inherit;
 }

 img {
     max-width: 100%;
     display: block;
 }

 .wrap {
     max-width: 1180px;
     margin: 0 auto;
     padding: 0 24px;
 }

 /* ---------- grain divider signature element ---------- */
 .grain-divider {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 14px;
     margin: 0 auto;
     width: 100%;
     max-width: 1180px;
     padding: 0 24px;
 }

 .grain-divider::before,
 .grain-divider::after {
     content: "";
     flex: 1;
     height: 1px;
     background: var(--line);
 }

 .grain-divider svg {
     flex-shrink: 0;
     opacity: 0.85;
 }

 /* ---------- header / journal hero ---------- */
 .journal-hero {
     padding: 200px 0 70px;
     text-align: center;
     background:
         radial-gradient(ellipse at top, rgba(212, 130, 10, 0.08), transparent 60%),
         var(--cream);
     position: relative;
 }

 .eyebrow {
     font-family: 'Jost', sans-serif;
     letter-spacing: 4px;
     text-transform: uppercase;
     font-size: 12.5px;
     color: var(--gold);
     font-weight: 500;
     display: inline-block;
     margin-bottom: 18px;
 }

 .journal-hero h1 {
     font-size: clamp(38px, 5.5vw, 68px);
     line-height: 1.08;
     font-style: italic;
     max-width: 820px;
     margin: 0 auto;
 }

 .journal-hero p.sub {
     max-width: 520px;
     margin: 22px auto 0;
     font-size: 16.5px;
     line-height: 1.8;
     color: #585746;
 }

 /* ---------- category filter pills ---------- */
 .filter-row {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 10px;
     margin: 46px 0 8px;
 }

 .filter-pill {
     font-family: 'Jost', sans-serif;
     font-size: 13px;
     letter-spacing: 1.2px;
     text-transform: uppercase;
     padding: 10px 22px;
     border: 1px solid var(--line);
     border-radius: 100px;
     background: transparent;
     color: var(--olive-deep);
     cursor: pointer;
     transition: all .25s ease;
 }

 .filter-pill:hover {
     border-color: var(--gold);
     color: var(--gold);
 }

 .filter-pill.active {
     background: var(--olive-deep);
     border-color: var(--olive-deep);
     color: var(--cream);
 }

 /* ---------- featured post ---------- */
 .featured {
     margin: 64px auto 10px;
     max-width: 1180px;
     padding: 0 24px;
 }

 .featured-card {
     display: grid;
     grid-template-columns: 1.1fr 1fr;
     background: var(--olive-deep);
     border-radius: 22px;
     overflow: hidden;
     box-shadow: var(--shadow);
 }

 .featured-media {
     position: relative;
     min-height: 380px;
     background-size: cover;
     background-position: center;
 }

 .featured-media::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, rgba(13, 13, 7, 0) 40%, rgba(13, 13, 7, 0.35));
 }

 .featured-body {
     padding: 52px 48px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     color: var(--cream);
 }

 .tag {
     display: inline-block;
     font-size: 11.5px;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: var(--gold-soft);
     font-weight: 500;
     margin-bottom: 14px;
 }

 .featured-body h2 {
     color: var(--cream);
     font-size: clamp(28px, 3vw, 38px);
     line-height: 1.2;
     font-style: italic;
     margin-bottom: 16px;
 }

 .featured-body p {
     font-size: 15.5px;
     line-height: 1.85;
     color: rgba(251, 246, 236, 0.78);
     margin-bottom: 26px;
 }

 .meta-row {
     display: flex;
     align-items: center;
     gap: 16px;
     font-size: 12.5px;
     color: rgba(251, 246, 236, 0.6);
     letter-spacing: 0.4px;
     margin-bottom: 8px;
 }

 .meta-row .dot {
     width: 4px;
     height: 4px;
     border-radius: 50%;
     background: currentColor;
 }

 .read-link {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: 13.5px;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     color: var(--gold-soft);
     font-weight: 500;
     width: fit-content;
     position: relative;
 }

 .read-link::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: -4px;
     height: 1px;
     width: 100%;
     background: var(--gold-soft);
     transform: scaleX(0.3);
     transform-origin: left;
     transition: transform .3s ease;
 }

 .read-link:hover::after {
     transform: scaleX(1);
 }

 .read-link svg {
     transition: transform .3s ease;
 }

 .read-link:hover svg {
     transform: translateX(4px);
 }

 /* ---------- grid ---------- */
 .grid-section {
     padding: 0px 0 100px;
 }

 .grid-heading {
     display: flex;
     align-items: baseline;
     justify-content: space-between;
     margin-bottom: 40px;
 }

 .grid-heading h3 {
     font-size: 26px;
     font-style: italic;
 }

 .grid-heading span {
     font-size: 12.5px;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     color: #8a8a76;
 }

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

 .post-card {
     background: #fff;
     border-radius: 18px;
     overflow: hidden;
     border: 1px solid var(--line);
     transition: transform .35s ease, box-shadow .35s ease;
 }

 .post-card:hover {
     transform: translateY(-6px);
     box-shadow: var(--shadow);
 }

 .post-media {
     aspect-ratio: 16/10;
     display: flex;
     justify-content: center;
     align-items: center;
     background: #fff;
     padding: 15px;
 }

 .post-media img {
     width: 100%;
     height: 100%;
     object-fit: contain;
 }

 .post-card:hover .post-media img {
     transform: scale(1.06);
 }

 .post-content {
     padding: 26px 26px 30px;
 }

 .post-content .tag {
     color: var(--gold);
 }

 .post-content h4 {
     font-size: 22px;
     line-height: 1.28;
     margin: 10px 0 12px;
 }

 .post-content h4 a:hover {
     color: var(--gold);
 }

 .post-content p {
     font-size: 14.5px;
     line-height: 1.75;
     color: #6b6a5c;
     margin-bottom: 20px;
 }

 .post-foot {
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-size: 12px;
     color: #9a9a86;
     border-top: 1px solid var(--line);
     padding-top: 16px;
 }

 /* ---------- newsletter / whatsapp strip ---------- */
 .journal-cta {
     background: var(--olive-black);
     padding: 70px 0;
     text-align: center;
 }

 .journal-cta .eyebrow {
     color: var(--gold-soft);
 }

 .journal-cta h3 {
     color: var(--cream);
     font-size: clamp(26px, 3vw, 36px);
     font-style: italic;
     max-width: 560px;
     margin: 0 auto 14px;
 }

 .journal-cta p {
     color: rgba(251, 246, 236, 0.65);
     font-size: 15px;
     max-width: 480px;
     margin: 0 auto 30px;
 }

 .cta-btn {
     display: inline-block;
     background: var(--gold);
     color: var(--olive-black);
     padding: 15px 36px;
     border-radius: 100px;
     font-size: 13.5px;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     font-weight: 500;
     transition: background .25s ease;
 }

 .cta-btn:hover {
     background: var(--gold-soft);
 }

 /* ---------- pagination ---------- */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 56px;
}

.pagination a {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 500;
    color: var(--olive-deep);
    background: #fff;
    transition: all .35s ease;
}

.pagination a.active,
.pagination a:not(.next-btn):hover {
    background: var(--olive-deep);
    border-color: var(--olive-deep);
    color: var(--cream);
}

/* Modern Next Button */
.pagination .next-btn {
    width: auto;
    min-width: 110px;
    height: 46px;
    padding: 0 22px;
    border-radius: 50px;
    background: var(--olive-deep);
    color: #fff;
    border: none;
    font-weight: 600;
    letter-spacing: .3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 8px 20px rgba(38, 48, 25, .18);
}

.pagination .next-btn span {
    transition: transform .3s ease;
}

.pagination .next-btn:hover {
    background: #354625;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(38, 48, 25, .28);
}

.pagination .next-btn:hover span {
    transform: translateX(5px);
}

 /* ---------- responsive ---------- */
 @media (max-width: 980px) {
     .post-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .featured-card {
         grid-template-columns: 1fr;
     }

     .featured-media {
         min-height: 260px;
     }
 }

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

     .journal-hero {
         padding: 180px 0 50px;
     }

     .featured-body {
         padding: 36px 28px;
     }
 }

 @media (prefers-reduced-motion: reduce) {
     * {
         transition: none !important;
         animation: none !important;
     }
 }