/* ==========================================================================
   THE AURAMAH JOURNAL  —  /blog  and  /blog-detail/{slug}
   --------------------------------------------------------------------------
   Every rule is scoped to .aj (or prefixed aj-) so nothing here can leak
   into the rest of the site, and the site theme cannot override the
   article typography. The site header and footer are untouched.
   ========================================================================== */

.aj {
    --aj-ink: #16231d;
    --aj-pine: #173c2d;
    --aj-forest: #0b2f22;
    --aj-sage: #dfe7df;
    --aj-cream: #f5f2ea;
    --aj-paper: #fbfaf6;
    --aj-gold: #b9975b;
    --aj-muted: #68716b;
    --aj-line: rgba(22, 35, 29, .14);
    --aj-max: 1240px;
    --aj-serif: "Playfair Display", Georgia, serif;
    --aj-sans: "DM Sans", "Figtree", sans-serif;

    background: var(--aj-paper);
    color: var(--aj-ink);
    font-family: var(--aj-sans);
    /* keep the last element's bottom margin inside the paper background,
       so no white strip appears above the green footer band */
    display: flow-root;
}

.aj *, .aj *::before, .aj *::after { box-sizing: border-box; }
.aj a { color: inherit; text-decoration: none; }
.aj img { display: block; width: 100%; object-fit: cover; }
.aj h1, .aj h2, .aj h3, .aj h4 { color: var(--aj-ink); font-family: var(--aj-serif); font-weight: 500; }
.aj p { color: inherit; font-size: inherit; line-height: inherit; }

.aj-wrap { width: min(calc(100% - 48px), var(--aj-max)); margin-left: auto; margin-right: auto; }
.aj-serif { font-family: var(--aj-serif) !important; font-weight: 500; }
.aj-eyebrow { font-family: var(--aj-sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--aj-gold); font-weight: 600; }
.aj-meta { font-family: var(--aj-sans); font-size: 11px; line-height: 1.8; letter-spacing: .13em; text-transform: uppercase; color: var(--aj-muted); }

/* The breadcrumb strip reuses the pressroom-detail header styles (style.css);
   this only lines it up with the journal's content width. */
.aj .pr-detail-header .container { width: min(calc(100% - 48px), var(--aj-max)); max-width: none; padding: 0; }
/* The theme puts a "/" AFTER each crumb and the pressroom styles put one
   BEFORE each crumb, which prints "Home / / Page". Keep just one. */
.aj .pr-detail-header .zoomvilla-breadcrumb li:not(:last-child)::after { content: none; display: none; }

