/* =========================================================
   Article Content Section (namespaced: .article-content)
   Files: load fonts from assets/fonts/ (woffs provided)
   ========================================================= */

@font-face {
  font-family: "Arizona Flare";
  src: url("../fonts/arizona_flare_300_normal_headings_h1-h6.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Arizona Flare";
  src: url("../fonts/arizona_flare_300_italic_headings_h1-h6.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helveesti";
  src: url("../fonts/helveesti_400_normal_body_ui.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helveesti";
  src: url("../fonts/helveesti_400_italic_body_ui.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helveesti Label";
  src: url("../fonts/helveesti_700_normal_body_labels.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helveesti Label";
  src: url("../fonts/helveesti_700_italic_body_labels.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* -------------------------
   Design Tokens (scoped)
   ------------------------- */
.article-content {
  --ac-color-bg: #F8F2E9;
  --ac-color-text: #170B01;
  --ac-color-accent: #1C1BAE;
  --ac-color-accent-soft-1: #BDCFFB;
  --ac-color-accent-soft-2: #EAFD8B;

  --ac-font-heading: "Arizona Flare", ui-serif, Georgia, serif;
  --ac-font-body: "Helveesti", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* spacing scale tuned to reference */
  --ac-space-2: 8px;
  --ac-space-3: 12px;
  --ac-space-4: 16px;
  --ac-space-5: 20px;
  --ac-space-6: 24px;
  --ac-space-7: 28px;
  --ac-space-8: 32px;
  --ac-space-10: 40px;
  --ac-space-12: 48px;
  --ac-space-16: 64px;
  --ac-space-20: 80px;
  --ac-space-24: 96px;

  background: var(--ac-color-bg);
  color: var(--ac-color-text);
  

  --section-pad-block: 0;

}

.article-content__grid {
  /* Sidebar + reading column similar to screenshot offset */
  display: grid;
  grid-template-columns: 200px minmax(0, 920px);
  gap: 24px;
  align-items: start;
}

/* Sidebar CTA (rounded dark pill) */
.article-content__sidebar {
  position: relative;
}
.article-content__newsletter-btn {
  display: inline-block;
  padding: 14px 22px;
  border-radius: 999px;
  background: #170B01;
  color: var(--ac-color-bg);
  text-decoration: none;
  font-family: var(--ac-font-body);
  font-weight: 400;
  letter-spacing: 0.01em;
  border: 1px solid var(--ac-color-text);
  box-shadow: 0 1px 0 rgba(23, 11, 1, 0.1);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, color 120ms ease;
  white-space: nowrap;
}
.article-content__newsletter-btn:hover {
  transform: translateY(-3px);
  transition: background-color 0.2s ease-in-out, transform 0.2s ease-out;
  background: #1C1BAE;
  color: var(--ac-color-bg);
  border-color: #BDCFFB;
}

/* Meta row (date + long rule) */
.article-content__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ac-space-6);
  align-items: center;
  margin-bottom: var(--ac-space-12);
}
.article-content__date {
  font-family: "Helveesti Label", var(--ac-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ac-color-text);
  white-space: nowrap;
}
.article-content__rule {
  height: 1px;
  background: rgba(23, 11, 1, 0.22);
  display: block;
  transform: translateY(1px);
}

/* Intro copy (pre-heading) */
.article-content__intro {
  font-family: var(--ac-font-body);
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0;
  margin: 0 0 24px;
  color: var(--ac-color-text);
  max-width: 720px;
  text-align: justify;
}

/* Display Heading */
.article-content__title {
  font-family: var(--ac-font-heading);
  font-weight: 300;
  font-size: clamp(42px, 6.1vw, 76px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: var(--ac-space-16) 0 var(--ac-space-8);
  color: var(--ac-color-text);
  max-width: 920px;
}

/* Post-heading paragraphs */
.article-content__para {
  font-family: var(--ac-font-body);
  font-size: 20px;
  line-height: 1.7;
  margin: 0 0 24px;
  max-width: 900px;
  color: var(--ac-color-text);
}

/* Responsive tweaks to match column feel */
@media (max-width: 1100px) {
  .article-content__grid {
    grid-template-columns: 1fr;
  }
  .article-content__sidebar {
    margin-bottom: var(--ac-space-8);
  }
  .article-content__newsletter-btn {
    position: relative;
    left: 0;
  }
}
@media (max-width: 640px) {
  .article-content .dynamic-container { padding-block: var(--ac-space-16) var(--ac-space-20); }
  .article-content__intro,
  .article-content__para { font-size: 18px; }
  .article-content__title { font-size: clamp(36px, 9vw, 58px); }
}

  .article-content__intro,
  .article-content__para {
    font-size: 16px;
    line-height: 1.3;
  }
  .article-content__title {
    font-size: clamp(36px, 9vw, 58px);
  }

.article-content .dynamic-container {
  max-width: 1240px;
  margin: 0 auto;
  padding-block: 80px 80px;
}

@media (max-width: 430px){
  .article-content .dynamic-container {
    padding-block: 25px 25px !important;
  }

  .article-content__meta {
    margin-bottom: 20px;
  }

  .article-content__sidebar {
    margin-bottom: 10px;
  }

}

/*=====================================================*/

/* Footer layout */
.article-content__footer {
  padding-top: 20px;
  border-top: 1px dashed rgba(23, 11, 1, 0.25);
  display: grid;
  gap: 10px;
}

/* Tags */
.article-content__tags { margin: 0; }
.article-content__tag-list {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none;
}
.article-content__tag {
  font-size: 14px;
  display: inline-flex; align-items: center;
  padding: 8px 14px; border-radius: 999px;
  text-decoration: none; font-family: var(--ac-font-body); font-size: 14px;
  border: 1px solid rgba(23, 11, 1, 0.18);
  background: #fff8; color: var(--ac-color-text);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
  backdrop-filter: saturate(120%) blur(2px);
}
.article-content__tag:hover {
  background: var(--ac-color-accent-soft-1);
  border-color: var(--ac-color-accent);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(23, 11, 1, 0.12);
}
.article-content__tag:focus-visible { outline: 3px solid var(--ac-color-accent-soft-2); outline-offset: 2px; }

/* References */
.article-content__refs { margin: 0; }
.article-content__ref-list {
  counter-reset: refs; list-style: none; padding: 0; margin: var(--ac-space-6) 0 0;
  display: grid; gap: var(--ac-space-4);
}
.article-content__ref-list > li { position: relative; padding-left: 42px; }
.article-content__ref-list > li::before {
  counter-increment: refs; content: "[" counter(refs) "]";
  position: absolute; left: 0; top: 2px;
  font-family: "Helveesti Label", var(--ac-font-body); font-weight: 700; font-size: 14px;
  color: var(--ac-color-accent); opacity: 0.9;
}
.article-content__ref {
  display: inline-flex; align-items: baseline; gap: 10px;
  text-decoration: none; font-family: var(--ac-font-body); font-size: 14px; line-height: 1.5;
  color: var(--ac-color-text); border-bottom: 1px dotted rgba(23, 11, 1, 0.4); padding-bottom: 2px;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.article-content__ref:hover { color: var(--ac-color-accent); border-color: var(--ac-color-accent); background: rgba(174, 27, 116, 0.06); }
.article-content__ref:focus-visible { outline: 3px solid var(--ac-color-accent-soft-2); outline-offset: 3px; }
.article-content__ref-domain {
  font-size: 14px; opacity: 0.75; border: 1px solid rgba(23, 11, 1, 0.15);
  padding: 2px 8px; border-radius: 999px; line-height: 1.2; background: var(--ac-color-bg);
}

@media (max-width: 640px){
  .article-content__ref { font-size: 14px; }
  .article-content__ref-list > li { padding-left: 36px; }
}