/* =====================================================
 Editorial layer - overrides for the
 research/blog conversion. Sits on top of styles.css
 and pages.css to give an editorial/magazine feel.
 ===================================================== */

:root {
 --edit-max: 1180px;
 --edit-text: 1.0625rem;
 --edit-line: 1.75;
}

body.editorial-home,
body.editorial-article,
body.editorial-page {
 background: var(--color-bg-primary);
 color: var(--color-text-primary);
 font-family: var(--font-body);
}

/* Header --------------------------------------------- */
.site-header {
 position: sticky;
 top: 0;
 z-index: 50;
 background: rgba(10, 10, 10, 0.92);
 backdrop-filter: saturate(150%) blur(10px);
 -webkit-backdrop-filter: saturate(150%) blur(10px);
 border-bottom: 1px solid var(--color-border-light);
}
.header-inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 18px 0;
 gap: 32px;
}
.masthead {
 display: flex;
 flex-direction: column;
 text-decoration: none;
 line-height: 1.05;
}
.masthead-title {
 font-family: var(--font-heading);
 font-size: 1.45rem;
 color: var(--color-gold);
 letter-spacing: 0.02em;
}
.masthead-sub {
 font-size: 0.72rem;
 text-transform: uppercase;
 letter-spacing: 0.18em;
 color: var(--color-text-muted);
 margin-top: 2px;
}
.primary-nav ul {
 display: flex;
 gap: 22px;
 list-style: none;
 margin: 0;
 padding: 0;
 flex-wrap: wrap;
}
.primary-nav a {
 color: var(--color-text-secondary);
 text-decoration: none;
 font-size: 0.94rem;
 letter-spacing: 0.01em;
 transition: color 0.2s ease;
}
.primary-nav a:hover {
 color: var(--color-gold);
}
@media (max-width: 768px) {
 .header-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
 .primary-nav ul { gap: 14px; }
 .primary-nav a { font-size: 0.86rem; }
}

/* Editorial Hero ------------------------------------- */
.editorial-hero {
 padding: 92px 0 60px;
 border-bottom: 1px solid var(--color-border-light);
 background:
 radial-gradient(ellipse at 50% 0%, rgba(218, 188, 116, 0.07), transparent 65%),
 var(--color-bg-primary);
}
.editorial-hero .container {
 max-width: var(--edit-max);
}
.editorial-hero .kicker {
 text-transform: uppercase;
 letter-spacing: 0.22em;
 font-size: 0.78rem;
 color: var(--color-gold);
 margin-bottom: 18px;
}
.editorial-hero h1 {
 font-family: var(--font-heading);
 font-size: clamp(2.4rem, 5vw, 4rem);
 line-height: 1.08;
 margin: 0 0 22px;
 color: var(--color-text-primary);
 letter-spacing: -0.01em;
}
.editorial-hero .lede {
 font-size: clamp(1.05rem, 1.4vw, 1.22rem);
 line-height: 1.7;
 color: var(--color-text-secondary);
 max-width: 760px;
 margin: 0 0 24px;
}
.editorial-hero .updated {
 font-size: 0.82rem;
 color: var(--color-text-muted);
 letter-spacing: 0.04em;
}

/* Section primitives --------------------------------- */
.featured-articles,
.reference-grid-section,
.editorial-note {
 padding: 72px 0;
 border-bottom: 1px solid var(--color-border-light);
}
.section-title {
 font-family: var(--font-heading);
 font-size: clamp(1.7rem, 2.6vw, 2.4rem);
 color: var(--color-text-primary);
 margin: 0 0 8px;
}
.section-sub {
 color: var(--color-text-secondary);
 margin: 0 0 36px;
 max-width: 720px;
 font-size: 1rem;
}

/* Article cards (homepage) --------------------------- */
.article-grid {
 display: grid;
 grid-template-columns: 1.4fr 1fr 1fr;
 gap: 28px;
}
@media (max-width: 980px) {
 .article-grid { grid-template-columns: 1fr; }
}
.article-card {
 background: var(--color-bg-card);
 border: 1px solid var(--color-border-light);
 border-radius: 14px;
 padding: 30px;
 transition: border-color 0.2s ease, transform 0.2s ease;
}
.article-card:hover {
 border-color: var(--color-border-gold);
 transform: translateY(-3px);
}
.article-card.article-feature {
 background:
 linear-gradient(135deg, rgba(218, 188, 116, 0.05), transparent 60%),
 var(--color-bg-card);
}
.article-tag {
 display: inline-block;
 font-size: 0.7rem;
 text-transform: uppercase;
 letter-spacing: 0.18em;
 color: var(--color-gold);
 border: 1px solid var(--color-border-gold);
 padding: 4px 10px;
 border-radius: 99px;
 margin-bottom: 16px;
}
.article-card h3 {
 font-family: var(--font-heading);
 font-size: 1.55rem;
 line-height: 1.2;
 margin: 0 0 14px;
}
.article-card h3 a {
 color: var(--color-text-primary);
 text-decoration: none;
}
.article-card h3 a:hover {
 color: var(--color-gold);
}
.article-card .excerpt {
 color: var(--color-text-secondary);
 font-size: 0.98rem;
 line-height: 1.65;
 margin: 0 0 16px;
}
.article-card .meta {
 color: var(--color-text-muted);
 font-size: 0.82rem;
 letter-spacing: 0.04em;
 margin: 0;
}

