/* ============================================================
   Blog — index (navy, matches homepage Newsroom palette) +
   article reader (light, editorial)
   ============================================================ */

/* Local brand-aligned tokens for this page.
   Matches homepage_v2/newsroom-variants.css NewsroomN3 palette. */
:root {
  --blogx-bg:      #0F2748;     /* deep brand navy */
  --blogx-bg-2:    #0c2040;     /* darker navy for grid section */
  --blogx-bone:    #f6f4ef;     /* warm cream text */
  --blogx-blue:    #7BA9C8;     /* steel-blue accent (eyebrows / italic) */
  --blogx-blue-dp: #3F6FA8;     /* deeper steel for borders / hover */
  --blogx-mute:    rgba(246, 244, 239, 0.62);
  --blogx-rule:    rgba(123, 169, 200, 0.24);
}

/* ---------- INDEX (navy) ---------- */

.blogx-page {
  background: var(--blogx-bg);
  color: var(--blogx-bone);
  font-family: 'Source Sans 3', system-ui, sans-serif;
}

/* HERO --------------------------------------------------------- */
.blogx-hero {
  background: var(--blogx-bg);
  padding: 72px 64px 96px;
  border-bottom: 1px solid var(--blogx-rule);
}
@media (max-width: 700px) {
  .blogx-hero { padding: 56px 24px 64px; }
}
.blogx-hero-inner {
  max-width: 1240px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 980px) {
  .blogx-hero-inner { grid-template-columns: 1fr; gap: 28px; align-items: start; }
}
.blogx-kicker {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--blogx-blue);
  margin-bottom: 28px;
}
.blogx-kicker::before { content: ''; width: 32px; height: 1px; background: currentColor; opacity: 0.7; }

.blogx-h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(64px, 7.4vw, 120px);
  line-height: 0.98;
  letter-spacing: -0.022em;
  margin: 0;
  color: var(--blogx-bone);
  text-wrap: balance;
}
.blogx-h1 em { font-style: italic; color: var(--blogx-blue); }

.blogx-hero-side {
  /* Top-align with the H1 (skipping over the eyebrow + its margin) */
  padding-top: 46px;
  display: flex; flex-direction: column; gap: 20px;
}
@media (max-width: 980px) { .blogx-hero-side { padding-top: 0; } }
.blogx-hero-side p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.45;
  color: rgba(246, 244, 239, 0.82);
  margin: 0;
  max-width: 36ch;
}
.blogx-hero-meta {
  display: flex; gap: 28px; flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--blogx-rule);
}
.blogx-hero-meta > div { display: flex; flex-direction: column; gap: 4px; }
.blogx-hero-meta dt {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  font-weight: 600; color: var(--blogx-mute);
  margin: 0;
}
.blogx-hero-meta dd {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
  font-size: 20px; color: var(--blogx-bone);
}

/* GRID --------------------------------------------------------- */
.blogx-grid-section {
  background: var(--blogx-bg-2);
  padding: 96px 64px 120px;
}
@media (max-width: 700px) {
  .blogx-grid-section { padding: 56px 20px 80px; }
}
.blogx-grid-head {
  max-width: 1240px; margin: 0 auto 56px;
  display: flex; align-items: end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.blogx-grid-head h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--blogx-bone);
}
.blogx-grid-head h2 em { font-style: italic; color: var(--blogx-blue); }
.blogx-grid-head .count {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  font-weight: 600;
  color: var(--blogx-mute);
}

.blogx-grid {
  max-width: 1240px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 32px;
}
@media (max-width: 1080px) { .blogx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .blogx-grid { grid-template-columns: 1fr; gap: 32px; } }

/* CARD --------------------------------------------------------- */
.blogx-card {
  display: flex; flex-direction: column;
  background: transparent;
  color: inherit;
  text-decoration: none;
  transition: transform 220ms ease;
}
.blogx-card:hover { transform: translateY(-4px); }

.blogx-card-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: rgba(255,255,255,0.04);
  overflow: hidden;
  margin-bottom: 22px;
  border: 1px solid var(--blogx-rule);
}
.blogx-card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92);
  transition: transform 600ms cubic-bezier(.2,.7,.2,1), filter 220ms ease;
}
.blogx-card:hover .blogx-card-thumb img {
  transform: scale(1.04);
  filter: saturate(1);
}
.blogx-card-thumb::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 39, 72, 0) 50%, rgba(15, 39, 72, 0.55) 100%);
  pointer-events: none;
}
.blogx-card-stroke {
  position: absolute;
  pointer-events: none;
  background: var(--blogx-blue);
  z-index: 1;
}
.blogx-card-stroke--tl {
  top: 18%; right: -20%;
  width: 60%; height: 8px;
  transform: rotate(-9deg);
  opacity: 0.55;
}
.blogx-card-stroke--br {
  bottom: 22%; left: -22%;
  width: 60%; height: 6px;
  transform: rotate(-9deg);
  opacity: 0.32;
}

.blogx-card-meta {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 700;
  color: var(--blogx-blue);
  margin-bottom: 14px;
}
.blogx-card-meta .dot {
  width: 4px; height: 4px;
  background: currentColor; opacity: 0.5;
  border-radius: 50%;
}
.blogx-card-meta .date {
  color: var(--blogx-mute);
  font-weight: 600;
}

.blogx-card-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--blogx-bone);
  margin: 0 0 14px;
  text-wrap: balance;
  transition: color 180ms ease;
}
.blogx-card:hover .blogx-card-title { color: var(--blogx-blue); }

.blogx-card-dek {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 17px; line-height: 1.5;
  color: rgba(246, 244, 239, 0.68);
  margin: 0 0 18px;
  max-width: 38ch;
}

