/* h1 Article Title
* h2, h3, h4 main titles
* h5, h6 subtitles
*/
/* text style */
.article-container h1 { 
    color: #ff0a54;
    text-align: left;
    line-height: 1.5;
} 

.article-container .title.t-2 {
    color: #9e0059;
    text-align: left;
    margin-top: 20px;
    margin-bottom: 20px;
}

.article-container .title.t-3 {
    color: #c83167;
    text-align: left;
    margin-bottom: 10px;
}
.article-container .title.t-4 {
    color: #023e8a;
    text-align: left;
    margin-bottom: 10px;
    font-size: 30px;
}

.article-container .subtitle.s-5 {
    color: #ffe5d9;
    letter-spacing: 0.6px;
    font-size: 20px;
    margin-left: 5px;
    margin-bottom: 10px;
}

.article-container ul {
    color: #ffe5d9;
    letter-spacing: 0.9px;
    margin: 0 0 1rem;      /* space below the list */
    padding-left: 2rem; /* indent bullets */
    /* list-style: disc; */
}

.article-container ul li + li {
  margin-top: .4rem;     /* space between items */
}

.article-container ol {
    color: #ffe5d9;
    letter-spacing: 0.9px;
    margin: 0 0 1rem;      /* space below the list */
    padding-left: 2rem; /* indent bullets */
}

.article-container ol li + li {
    margin-top: .4rem;     /* space between items */
}


p { 
    color: #ffe5d9;
    letter-spacing: 0.6px;
    line-height: 1.7;
    margin-top: 1rem;  
}

/* ul { color: rgb(147, 174, 174);}  */

ol { color: rgb(210, 210, 181)}



/* ===== Images Style ===== */
.article-container .a-figure {
  margin: 24px 0 40px;        /* consistent spacing around images */
  text-align: center;         /* center captions if you use them */
}

.article-container .a-figure img {
  display: block;
  width: 100%;                 /* exactly the text column width */
  height: auto;                /* no crop */
  max-width: 100%;
  border-radius: 8px;

  /* Hover zoom controlled by a CSS variable */
  transition: transform 0.3s ease;
  transform: scale(1);  
}

.article-container .a-figure:hover img {
    transform: scale(var(--zoom, 1.05)); /* ← uses custom --zoom */
}

/* Optional: preset “zoom tiers” if you don’t want inline style */
.article-container .a-figure.zoom-s  { --zoom: 1.02; }
.article-container .a-figure.zoom-m  { --zoom: 1.05; }
.article-container .a-figure.zoom-l  { --zoom: 1.30; }

/* Optional caption */
.article-container .a-figure figcaption {
  color: #e57709;
  font-size: 0.95rem;
  margin-top: 8px;
}


/* .article-list { color: whitesmoke}

.article-item { color: antiquewhite;} */