/* Reference grid ------------------------------------- */
.reference-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
 gap: 16px;
}
.ref-card {
 display: block;
 padding: 20px 22px;
 background: var(--color-bg-card);
 border: 1px solid var(--color-border-light);
 border-radius: 10px;
 text-decoration: none;
 transition: border-color 0.2s, transform 0.2s;
}
.ref-card:hover {
 border-color: var(--color-border-gold);
 transform: translateY(-2px);
}
.ref-card h4 {
 font-family: var(--font-heading);
 font-size: 1.08rem;
 margin: 0 0 6px;
 color: var(--color-text-primary);
}
.ref-card p {
 margin: 0;
 color: var(--color-text-muted);
 font-size: 0.86rem;
 line-height: 1.5;
}

/* Editorial note ------------------------------------- */
.editorial-note .container { max-width: 880px; }
.editorial-note h2 {
 font-family: var(--font-heading);
 font-size: 1.6rem;
 margin: 0 0 16px;
}
.editorial-note p {
 color: var(--color-text-secondary);
 line-height: 1.8;
 font-size: 1rem;
 margin: 0 0 14px;
}
.editorial-note a { color: var(--color-gold); }

/* Independence banner (homepage hero adjunct) ---------- */
.independence-banner {
 background: linear-gradient(180deg, rgba(218, 188, 116, 0.04), transparent);
 border-top: 1px solid var(--color-border-light);
 border-bottom: 1px solid var(--color-border-light);
 padding: 22px 0;
}
.independence-banner .container {
 display: flex;
 gap: 18px;
 align-items: center;
 flex-wrap: wrap;
}
.independence-banner .badge {
 display: inline-block;
 font-size: 0.7rem;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 padding: 5px 11px;
 border-radius: 99px;
 border: 1px solid var(--color-border-gold);
 color: var(--color-gold);
 white-space: nowrap;
}
.independence-banner p {
 margin: 0;
 font-size: 0.92rem;
 color: var(--color-text-secondary);
 line-height: 1.55;
 flex: 1 1 320px;
}
.independence-banner a {
 color: var(--color-gold);
 white-space: nowrap;
}

/* Per-page footer legal strip --------------------------- */
.legal-strip {
 background: var(--color-bg-dark);
 border-top: 1px solid var(--color-border-light);
 padding: 32px 0;
 color: var(--color-text-muted);
 font-size: 0.78rem;
 line-height: 1.65;
}
.legal-strip p {
 margin: 0 0 10px;
 max-width: 1080px;
}
.legal-strip p:last-child { margin-bottom: 0; }
.legal-strip strong {
 color: var(--color-text-secondary);
 font-weight: 600;
}
.legal-strip a {
 color: var(--color-gold);
 text-decoration: underline;
 text-underline-offset: 2px;
}

