/* =========================
   Article Hero — Design System (scoped)
   ========================= */
@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";
  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";
  src: url("../fonts/helveesti_700_italic_body_labels.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Tokens (scoped to this section only) */
.article-hero {
  --ah-color-bg: #EAFD8B;   /* section bg (yellow from palette) */
  --ah-color-text: #170B01; /* primary dark text */
  --ah-color-accent: #1C1BAE; /* not used here, reserved for actions */
  --ah-space-2: 8px;
  --ah-space-3: 12px;
  --ah-space-4: 16px;
  --ah-space-6: 24px;
  --ah-space-8: 32px;
  --ah-space-12: 48px;
  --ah-space-16: 64px;
  --ah-maxw: 1200px;

  --ah-h1-size: 64px;       /* tuned for screenshot scale */
  --ah-h1-lh: 1.08;
  --ah-dek-size: 22px;
  --ah-dek-lh: 1.35;
  --ah-back-size: 16px;
}

/* Section wrapper */
.article-hero {
  background: var(--ah-color-bg);
  color: var(--ah-color-text);
}

/* Container aligns with generous left/right gutters like the reference */
.article-hero__container {
  max-width: var(--ah-maxw);
  margin: 0 auto;
  padding: var(--ah-space-16) var(--ah-space-16) var(--ah-space-12);
}

/* Back link (arrow + underline) */
.article-hero__back {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  font-family: "Helveesti", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400; /* label weight per system */
  font-size: 18px;
  line-height: 1.3;
  color: var(--ah-color-text);
  text-decoration: none;
  position: relative;
  padding-bottom: 4px; /* space for underline */
  border-bottom: 2px solid var(--ah-color-text);
}
.article-hero__back-icon {
  font-size: 18px;
  line-height: 1;
  transform: translateY(-1px); /* optical alignment with text baseline */
}
.article-hero__back:hover {
  opacity: 0.85;
}

/* Headline */
.article-hero__title {
  font-family: "Arizona Flare", Georgia, "Times New Roman", serif;
  font-weight: 300;
  font-size: 36px;
  line-height: 1;
  letter-spacing: 0; /* keep crisp like reference */
  margin: 24px 0 24px;
  max-width: 1050px; /* close to the ref line length */
}

/* Dek / subhead */
.article-hero__dek {
  font-family: "Helveesti", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
  max-width: 1100px;
}

/* Responsive tweaks (match layout feel without changing tokens globally) */
@media (max-width: 1024px) {
  .article-hero__container { padding: var(--ah-space-12) var(--ah-space-12); }
  .article-hero__title { font-size: 48px; line-height: 1; }
  .article-hero__dek { font-size: 20px; }
}
@media (max-width: 640px) {
  .article-hero__container { padding: var(--ah-space-12) var(--ah-space-8); }
  .article-hero__title { font-size: 36px; line-height: 1; }
  .article-hero__dek { font-size: 16px; line-height: 1.2;}
}