.blog-hero {
    position: relative;
    overflow: hidden;
    padding: 105px 24px 92px;
    background: radial-gradient(circle at 78% 42%, rgba(201, 168, 76, .13), transparent 27%), linear-gradient(115deg, #030604, #08160c 62%, #0d2515)
}

.blog-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(201, 168, 76, .035) 1px, transparent 1px), linear-gradient(rgba(201, 168, 76, .035) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(to right, #000, transparent 88%)
}

.blog-hero:after {
    content: "9";
    position: absolute;
    right: 7%;
    top: -105px;
    font: 900 420px/1 'Cinzel', serif;
    color: rgba(201, 168, 76, .035)
}

.blog-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr .72fr;
    gap: 80px;
    align-items: end
}

.blog-hero h1 {
    font: 700 clamp(42px, 5.5vw, 76px)/1.08 'Cinzel', serif;
    margin: 18px 0 22px
}

.blog-hero h1 em {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    color: var(--gold)
}

.blog-hero-copy>p {
    max-width: 650px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.9
}

.blog-manifesto {
    padding: 30px;
    border: 1px solid var(--border-h);
    background: rgba(11, 29, 17, .74);
    backdrop-filter: blur(12px)
}

.blog-manifesto i {
    color: var(--gold);
    font-size: 24px
}

.blog-manifesto p {
    margin-top: 15px;
    font: italic 23px/1.5 'Cormorant Garamond', serif
}

.blog-manifesto span {
    display: block;
    margin-top: 16px;
    color: var(--gold);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase
}

.topic-bar {
    background: var(--green-deep);
    border-block: 1px solid var(--border)
}

.topic-bar-inner {
    max-width: 1280px;
    margin: auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: auto
}

.topic-bar strong {
    font: 600 10px 'Cinzel', serif;
    color: var(--gold);
    letter-spacing: 1.5px;
    margin-right: 8px;
    white-space: nowrap
}

.topic-chip {
    white-space: nowrap;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    padding: 9px 16px;
    font-size: 11px;
    transition: var(--transition)
}

.topic-chip:hover,
.topic-chip.active {
    background: var(--gold);
    border-color: var(--gold);
    color: #071008
}

.featured-story {
    padding: 105px 24px;
    background: var(--dark)
}

.featured-story-inner {
    max-width: 1280px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    border: 1px solid var(--border);
    background: var(--dark2)
}

.featured-art,
.card-art,
.post-cover {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at center, rgba(201, 168, 76, .18), transparent 23%), linear-gradient(135deg, #061008, #15341e)
}

.featured-art {
    min-height: 520px;
    display: grid;
    place-items: center
}

.featured-art:before,
.card-art:before,
.post-cover:before {
    content: "";
    position: absolute;
    width: 64%;
    aspect-ratio: 1;
    border: 1px solid rgba(201, 168, 76, .18);
    border-radius: 50%;
    box-shadow: 0 0 0 55px rgba(201, 168, 76, .035), 0 0 0 110px rgba(201, 168, 76, .02)
}

.featured-symbol {
    position: relative;
    z-index: 1;
    width: 190px;
    height: 190px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font: 700 92px 'Cinzel', serif;
    color: var(--gold);
    box-shadow: 0 0 70px rgba(201, 168, 76, .15)
}

.featured-symbol:after {
    content: "LIFE PATH";
    position: absolute;
    bottom: 34px;
    font: 500 8px 'Jost', sans-serif;
    letter-spacing: 3px
}

.featured-copy {
    padding: 58px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.article-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gold);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase
}

.article-label:before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--gold)
}

.featured-copy h2 {
    font: 600 clamp(27px, 3vw, 42px)/1.28 'Cinzel', serif;
    margin: 18px 0
}

.featured-copy>p {
    color: var(--muted);
    line-height: 1.85
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    color: #777266;
    font-size: 11px;
    margin-top: 23px
}

.article-meta i {
    color: var(--gold);
    margin-right: 6px
}

.read-link {
    margin-top: 32px;
    color: var(--gold);
    font: 600 10px 'Cinzel', serif;
    letter-spacing: 1px
}

.read-link i {
    margin-left: 8px;
    transition: transform .25s
}

.read-link:hover i {
    transform: translateX(5px)
}

.articles-section {
    padding: 100px 24px;
    background: var(--dark2)
}

.articles-head {
    max-width: 1280px;
    margin: 0 auto 36px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px
}

.articles-head h2 {
    font: 700 clamp(28px, 3.5vw, 45px) 'Cinzel', serif;
    margin-top: 8px
}

.blog-search {
    width: min(100%, 310px);
    position: relative
}

.blog-search input {
    width: 100%;
    padding: 13px 44px 13px 15px;
    border: 1px solid var(--border);
    background: var(--dark);
    color: var(--white);
    outline: 0
}

.blog-search input:focus {
    border-color: var(--gold)
}

.blog-search i {
    position: absolute;
    right: 15px;
    top: 16px;
    color: var(--gold)
}