/* Footer (minimal) ----------------------------------- */
.site-footer-min {
 padding: 56px 0 28px;
 background: var(--color-bg-secondary);
 border-top: 1px solid var(--color-border-light);
}
.footer-cols {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 36px;
 margin-bottom: 36px;
}
@media (max-width: 768px) {
 .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
.footer-col h5 {
 font-family: var(--font-heading);
 color: var(--color-gold);
 font-size: 1rem;
 margin: 0 0 14px;
 letter-spacing: 0.02em;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 8px; }
.footer-col a {
 color: var(--color-text-secondary);
 text-decoration: none;
 font-size: 0.92rem;
}
.footer-col a:hover { color: var(--color-gold); }
.footer-col p.muted {
 color: var(--color-text-muted);
 font-size: 0.86rem;
 line-height: 1.6;
}
.footer-col p.muted a { color: var(--color-gold); }
.copyright {
 text-align: center;
 color: var(--color-text-muted);
 font-size: 0.82rem;
 border-top: 1px solid var(--color-border-light);
 padding-top: 22px;
 margin: 0;
}

/* =====================================================
 Editorial Article Layout
 ===================================================== */

body.editorial-article {
 background: var(--color-bg-primary);
}
.article-shell {
 max-width: 760px;
 margin: 0 auto;
 padding: 60px 24px 80px;
}
.article-shell .breadcrumbs {
 font-size: 0.8rem;
 color: var(--color-text-muted);
 margin-bottom: 28px;
}
.article-shell .breadcrumbs a {
 color: var(--color-text-muted);
 text-decoration: none;
}
.article-shell .breadcrumbs a:hover { color: var(--color-gold); }

.article-shell .article-tag {
 margin-bottom: 18px;
}

.article-shell h1.article-title {
 font-family: var(--font-heading);
 font-size: clamp(2.1rem, 4.6vw, 3.4rem);
 line-height: 1.1;
 margin: 0 0 18px;
 letter-spacing: -0.01em;
 color: var(--color-text-primary);
}

.article-shell .dek {
 font-size: 1.18rem;
 line-height: 1.65;
 color: var(--color-text-secondary);
 margin: 0 0 24px;
 font-family: var(--font-body);
}

.article-shell .byline {
 font-size: 0.85rem;
 color: var(--color-text-muted);
 border-top: 1px solid var(--color-border-light);
 border-bottom: 1px solid var(--color-border-light);
 padding: 14px 0;
 margin-bottom: 36px;
 letter-spacing: 0.02em;
}

.article-shell .article-body {
 font-size: var(--edit-text);
 line-height: var(--edit-line);
 color: #DCDCDC;
}
.article-shell .article-body h2 {
 font-family: var(--font-heading);
 font-size: 1.85rem;
 margin: 56px 0 18px;
 color: var(--color-text-primary);
 letter-spacing: -0.005em;
 line-height: 1.18;
}
.article-shell .article-body h3 {
 font-family: var(--font-heading);
 font-size: 1.32rem;
 margin: 38px 0 14px;
 color: var(--color-text-primary);
 line-height: 1.25;
}
.article-shell .article-body p {
 margin: 0 0 22px;
}
.article-shell .article-body a {
 color: var(--color-gold);
 text-decoration: underline;
 text-underline-offset: 3px;
 text-decoration-thickness: 1px;
}
.article-shell .article-body strong { color: var(--color-text-primary); }
.article-shell .article-body em { color: #E6E6E6; }
.article-shell .article-body ul,
.article-shell .article-body ol {
 padding-left: 22px;
 margin: 0 0 26px;
}
.article-shell .article-body li {
 margin-bottom: 10px;
}
.article-shell .article-body blockquote {
 border-left: 3px solid var(--color-gold);
 padding: 8px 0 8px 22px;
 margin: 28px 0;
 font-family: var(--font-heading);
 font-style: italic;
 font-size: 1.18rem;
 line-height: 1.55;
 color: var(--color-text-primary);
}
.article-shell .article-body table {
 width: 100%;
 border-collapse: collapse;
 margin: 26px 0;
 font-size: 0.95rem;
}
.article-shell .article-body th,
.article-shell .article-body td {
 text-align: left;
 padding: 12px 14px;
 border-bottom: 1px solid var(--color-border-light);
}
.article-shell .article-body th {
 color: var(--color-gold);
 font-weight: 600;
 font-size: 0.82rem;
 letter-spacing: 0.06em;
 text-transform: uppercase;
}
.article-shell .article-body tr:hover td { background: rgba(255, 255, 255, 0.02); }

.callout {
 background: rgba(218, 188, 116, 0.05);
 border: 1px solid var(--color-border-gold);
 border-radius: 10px;
 padding: 20px 22px;
 margin: 28px 0;
}
.callout h4 {
 font-family: var(--font-heading);
 color: var(--color-gold);
 margin: 0 0 8px;
 font-size: 1.05rem;
 letter-spacing: 0.04em;
}
.callout p { margin: 0; color: var(--color-text-secondary); }

.pros-cons {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 18px;
 margin: 28px 0;
}
@media (max-width: 720px) { .pros-cons { grid-template-columns: 1fr; } }
.pros-cons > div {
 background: var(--color-bg-card);
 border: 1px solid var(--color-border-light);
 border-radius: 10px;
 padding: 20px 22px;
}
.pros-cons .pros { border-left: 3px solid #4ade80; }
.pros-cons .cons { border-left: 3px solid #f87171; }
.pros-cons h4 {
 font-family: var(--font-heading);
 margin: 0 0 12px;
 font-size: 1.05rem;
}
.pros-cons ul { padding-left: 18px; margin: 0; }
.pros-cons li { margin-bottom: 8px; color: var(--color-text-secondary); }

.related-articles {
 background: var(--color-bg-secondary);
 padding: 60px 0;
 border-top: 1px solid var(--color-border-light);
}
.related-articles h2 {
 font-family: var(--font-heading);
 margin: 0 0 28px;
 font-size: 1.6rem;
 color: var(--color-text-primary);
}
.related-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
 gap: 20px;
}
.related-card {
 display: block;
 padding: 22px;
 background: var(--color-bg-card);
 border: 1px solid var(--color-border-light);
 border-radius: 10px;
 text-decoration: none;
 transition: border-color 0.2s;
}
.related-card:hover { border-color: var(--color-border-gold); }
.related-card span.tag {
 font-size: 0.7rem;
 color: var(--color-gold);
 text-transform: uppercase;
 letter-spacing: 0.16em;
}
.related-card h3 {
 font-family: var(--font-heading);
 margin: 8px 0 8px;
 color: var(--color-text-primary);
 font-size: 1.12rem;
 line-height: 1.3;
}
.related-card p {
 color: var(--color-text-muted);
 font-size: 0.88rem;
 margin: 0;
 line-height: 1.55;
}