/* Article styles (minimal, enforces text measure for hero and body) */
:root{ --article-measure: 80ch; --gold: #d4af37; --muted: rgba(234,238,247,0.92); }
.container{ padding: 0 20px; }
.article{ max-width: var(--article-measure); margin: 56px auto 120px; font-family: Georgia, 'Times New Roman', serif; color:var(--muted); line-height:1.72; }
.article h1{ font-size:2.6rem; color:var(--gold); margin: 8px 0 14px; font-weight:800; }
.article .byline{ font-family: 'Helvetica Neue', Arial, sans-serif; text-transform:uppercase; letter-spacing:1.8px; font-weight:700; color: rgba(255,255,255,0.78); font-size:0.86rem; }


/* Make footer non-sticky on article pages to avoid overlapping content */
.maroon-footer{ position: static !important; left: auto !important; right: auto !important; bottom: auto !important; z-index: 1 !important; }

/* Hero constrained to the article measure */
.hero{ display:block; width:100%; border-radius:12px; overflow:hidden; margin-bottom:28px; position:relative; min-height:220px; background: linear-gradient(180deg, rgba(10,8,12,0.6), rgba(18,16,20,0.85)); border:1px solid rgba(255,255,255,0.03); }
.hero .hero-inner{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:36px; }
.hero .hero-inner > *{ max-width: var(--article-measure) !important; width:100% !important; margin:0 auto !important; box-sizing:border-box !important; }

/* Ensure hero participates in document flow and is centered to the same measure as the article.
  This replaces absolute positioning that caused horizontal offset. */
.article .hero{ position: static !important; max-width: var(--article-measure) !important; margin: 0 auto 28px !important; padding: 36px !important; box-sizing: border-box !important; }
.article .hero .hero-inner{ position: relative !important; inset: auto !important; display: block !important; padding: 0 !important; align-items: flex-start !important; }
.article .hero .hero-inner > *{ margin: 0 !important; padding: 0 !important; }
.hero .hero-title{ color:var(--gold); font-size:2.2rem; font-weight:800; text-align:center; }
.hero .hero-sub{ color: rgba(255,255,255,0.92); margin-top:10px; font-size:1.05rem; text-align:center; }

/* Drop cap for the first paragraph */
.article p:first-of-type::first-letter{ float:left; font-size:3.8rem; line-height:0.72; padding-right:10px; font-weight:800; color:var(--gold); font-family: Georgia, serif; }

/* Author bio small */
.author-bio{ display:flex; gap:12px; margin-top:28px; align-items:center; border-top:1px solid rgba(255,255,255,0.02); padding-top:16px; }
.author-avatar{ width:56px; height:56px; border-radius:50%; background: rgba(255,255,255,0.03); }

@media (max-width:800px){ .article{ padding: 0 16px; max-width: calc(var(--article-measure) - 16px); } .hero{ min-height:180px; } }
/* Global article styling for long-form puff pieces (dark-luxe variant) */
:root{
  --gold: #d4af37;
  --muted: rgba(234,238,247,0.90);
  --lead-color: rgba(255,255,255,0.95);
}

/* Article container */
.container{ max-width: 980px; margin: 56px auto 128px; padding: 0 20px; }
.article{ font-family: Georgia, 'Times New Roman', serif; color: var(--muted); line-height: 1.72; }
.article h1{ font-size: 3rem; margin: 8px 0 14px; color: var(--gold); letter-spacing: -1px; font-weight:900; }
.article .byline{ font-family: 'Helvetica Neue', Arial, sans-serif; font-weight:700; color: rgba(255,255,255,0.75); text-transform:uppercase; letter-spacing:2px; font-size:0.85rem; }

/* Hero banner — sophisticated, image-optional */
.hero{ display:block; width:100%; border-radius:14px; overflow:hidden; margin-bottom:28px; position:relative; min-height:240px; background: linear-gradient(180deg, rgba(10,8,12,0.6), rgba(18,16,20,0.85)); box-shadow: 0 24px 60px rgba(2,2,6,0.7); border:1px solid rgba(212,175,55,0.08); }
.hero .hero-inner{ position:absolute; left:0; right:0; top:0; bottom:0; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:36px; }

/* Constrain hero text to article measure so title/sub match body width */
.container .hero .hero-inner > *{ max-width:var(--article-measure); width:min(var(--article-measure),100%); margin:0 auto; box-sizing:content-box; }
.hero .hero-title, .hero .hero-sub{ text-align:center; }
.hero .hero-title{ color:var(--gold); font-family: Georgia, serif; font-size:2.6rem; font-weight:900; text-align:center; margin:0; }
.hero .hero-sub{ color: var(--lead-color); margin-top:10px; font-size:1.08rem; max-width:var(--article-measure); text-align:center; }

/* Drop cap for the lead paragraph */
.article p:first-of-type{ font-size:1.05rem; color: var(--lead-color); }
.article p:first-of-type::first-letter{ float:left; font-size:4.6rem; line-height:0.72; padding-right:12px; font-weight:900; color:var(--gold); font-family: Georgia, serif; }

/* Pull quote style (if used) */
.pull-quote{ font-style:italic; font-size:1.2rem; color: rgba(255,255,255,0.92); border-left:4px solid rgba(212,175,55,0.24); padding-left:14px; margin:18px 0; }

/* Author bio */
.author-bio{ display:flex; gap:14px; margin-top:34px; align-items:center; border-top:1px solid rgba(255,255,255,0.03); padding-top:18px; }
.author-avatar{ width:64px; height:64px; border-radius:50%; background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.16)); box-shadow: 0 6px 18px rgba(0,0,0,0.6); flex:0 0 64px; }
.author-meta{ font-family: 'Helvetica Neue', Arial, sans-serif; color: rgba(255,255,255,0.88); }
.author-meta .name{ font-weight:800; color:var(--gold); }
.author-meta .blurb{ color: rgba(234,238,247,0.78); font-size:0.95rem; margin-top:6px; }

/* Reading progress bar */
#readProgress{ position:fixed; left:0; top:0; height:3px; background: linear-gradient(90deg, rgba(212,175,55,0.95), rgba(255,223,130,0.7)); width:0%; z-index:9999; transition: width 120ms linear; }

@media (max-width: 800px){
  .article h1{ font-size:2rem; }
  .hero{ min-height:180px; }
}

/* High-specificity overrides to ensure hero and article text share exact left/right edges */
.article{ max-width: var(--article-measure) !important; margin-left: auto !important; margin-right: auto !important; padding: 0 !important; box-sizing: border-box !important; }
.article, .article .hero, .article .hero .hero-inner > * { max-width: var(--article-measure) !important; box-sizing: border-box !important; }
.hero{ padding: 0 !important; }
.hero .hero-inner{ padding: 0 !important; align-items: flex-start !important; }
.hero .hero-inner > *{ width: 100% !important; max-width: var(--article-measure) !important; margin-left: auto !important; margin-right: auto !important; padding: 36px 0 !important; }