.blogx-card-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 700;
  color: var(--blogx-blue);
  margin-top: auto;
}
.blogx-card-cta .arr {
  width: 24px; height: 1px;
  background: currentColor;
  transition: width 220ms ease;
}
.blogx-card:hover .blogx-card-cta .arr { width: 38px; }

/* ============================================================
   ARTICLE READER (light, editorial)
   ============================================================ */

.article-page { background: var(--hp-bone, #F1ECDF); color: var(--hp-ink, #0F2748); }

.art-wrap {
  background: var(--hp-bone, #F1ECDF);
  padding: 64px 24px 96px;
}

.art-shell {
  max-width: 760px;
  margin: 0 auto;
}

.art-breadcrumb {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 600;
  color: var(--hp-mute-deep, #5B6E89);
  margin-bottom: 28px;
}
.art-breadcrumb a {
  color: var(--hp-mute-deep, #5B6E89);
  text-decoration: none;
  transition: color 160ms ease;
}
.art-breadcrumb a:hover { color: var(--hp-ink, #0F2748); }
.art-breadcrumb .sep { opacity: 0.4; }
.art-breadcrumb .current { color: var(--hp-ink, #0F2748); }

.art-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  font-weight: 700;
  color: var(--steel, #4F7FB8);
  margin-bottom: 22px;
}
.art-eyebrow::before { content: ''; width: 32px; height: 1px; background: currentColor; opacity: 0.8; }

.art-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.018em;
  margin: 0 0 24px;
  color: var(--hp-ink, #0F2748);
  text-wrap: balance;
}
.art-title em { font-style: italic; color: var(--steel, #4F7FB8); }

.art-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 14px;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600;
  color: var(--hp-mute-deep, #5B6E89);
  padding-bottom: 36px;
  border-bottom: 1px solid var(--hp-rule, #D7CFB8);
  margin-bottom: 36px;
}
.art-meta .by {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 17px; letter-spacing: 0;
  text-transform: none;
  color: var(--hp-ink, #0F2748);
}
.art-meta .dot {
  width: 4px; height: 4px;
  background: currentColor; opacity: 0.4;
  border-radius: 50%;
}

.art-hero {
  margin: 0 -40px 40px;
  background: #14110f;
}
.art-hero img {
  width: 100%; height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
@media (max-width: 820px) {
  .art-hero { margin: 0 -24px 32px; }
}

.art-body {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.75;
  color: var(--hp-ink, #0F2748);
}
.art-body > p {
  margin: 0 0 22px;
  text-wrap: pretty;
}
.art-body > p strong {
  font-weight: 600;
  color: var(--hp-ink, #0F2748);
}
.art-body > p em {
  font-style: italic;
}
.art-body > p:first-child::first-letter {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 76px;
  float: left;
  line-height: 0.85;
  padding: 8px 14px 0 0;
  color: var(--steel, #4F7FB8);
}
.art-body a {
  color: var(--steel, #4F7FB8);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 160ms ease;
}
.art-body a:hover { color: var(--steel-deep, #3A5F8E); }
.art-body figure { margin: 36px 0; }
.art-body figure img { width: 100%; height: auto; display: block; }

/* Pull quote treatment for the standalone "By: Gus Dimopoulos" / closing italics */
.art-body > p:has(em:only-child) {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  color: var(--hp-mute-deep, #5B6E89);
  padding-left: 22px;
  border-left: 2px solid var(--steel, #4F7FB8);
  margin: 36px 0;
}

.art-end-rule {
  margin: 56px 0 36px;
  border: 0;
  border-top: 1px solid var(--hp-rule, #D7CFB8);
}

/* Related articles strip --------------------------------------- */
.art-related {
  background: var(--hp-paper, #F6F3EB);
  padding: 80px 24px;
  border-top: 1px solid var(--hp-rule, #D7CFB8);
}
.art-related-inner { max-width: 1240px; margin: 0 auto; }
.art-related-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: 36px;
}
.art-related-head h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 2.4vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--hp-ink, #0F2748);
}
.art-related-head h2 em { font-style: italic; color: var(--steel, #4F7FB8); }
.art-related-head .all {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 700;
  color: var(--steel, #4F7FB8);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 12px;
}
.art-related-head .all:hover { color: var(--steel-deep, #3A5F8E); }
.art-related-head .all .arr { width: 22px; height: 1px; background: currentColor; }

.art-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
@media (max-width: 980px) { .art-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .art-related-grid { grid-template-columns: 1fr; } }
.art-related-card {
  display: flex; flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 200ms ease;
}
.art-related-card:hover { transform: translateY(-3px); }
.art-related-card .thumb {
  aspect-ratio: 4 / 3;
  background: #14110f;
  overflow: hidden;
  margin-bottom: 16px;
}
.art-related-card .thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: saturate(0.92);
  transition: transform 500ms ease, filter 200ms ease;
}
.art-related-card:hover .thumb img { transform: scale(1.04); filter: saturate(1); }
.art-related-card .date {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 600;
  color: var(--hp-mute-deep, #5B6E89);
  margin-bottom: 6px;
}
.art-related-card h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: 20px; line-height: 1.18;
  color: var(--hp-ink, #0F2748);
  margin: 0;
  text-wrap: balance;
  transition: color 160ms ease;
}
.art-related-card:hover h3 { color: var(--steel, #4F7FB8); }

/* ====================================================== */
/* TEMP: hide all blog images while we source originals    */
/* ====================================================== */
/* When real article hero images land, remove this block.  */
/* Affects: blog index card thumbnails, article hero, and  */
/* related-article thumbnails on each article page.        */
.blogx-card-thumb,
.art-hero,
.art-related-card .thumb {
  display: none !important;
}