/* Round "read" arrow link */
.aj-read { display: inline-flex; align-items: center; gap: 10px; font-family: var(--aj-sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.aj-read span { width: 36px; height: 36px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; font-size: 17px; transition: .3s; }
.aj-read:hover span { background: currentColor; }
.aj-read:hover span::after { content: ""; }

/* ==========================================================================
   LISTING  (/blog)
   ========================================================================== */

.aj-hero { padding: 26px 0 42px; }
.aj-hero-head { display: grid; grid-template-columns: 1.25fr .75fr; gap: 70px; align-items: end; margin-bottom: 40px; }
/* Smaller than the template (was clamp(54px, 7vw, 96px)). */
.aj-hero h1 { font-size: clamp(42px, 5.6vw, 76px); line-height: .98; margin: 12px 0; letter-spacing: -.01em; }
.aj-hero-copy { font-size: 16px; line-height: 1.75; color: var(--aj-muted); max-width: 430px; margin: 0; }

.aj-feature { display: grid; grid-template-columns: 1.65fr 1fr; min-height: 520px; background: var(--aj-forest); color: #fff; }
.aj-feature-media { position: relative; overflow: hidden; display: block; }
.aj-feature-media img { height: 100%; position: absolute; inset: 0; transition: transform .8s; }
.aj-feature:hover .aj-feature-media img { transform: scale(1.025); }
.aj-feature-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, rgba(11, 47, 34, .18)); }
.aj-feature-copy { padding: 58px 54px; display: flex; flex-direction: column; justify-content: center; }
.aj-tag { display: inline-flex; align-self: flex-start; border: 1px solid rgba(255, 255, 255, .34); padding: 8px 11px; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }
.aj-feature h2 { font-size: 40px; line-height: 1.1; margin: 24px 0 20px; color: #fff; }
/* Long titles (most real posts) would run to 6–7 lines in this panel. */
.aj-feature h2.is-long { font-size: 30px; line-height: 1.18; }
.aj-feature h2 a { color: #fff; }
.aj-feature p { color: rgba(255, 255, 255, .72); line-height: 1.7; margin: 0 0 30px; font-size: 15px; }
.aj-feature .aj-meta { color: rgba(255, 255, 255, .6); }
.aj-feature .aj-read { margin-top: 28px; color: #fff; }
.aj-feature .aj-read:hover span { color: var(--aj-forest); background: #fff; }

.aj-toolbar { padding: 58px 0 28px; display: flex; justify-content: space-between; gap: 24px; align-items: center; border-bottom: 1px solid var(--aj-line); }
.aj-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.aj-filter { border: 1px solid var(--aj-line); background: transparent; color: var(--aj-ink); padding: 10px 15px; border-radius: 99px; font: 500 11px var(--aj-sans); letter-spacing: .09em; text-transform: uppercase; cursor: pointer; transition: .2s; }
.aj-filter.is-active, .aj-filter:hover { background: var(--aj-pine); border-color: var(--aj-pine); color: #fff; }
.aj-search { border: none; border-bottom: 1px solid var(--aj-line); background: transparent; padding: 12px 0; width: 240px; font: 14px var(--aj-sans); outline: none; color: var(--aj-ink); }
.aj-search:focus { border-color: var(--aj-gold); }

.aj-section-head { display: flex; justify-content: space-between; align-items: end; padding: 58px 0 28px; gap: 20px; }
.aj-section-head h2 { font-size: 42px; margin: 8px 0 0; }
.aj-section-head a, .aj-count { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--aj-muted); }
.aj-section-head a { border-bottom: 1px solid var(--aj-ink); padding-bottom: 6px; color: var(--aj-ink); }

.aj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px 28px; }
.aj-card { display: flex; flex-direction: column; }
.aj-card.aj-hidden { display: none; }
.aj-card-media { aspect-ratio: 1.28; overflow: hidden; background: var(--aj-sage); display: block; }
.aj-card-media img { height: 100%; transition: transform .6s; }
.aj-card:hover .aj-card-media img { transform: scale(1.035); }
.aj-card-body { padding: 20px 2px 0; display: flex; flex-direction: column; flex: 1; }
.aj-card .aj-meta { color: var(--aj-gold); }
.aj-card h3 { font: 500 25px/1.2 var(--aj-serif); margin: 12px 0 14px; }
.aj-card h3 a:hover { color: var(--aj-pine); }
.aj-card p { font-size: 14px; line-height: 1.7; color: var(--aj-muted); margin: 0; }
.aj-card .aj-read { margin-top: auto; padding-top: 18px; }

.aj-empty { text-align: center; color: var(--aj-muted); padding: 40px 0; margin: 0; }
.aj-load { margin: 54px auto 90px; border: 1px solid var(--aj-ink); background: transparent; color: var(--aj-ink); padding: 14px 24px; display: block; font: 600 11px var(--aj-sans); letter-spacing: .15em; text-transform: uppercase; cursor: pointer; transition: .2s; }
.aj-load:hover { background: var(--aj-ink); color: #fff; }
.aj-grid-end { height: 90px; }

.aj-cta { background: var(--aj-forest); color: #fff; padding: 86px 0; }
.aj-cta-inner { display: flex; justify-content: space-between; gap: 40px; align-items: center; }
.aj-cta h2 { font-size: 46px; line-height: 1.06; margin: 8px 0; color: #fff; }
.aj-cta p { color: rgba(255, 255, 255, .66); margin: 0; font-size: 15px; line-height: 1.7; }
.aj-cta-btn { border: 1px solid rgba(255, 255, 255, .65); padding: 16px 22px; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; white-space: nowrap; color: #fff !important; transition: .2s; cursor: pointer; }
.aj-cta-btn:hover { background: #fff; color: var(--aj-forest) !important; }

/* ==========================================================================
   ARTICLE  (/blog-detail/{slug})
   ========================================================================== */

.aj-progress { position: fixed; z-index: 10000; top: 0; left: 0; height: 3px; width: 0; background: var(--aj-gold, #b9975b); transition: width .1s linear; }

.aj-article-hero { padding: 30px 0 46px; }
.aj-hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 70px; align-items: end; }
.aj-article-hero h1 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.06; letter-spacing: -.02em; margin: 18px 0 24px; }
.aj-article-hero h1.is-long { font-size: clamp(32px, 3.8vw, 52px); }
.aj-dek { font-size: 19px; line-height: 1.65; color: var(--aj-muted); max-width: 720px; margin: 0; }
.aj-hero-side { border-left: 1px solid var(--aj-line); padding-left: 34px; }
.aj-share { display: flex; gap: 9px; margin-top: 24px; }
.aj-share a, .aj-share button { width: 38px; height: 38px; border: 1px solid var(--aj-line); border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--aj-sans); background: transparent; color: var(--aj-ink); cursor: pointer; transition: .2s; padding: 0; }
.aj-share a:hover, .aj-share button:hover { background: var(--aj-pine); border-color: var(--aj-pine); color: #fff; }
.aj-share svg { width: 15px; height: 15px; fill: currentColor; }
.aj-copied { font-size: 11px; color: var(--aj-gold); margin-top: 8px; min-height: 16px; letter-spacing: .08em; }

.aj-hero-image { height: min(56vw, 620px); min-height: 380px; position: relative; overflow: hidden; margin: 0; background: var(--aj-sage); }
.aj-hero-image img { height: 100%; }
.aj-hero-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 68%, rgba(5, 28, 20, .28)); pointer-events: none; }

.aj-layout { display: grid; grid-template-columns: 235px minmax(0, 720px) 1fr; gap: 60px; padding: 70px 0 100px; align-items: start; }

.aj-toc { position: sticky; top: 130px; border-top: 1px solid var(--aj-ink); padding-top: 20px; }
.aj-toc-title { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 17px; }
.aj-toc a { display: block; color: var(--aj-muted); font-size: 13px; line-height: 1.45; padding: 8px 0 8px 14px; border-left: 1px solid var(--aj-line); transition: .2s; }
.aj-toc a:hover { color: var(--aj-ink); }
.aj-toc a.is-active { color: var(--aj-ink); border-color: var(--aj-gold); }
.aj-toc-mobile { display: none; }

/* --- article body typography (applies to every post, old and new) --- */
.aj-article { font-family: Georgia, "Times New Roman", serif; font-size: 18px; line-height: 1.85; color: #25302a; min-width: 0; }
.aj-article p { margin: 0 0 27px; color: #25302a; font-size: 18px; line-height: 1.85; font-family: Georgia, "Times New Roman", serif; }
.aj-article p.aj-intro { font-size: 21px; line-height: 1.72; color: #29352f; }
.aj-article p.aj-intro::first-letter { float: left; font: 500 76px/.74 var(--aj-serif); padding: 11px 10px 0 0; color: var(--aj-pine); }
.aj-article h2 { font: 500 34px/1.18 var(--aj-serif); margin: 64px 0 22px; scroll-margin-top: 130px; }
.aj-article h3 { font: 500 25px/1.25 var(--aj-serif); margin: 44px 0 16px; scroll-margin-top: 130px; }
.aj-article h4 { font: 600 17px/1.4 var(--aj-sans); margin: 34px 0 12px; letter-spacing: .01em; scroll-margin-top: 130px; }
.aj-article h2:first-child, .aj-article h3:first-child { margin-top: 0; }
.aj-article a { color: var(--aj-pine); border-bottom: 1px solid var(--aj-gold); }
.aj-article a:hover { color: var(--aj-gold); }
.aj-article strong, .aj-article b { color: var(--aj-ink); font-weight: 700; }
.aj-article ul, .aj-article ol { margin: 0 0 27px; padding-left: 1.3em; }
.aj-article li { margin: 0 0 10px; padding-left: .3em; }
.aj-article li::marker { color: var(--aj-gold); }
.aj-article li p { margin: 0; }

/* Pictures sit exactly on the text column — same left and right edge. */
.aj-article figure, .aj-article .aj-figure { margin: 44px 0; width: 100%; }
.aj-article figure img, .aj-article p img { width: 100%; height: auto; aspect-ratio: auto; border-radius: 2px; }
.aj-article figcaption { font: 12px/1.5 var(--aj-sans); color: var(--aj-muted); padding-top: 10px; }

.aj-article blockquote, .aj-article .aj-pullquote { margin: 48px 0; padding: 38px 0; border-top: 1px solid var(--aj-gold); border-bottom: 1px solid var(--aj-gold); border-left: 0; font: italic 500 30px/1.38 var(--aj-serif); color: var(--aj-pine); }
.aj-article blockquote p { font: inherit; color: inherit; margin: 0; }

.aj-article .aj-table { overflow-x: auto; margin: 36px 0; -webkit-overflow-scrolling: touch; }
.aj-article table { width: 100%; border-collapse: collapse; font: 15px/1.55 var(--aj-sans); }
.aj-article th, .aj-article td { border: 0 !important; border-bottom: 1px solid var(--aj-line) !important; padding: 12px 14px !important; text-align: left; vertical-align: top; }
.aj-article thead th, .aj-article tr:first-child td strong { color: var(--aj-ink); }
.aj-article thead th { background: var(--aj-cream); font-weight: 600; }
.aj-article td p { margin: 0; font: inherit; }

.aj-side { position: sticky; top: 130px; }
.aj-side-card { background: var(--aj-cream); padding: 30px; }
.aj-side-card .aj-eyebrow { margin-bottom: 12px; }
.aj-side-card h3 { font: 500 26px/1.2 var(--aj-serif); margin: 0 0 13px; }
.aj-side-card p { font-size: 13px; line-height: 1.7; color: var(--aj-muted); margin: 0; }
.aj-side-card .aj-side-btn { display: block; background: var(--aj-forest); color: #fff; text-align: center; padding: 14px; margin-top: 20px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: .2s; }
.aj-side-card .aj-side-btn:hover { background: var(--aj-pine); }
.aj-side-card .aj-side-link { display: block; text-align: center; margin-top: 12px; font-size: 11px; color: var(--aj-muted); letter-spacing: .08em; }

/* --- FAQ --- */
.aj-faq { padding: 86px 0; background: var(--aj-cream); }
.aj-faq-head { display: grid; grid-template-columns: .7fr 1.3fr; gap: 70px; }
.aj-faq h2 { font-size: 44px; line-height: 1.06; margin: 10px 0; }
.aj-faq-item { border-top: 1px solid var(--aj-line); }
.aj-faq-item:last-child { border-bottom: 1px solid var(--aj-line); }
.aj-faq-q { width: 100%; border: 0; background: transparent; padding: 23px 0; display: flex; justify-content: space-between; gap: 20px; text-align: left; font: 500 18px/1.4 var(--aj-sans); color: var(--aj-ink); cursor: pointer; }
.aj-faq-q span { font-size: 24px; font-weight: 400; transition: transform .25s; flex: none; line-height: 1; }
.aj-faq-a { display: none; color: var(--aj-muted); line-height: 1.75; padding: 0 35px 22px 0; font-size: 16px; }
.aj-faq-a p { margin: 0 0 12px; color: inherit; }
.aj-faq-item.is-open .aj-faq-a { display: block; }
.aj-faq-item.is-open .aj-faq-q span { transform: rotate(45deg); }

/* --- related --- */
.aj-related { padding: 90px 0 100px; }
.aj-related .aj-section-head { padding-top: 0; }
.aj-related .aj-grid .aj-card-media { aspect-ratio: 1.35; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
    .aj-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 48px; }
    .aj-side { display: none; }
}

@media (max-width: 900px) {
    .aj-hero-head, .aj-feature, .aj-hero-grid, .aj-faq-head { grid-template-columns: 1fr; }
    .aj-hero-head { gap: 16px; }
    .aj-feature { min-height: auto; }
    .aj-feature-media { height: 420px; }
    .aj-feature-copy { padding: 40px; }
    .aj-grid { grid-template-columns: repeat(2, 1fr); }
    .aj-toolbar { align-items: flex-start; flex-direction: column; }
    .aj-search { width: 100%; }
    .aj-hero-side { border: 0; padding: 0; }
    .aj-faq-head { gap: 24px; }

    .aj-layout { grid-template-columns: 1fr; padding-top: 44px; gap: 0; }
    .aj-toc { display: none; }
    .aj-toc-mobile { display: block; border: 1px solid var(--aj-line); padding: 0; margin-bottom: 36px; background: #fff; }
    .aj-toc-mobile summary { list-style: none; cursor: pointer; padding: 16px 18px; font: 600 11px var(--aj-sans); letter-spacing: .16em; text-transform: uppercase; display: flex; justify-content: space-between; }
    .aj-toc-mobile summary::-webkit-details-marker { display: none; }
    .aj-toc-mobile summary span { color: var(--aj-muted); font-weight: 500; letter-spacing: .08em; }
    .aj-toc-mobile ol { margin: 0; padding: 0 18px 12px 36px; }
    .aj-toc-mobile li { padding: 6px 0; font-size: 14px; }
    .aj-toc-mobile a { color: var(--aj-ink); }
}

@media (max-width: 620px) {
    .aj-wrap, .aj .pr-detail-header .container { width: min(calc(100% - 28px), var(--aj-max)); }
    .aj-hero h1 { font-size: 40px; }
    .aj-feature-media { height: 280px; }
    .aj-feature-copy { padding: 30px 24px; }
    .aj-feature h2 { font-size: 30px; }
    .aj-grid { grid-template-columns: 1fr; }
    .aj-section-head h2 { font-size: 34px; }
    .aj-cta h2 { font-size: 34px; }
    .aj-cta-inner { align-items: flex-start; flex-direction: column; }

    .aj-article-hero h1, .aj-article-hero h1.is-long { font-size: 29px; line-height: 1.12; overflow-wrap: anywhere; }
    .aj-hero-grid { gap: 22px; }
    .aj-article-hero { padding-bottom: 30px; }
    .aj-section-head { padding-top: 40px; }
    .aj-toolbar { padding-top: 40px; }
    .aj-dek { font-size: 17px; }
    .aj-hero-image { height: 280px; min-height: 0; }
    .aj-article, .aj-article p { font-size: 17px; }
    .aj-article p.aj-intro { font-size: 19px; }
    .aj-article h2 { font-size: 28px; margin-top: 50px; }
    .aj-article blockquote { font-size: 24px; padding: 28px 0; }
    .aj-faq { padding: 60px 0; }
    .aj-faq h2 { font-size: 34px; }
    .aj-related { padding: 60px 0 70px; }
}

@media print {
    .aj-progress, .aj-share, .aj-toc, .aj-side, .aj-related, .aj-cta { display: none !important; }
    .aj-layout { grid-template-columns: 1fr; }
    .aj-faq-a { display: block !important; }
}