/* NAAL — single article template.
   Values taken from the reference Article.html blueprint.
   Wrap = max-width 1240 / padding 0 32px; article body column = 820. */

/* ---------- Hero ---------- */
.naal-article__hero{position:relative;overflow:hidden;text-align:center;padding-top:72px;padding-bottom:clamp(56px,11vw,190px)}
.naal-article__hero > .elementor-element{position:relative;z-index:1}
.naal-article__hero .naal-heromark{position:absolute;inset:0;height:100%;width:100%;z-index:0;overflow:visible}
/* The reference Article uses className="herofound" WITHOUT the .raise modifier,
   so the -72px lift does not apply here - it was invented. */

.naal-article__back{display:inline-flex;align-items:center;gap:8px;font-family:var(--naal-mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#0E3B36;text-decoration:none}
.naal-article__back:hover{color:#9C7734}

.naal-article__meta{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin:28px 0 18px}
.naal-article__cat{font-family:var(--naal-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#9C7734}
/* Reference uses --text-muted (#7A7973). Note: that is a low-contrast value at
   13px - flagged to the user; #5A5954 was previously substituted for AA. */
.naal-article__date{font-size:13px;color:#7A7973}

/* Xpro's post-title widget resets the margin, so state it against its own class. */
.naal-article__hero h1.xpro-post-title{font-family:var(--naal-serif);font-weight:500;font-size:clamp(34px,5vw,60px);line-height:1.06;letter-spacing:-.02em;margin:0 auto 8px;max-width:900px;color:#161616}

/* ---------- Featured image ---------- */
/* The reference wraps the featured image in a Wrap (1240 of content inside a
   1304 box), so its 16/9 box is 697.5 tall. This band had no Wrap width at all,
   so the image spanned the full viewport and pushed the whole article down. */
.naal-article__media{max-width:1304px;margin-left:auto;margin-right:auto;box-sizing:border-box;padding:16px 32px 8px}
/* .elementor-widget-container does not exist in this Elementor version and there
   is no <figure>, so the 16/9 ratio box never applied and the image rendered at
   its natural 4:3 (930px instead of 697.5). Put the ratio on the image itself. */
.naal-article__media img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:24px;background:#0E3B36;margin:0}

/* ---------- Body ---------- */
.naal-article__body{padding-top:48px;padding-bottom:96px}
.naal-article__body > .e-con-inner,
.naal-article__body > .elementor-element{max-width:820px;margin-inline:auto}
.naal-article__body p{font-size:19px;line-height:1.7;color:#5A5954;margin:0 0 26px}
/* The post content sits at .naal-article__body > .e-con-inner > .elementor-element
   > .xpro-elementor-content > p, so the old '> .elementor-element' child selector
   never matched and the 22px lede rendered at body size. */
.naal-article__body .xpro-elementor-content > p:first-child{font-size:22px;line-height:1.6;color:#161616}
.naal-article__body h2,
.naal-article__body h3{font-family:var(--naal-serif);font-weight:500;font-size:clamp(24px,2.6vw,32px);line-height:1.18;letter-spacing:-.01em;color:#161616;margin:48px 0 18px}
/* The pull quote is authored as <p class="naal-pullquote">, not a <blockquote>,
   so it was rendering as an ordinary 19px paragraph with no gold rule. */
.naal-article__body blockquote,
.naal-article__body .naal-pullquote{border-left:2px solid #B99146;padding:6px 0 6px 28px;margin:40px 0}
.naal-article__body blockquote p,
.naal-article__body p.naal-pullquote{font-family:var(--naal-serif);font-weight:500;font-size:clamp(22px,2.8vw,30px);line-height:1.3;letter-spacing:-.01em;color:#161616}
.naal-article__body blockquote p{margin:0}
.naal-article__body img{max-width:100%;height:auto;border-radius:16px}
.naal-article__body a{color:#0E3B36}
.naal-article__body a:hover{color:#9C7734}
.naal-article__body ul,.naal-article__body ol{font-size:19px;line-height:1.7;color:#5A5954;margin:0 0 26px;padding-left:22px}

/* ---------- Closing CTA ---------- */
.naal-article__cta{padding-bottom:120px}
.naal-article__ctabox{background:#161616;border-radius:32px;padding:64px 56px;color:#fff;text-align:center}
.naal-article__ctabox h2{font-family:var(--naal-serif);font-weight:500;font-size:clamp(28px,3.6vw,46px);line-height:1.08;letter-spacing:-.015em;margin:0 auto 26px;max-width:640px;color:#fff}
.naal-article__cta .naal-article__ctabtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;box-sizing:border-box;padding:15px 28px;background:#B99146;color:#161616;border:1px solid transparent;border-radius:999px;font-family:var(--naal-sans);font-size:16px;font-weight:500;line-height:1;text-decoration:none;transition:background-color 140ms cubic-bezier(0.2,0,0,1),color 140ms cubic-bezier(0.2,0,0,1)}
.naal-article__cta .naal-article__ctabtn:hover{background:#DBC28C;color:#161616}

/* The reference Article has no mobile overrides: the hero keeps padding-top:72,
   the body 48/96, the CTA box 64px 56px / radius 32 and the band 120 at every
   width. All four steps here were invented. */
/* Elementor's kit ships `.elementor-kit-5 a{color:#0E3B36}` at (0,1,1), which
   beat the single-class .naal-article__ctabtn and painted the CTA label forest
   green on gold instead of carbon. Scoped by the band to reach (0,2,0). */