.articles-grid {
    max-width: 1280px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.article-card {
    background: var(--dark);
    border: 1px solid var(--border);
    transition: var(--transition);
    display: flex;
    flex-direction: column
}

.article-card:hover {
    transform: translateY(-7px);
    border-color: var(--gold);
    box-shadow: 0 20px 55px rgba(0, 0, 0, .3)
}

.card-art {
    height: 235px;
    display: grid;
    place-items: center
}

.card-art i {
    position: relative;
    z-index: 1;
    color: var(--gold);
    font-size: 54px;
    filter: drop-shadow(0 0 24px rgba(201, 168, 76, .25))
}

.card-art.vastu {
    background: radial-gradient(circle, rgba(201, 168, 76, .15), transparent 25%), linear-gradient(135deg, #071315, #10302e)
}

.card-art.name {
    background: radial-gradient(circle, rgba(201, 168, 76, .14), transparent 25%), linear-gradient(135deg, #151006, #30230e)
}

.card-art.love {
    background: radial-gradient(circle, rgba(201, 168, 76, .13), transparent 25%), linear-gradient(135deg, #160912, #321427)
}

.card-art.career {
    background: radial-gradient(circle, rgba(201, 168, 76, .14), transparent 25%), linear-gradient(135deg, #08101b, #142d3e)
}

.card-art.business {
    background: radial-gradient(circle, rgba(201, 168, 76, .14), transparent 25%), linear-gradient(135deg, #10110a, #293011)
}

.card-body {
    padding: 29px;
    display: flex;
    flex: 1;
    flex-direction: column
}

.card-body h3 {
    font: 600 18px/1.5 'Cinzel', serif;
    margin: 13px 0
}

.card-body>p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.75
}

.card-body .article-meta {
    margin-top: auto;
    padding-top: 22px
}

.newsletter-band {
    padding: 75px 24px;
    background: linear-gradient(110deg, #0b1d11, #17351f);
    border-block: 1px solid var(--border)
}

.newsletter-band-inner {
    max-width: 1050px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr .8fr;
    gap: 70px;
    align-items: center
}

.newsletter-band h2 {
    font: 600 clamp(25px, 3vw, 38px)/1.3 'Cinzel', serif
}

.newsletter-band p {
    color: var(--muted);
    margin-top: 12px
}

.blog-subscribe {
    display: flex
}

.blog-subscribe input {
    min-width: 0;
    flex: 1;
    padding: 15px;
    border: 1px solid var(--border-h);
    background: rgba(8, 10, 8, .7);
    color: var(--white);
    outline: 0
}

.blog-subscribe button {
    border: 0;
    background: var(--gold);
    color: #071008;
    padding: 0 25px;
    font-weight: 600
}

.post-header {
    padding: 90px 24px 70px;
    background: linear-gradient(115deg, #030604, #0a1d10);
    text-align: center;
    position: relative;
    overflow: hidden
}

.post-header:after {
    content: "7";
    position: absolute;
    left: 50%;
    top: -100px;
    transform: translateX(-50%);
    font: 900 390px/1 'Cinzel', serif;
    color: rgba(201, 168, 76, .025)
}

.post-header-inner {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: auto
}

.post-breadcrumb {
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 1px;
    margin-bottom: 25px
}

.post-breadcrumb a {
    color: var(--gold)
}

.post-header h1 {
    font: 700 clamp(36px, 5vw, 64px)/1.17 'Cinzel', serif;
    margin: 18px 0 23px
}

.post-header .article-meta {
    justify-content: center
}

.post-deck {
    font: italic clamp(19px, 2.5vw, 27px)/1.5 'Cormorant Garamond', serif;
    color: #c9c1b3;
    max-width: 760px;
    margin: 26px auto 0
}

.post-cover-wrap {
    padding: 0 24px;
    background: linear-gradient(var(--dark) 50%, var(--dark2) 50%)
}

.post-cover {
    max-width: 1180px;
    height: 560px;
    margin: auto;
    display: grid;
    place-items: center;
    border: 1px solid var(--border)
}

.post-cover .featured-symbol {
    width: 220px;
    height: 220px;
    font-size: 105px
}

.post-layout {
    max-width: 1180px;
    margin: auto;
    padding: 90px 24px 110px;
    display: grid;
    grid-template-columns: 120px minmax(0, 760px) 1fr;
    gap: 50px;
    background: var(--dark2)
}

.post-share {
    position: sticky;
    top: 110px;
    align-self: start
}

.post-share span {
    display: block;
    color: var(--muted);
    font-size: 9px;
    letter-spacing: 1.5px;
    margin-bottom: 13px
}

.post-share a {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    display: grid;
    place-items: center;
    color: var(--gold);
    margin-bottom: 9px;
    transition: var(--transition)
}

.post-share a:hover {
    background: var(--gold);
    color: #071008
}

.post-content {
    color: #b5afa3;
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    line-height: 1.85
}

.post-content>p:first-child:first-letter {
    float: left;
    color: var(--gold);
    font: 700 76px/60px 'Cinzel', serif;
    padding: 8px 13px 0 0
}

.post-content h2 {
    color: var(--white);
    font: 600 28px/1.35 'Cinzel', serif;
    margin: 48px 0 18px
}

.post-content h3 {
    color: var(--gold-light);
    font: 600 18px 'Cinzel', serif;
    margin: 32px 0 10px
}

.post-content ul {
    margin: 18px 0 24px 24px
}

.post-content li {
    padding: 4px 0
}

.post-quote {
    margin: 40px 0;
    padding: 30px 34px;
    border-left: 3px solid var(--gold);
    background: var(--green-deep);
    color: var(--white);
    font: italic 25px/1.55 'Cormorant Garamond', serif
}

.number-table {
    width: 100%;
    border-collapse: collapse;
    margin: 28px 0;
    font-family: 'Jost', sans-serif;
    font-size: 13px
}

.number-table th,
.number-table td {
    padding: 14px 16px;
    border: 1px solid var(--border);
    text-align: left
}

.number-table th {
    background: var(--green-deep);
    color: var(--gold);
    font-family: 'Cinzel', serif
}

.number-table td:first-child {
    color: var(--gold);
    font: 700 18px 'Cinzel', serif
}

.post-aside {
    align-self: start
}

.post-aside-card {
    padding: 26px;
    border: 1px solid var(--border);
    background: var(--dark);
    margin-bottom: 22px
}

.post-aside-card h4 {
    font: 600 12px 'Cinzel', serif;
    color: var(--gold);
    letter-spacing: 1px;
    margin-bottom: 17px
}

.post-aside-card p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7
}

.post-aside-card .btn-primary {
    width: 100%;
    justify-content: center;
    margin-top: 18px;
    font-size: 9px
}

.toc a {
    display: block;
    padding: 9px 0;
    border-bottom: 1px solid rgba(201, 168, 76, .08);
    font-size: 12px;
    color: var(--muted)
}

.toc a:hover {
    color: var(--gold)
}

.author-box {
    margin-top: 55px;
    padding: 30px;
    border: 1px solid var(--border);
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 20px;
    align-items: center
}

.author-mark {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    display: grid;
    place-items: center;
    color: var(--gold);
    font: 700 20px 'Cinzel', serif
}

.author-box h4 {
    font: 600 14px 'Cinzel', serif;
    color: var(--white)
}

.author-box p {
    font: 14px/1.6 'Jost', sans-serif;
    color: var(--muted);
    margin-top: 7px
}

.related-section {
    padding: 95px 24px;
    background: var(--dark)
}

.related-section .articles-grid {
    grid-template-columns: repeat(3, 1fr)
}

.hidden-card {
    display: none
}

@media(max-width:1000px) {
    .blog-hero-inner {
        grid-template-columns: 1fr
    }

    .featured-story-inner {
        grid-template-columns: 1fr
    }

    .featured-art {
        min-height: 420px
    }

    .articles-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .post-layout {
        grid-template-columns: 70px minmax(0, 1fr)
    }

    .post-aside {
        display: none
    }

    .post-cover {
        height: 480px
    }

    .newsletter-band-inner {
        grid-template-columns: 1fr;
        gap: 30px
    }
}

@media(max-width:700px) {
    .blog-hero {
        padding-block: 75px
    }

    .blog-hero-copy {
        text-align: center
    }

    .blog-hero-copy .hero-eyebrow {
        justify-content: center
    }

    .blog-manifesto {
        display: none
    }

    .featured-story,
    .articles-section {
        padding-block: 75px
    }

    .featured-art {
        min-height: 330px
    }

    .featured-symbol {
        width: 145px;
        height: 145px;
        font-size: 68px
    }

    .featured-copy {
        padding: 35px 27px
    }

    .articles-head {
        align-items: stretch;
        flex-direction: column
    }

    .blog-search {
        width: 100%
    }

    .articles-grid,
    .related-section .articles-grid {
        grid-template-columns: 1fr
    }

    .post-cover {
        height: 350px
    }

    .post-cover .featured-symbol {
        width: 160px;
        height: 160px;
        font-size: 76px
    }

    .post-layout {
        grid-template-columns: 1fr;
        padding-block: 65px
    }

    .post-share {
        position: static;
        display: flex;
        align-items: center;
        gap: 8px
    }

    .post-share span {
        margin: 0 8px 0 0
    }

    .post-share a {
        margin: 0
    }

    .post-content {
        font-size: 18px
    }

    .number-table {
        font-size: 11px
    }

    .number-table th,
    .number-table td {
        padding: 10px
    }

    .newsletter-band {
        text-align: center
    }

    .blog-subscribe {
        flex-direction: column
    }

    .blog-subscribe button {
        padding: 14px
    }
}

@media(max-width:430px) {

    .blog-hero h1,
    .post-header h1 {
        font-size: 34px
    }

    .card-art {
        height: 205px
    }

    .post-cover {
        height: 290px
    }

    .post-cover .featured-symbol {
        width: 130px;
        height: 130px;
        font-size: 62px
    }

    .post-content h2 {
        font-size: 23px
    }

    .author-box {
        grid-template-columns: 1fr;
        text-align: center
    }

    .author-mark {
        margin: auto
    }

    .related-section {
        padding: 65px 24px
    }
}