*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   /* border: 2px solid red; */
}

:root {
   /* --blue:     #0E6E4A;
  --blue-lt:  #E2F5EC;
  --blue-md:  #1D9E75;
  --blue-dim: #0A4A32;
  --ink:       #0F1811;
  --ink-2:     #3A4A3D;
  --ink-3:     #718074;
  --paper:     #F8F6F1;
  --paper-2:   #EFEDE7;
  --white:     #FFFFFF;
  --border:    #E0DDD6; */

   --blue: #2e86ab;
   
   --blue-lt: #e8f7f3;
   --blue-md: #17a98b;
   --blue-dim: #0d6655;

   --ink: #13294b;
   --ink-2: #44506a;
   --ink-3: #7a8498;

   --paper: #fafaf8;
   --paper-2: #f2f3f0;

   --white: #ffffff;
   --border: #e4e7eb;

   --serif: "Fraunces", Georgia, serif;
   --sans: "Instrument Sans", system-ui, sans-serif;
   --col-w: 680px;
}

html {
   scroll-behavior: smooth;
}

body {
   font-family: var(--sans);
   background: var(--paper);
   color: var(--ink);
   font-size: 17px;
   line-height: 1.75;
}

/* ── PROGRESS BAR ─────────────────── */
#progress {
   position: fixed;
   top: 51px;
   left: 0;
   height: 3px;
   width: 0%;
   background: linear-gradient(90deg, var(--blue), var(--blue-md));
   z-index: 999;
   transition: width 0.1s linear;
}

/* ── BACK LINK ────────────────────── */
.back-link {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   font-weight: 500;
   color: var(--ink-3);
   text-decoration: none;
   padding: 20px 5vw;
   transition: color 0.2s;
   margin-top: 60px;
   position: sticky;
   top: 40px;
}
.back-link:hover {
   color: var(--blue);
}
.back-link svg {
   width: 16px;
   height: 16px;
   stroke: currentColor;
   fill: none;
   flex-shrink: 0;
}
@media (max-width: 1500px) {
   .back-link{
      position: static;
   }
}

/* ── HERO ─────────────────────────── */
.post-hero {
   padding: 0 5vw 14px;
   max-width: 1200px;
   margin: 0 auto;
   opacity: 0;
   animation: fadeUp 0.6s 0.05s ease forwards;
   /* background: var(--ink);
  border-radius: 12px; */
}

.post-tag {
   display: inline-block;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   background: var(--blue-lt);
   color: var(--blue);
   padding: 5px 12px;
   border-radius: 4px;
   margin-bottom: 22px;
}

.post-hero h1 {
   font-family: var(--serif);
   font-size: clamp(32px, 5vw, 58px);
   font-weight: 300;
   line-height: 1.12;
   color: var(--ink);
   margin-bottom: 24px;
   max-width: 780px;
}
.post-hero h1 em {
   font-style: italic;
   color: var(--blue);
}

.post-meta {
   display: flex;
   align-items: center;
   gap: 20px;
   flex-wrap: wrap;
   font-size: 13px;
   color: var(--ink-3);
   padding-bottom: 28px;
   border-bottom: 1px solid var(--border);
   margin-bottom: 48px;
}
.post-meta-item {
   display: flex;
   align-items: center;
   gap: 6px;
}
.post-meta-item svg {
   width: 14px;
   height: 14px;
   stroke: currentColor;
   fill: none;
}
.post-meta-sep {
   color: var(--border);
}
.author-profile {
   display: inline-block;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   overflow: hidden;
   vertical-align: middle;
}
.author-profile img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* ── LAYOUT ───────────────────────── */
.post-layout {
   max-width: 1240px;
   margin: 0 auto;
   padding: 0 5vw 100px;
   display: grid;
   grid-template-columns: 1fr 260px;
   gap: 80px;
   align-items: start;
}

/* ── ARTICLE BODY ─────────────────── */
.post-body {
   min-width: 0;
}

.post-body p {
   font-size: 17px;
   line-height: 1.85;
   color: var(--ink-2);
   margin-bottom: 24px;
}

.post-body h2 {
   font-family: var(--serif);
   font-size: clamp(22px, 2.5vw, 30px);
   font-weight: 400;
   line-height: 1.25;
   color: var(--ink);
   margin: 56px 0 18px;
   padding-top: 8px;
}

.post-body h3 {
   font-family: var(--serif);
   font-size: 20px;
   font-weight: 400;
   color: var(--ink);
   margin: 36px 0 12px;
}

.post-body ul,
.post-body ol {
   padding-left: 0;
   margin-bottom: 24px;
   list-style: none;
}
.post-body ul li,
.post-body ol li {
   position: relative;
   padding-left: 22px;
   margin-bottom: 10px;
   color: var(--ink-2);
   font-size: 16px;
   line-height: 1.75;
}
.post-body ul li::before {
   content: "—";
   position: absolute;
   left: 0;
   color: var(--blue);
   font-weight: 600;
}
.post-body ol {
   counter-reset: ol-counter;
}
.post-body ol li {
   counter-increment: ol-counter;
}
.post-body ol li::before {
   content: counter(ol-counter) ".";
   position: absolute;
   left: 0;
   color: var(--blue);
   font-weight: 600;
   font-size: 14px;
}

/* Highlighted intro paragraph */
.post-body .lead {
   font-size: 19px;
   line-height: 1.8;
   color: var(--ink);
   font-weight: 400;
   border-left: 3px solid var(--blue);
   padding-left: 24px;
   margin-bottom: 36px;
}

/* Pull quote */
.callout {
   background: var(--ink);
   color: var(--white);
   border-radius: 14px;
   padding: 32px 36px;
   margin: 40px 0;
   position: relative;
   overflow: hidden;
}
.callout::before {
   content: '"';
   font-family: var(--serif);
   font-size: 120px;
   line-height: 1;
   position: absolute;
   top: -10px;
   right: 20px;
   color: var(--blue-md);
   opacity: 0.2;
}
.callout p {
   font-family: var(--serif);
   font-size: 20px;
   font-weight: 300;
   font-style: italic;
   line-height: 1.55;
   color: var(--white) !important;
   margin-bottom: 0;
}

/* Category cards */
.cat-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
   margin: 28px 0 36px;
}
.cat-card {
   background: var(--white);
   border: 1px solid var(--border);
   border-radius: 12px;
   padding: 20px 20px 18px;
}
.cat-card-icon {
   font-size: 26px;
   margin-bottom: 10px;
}
.cat-card h4 {
   font-family: var(--serif);
   font-size: 15px;
   font-weight: 400;
   color: var(--ink);
   margin-bottom: 8px;
}
.cat-card p {
   font-size: 13px !important;
   line-height: 1.6 !important;
   color: var(--ink-3) !important;
   margin-bottom: 0 !important;
}

/* Steps */
.steps {
   margin: 28px 0 36px;
}
.step {
   display: flex;
   gap: 18px;
   padding: 20px 0;
   border-bottom: 1px solid var(--border);
}
.step:last-child {
   border-bottom: none;
}
.step-num {
   flex-shrink: 0;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: var(--blue-lt);
   color: var(--blue);
   font-weight: 700;
   font-size: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 2px;
}
.step-content h4 {
   font-size: 15px;
   font-weight: 600;
   color: var(--ink);
   margin-bottom: 6px;
}
.step-content p {
   font-size: 14px !important;
   line-height: 1.65 !important;
   color: var(--ink-3) !important;
   margin-bottom: 0 !important;
}

/* Mistakes list */
.mistake-list {
   margin: 20px 0 36px;
}
.mistake {
   display: flex;
   gap: 14px;
   align-items: flex-start;
   padding: 16px 0;
   border-bottom: 1px solid var(--border);
}
.mistake-icon {
   flex-shrink: 0;
   width: 32px;
   height: 32px;
   border-radius: 8px;
   background: #fff0ee;
   color: #c0392b;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
}
.mistake strong {
   display: block;
   font-size: 14px;
   color: var(--ink);
   margin-bottom: 3px;
}
.mistake p {
   font-size: 13px !important;
   color: var(--ink-3) !important;
   line-height: 1.6 !important;
   margin: 0 !important;
}

/* Divider */
.post-divider {
   border: none;
   border-top: 1px solid var(--border);
   margin: 52px 0;
}

/* CTA box */
.post-cta {
   background: linear-gradient(135deg, var(--blue-dim), #0d4030);
   border-radius: 16px;
   padding: 40px 36px;
   text-align: center;
   margin-top: 60px;
}
.post-cta h3 {
   font-family: var(--serif);
   font-size: 26px;
   font-weight: 400;
   color: var(--white);
   margin-bottom: 10px;
}
.post-cta p {
   font-size: 15px !important;
   color: #9fc9b5 !important;
   margin-bottom: 24px !important;
}
.cta-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: var(--white);
   color: var(--blue);
   font-family: var(--sans);
   font-size: 14px;
   font-weight: 600;
   padding: 12px 26px;
   border-radius: 8px;
   text-decoration: none;
   transition: background 0.2s, gap 0.2s;
}
.cta-btn:hover {
   background: var(--blue-lt);
   gap: 14px;
}
.cta-btn svg {
   width: 16px;
   height: 16px;
   stroke: currentColor;
   fill: none;
}

/* Tags */
.post-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 48px;
}
.post-tags span {
   font-size: 12px;
   color: var(--ink-3);
   background: var(--paper-2);
   padding: 5px 12px;
   border-radius: 4px;
   border: 1px solid var(--border);
}

/* ── SIDEBAR ──────────────────────── */
.sidebar {
   position: sticky;
   top: 80px;
}

.sidebar-card {
   background: var(--white);
   border: 1px solid var(--border);
   border-radius: 14px;
   padding: 24px;
   margin-bottom: 20px;
}
.sidebar-card h5 {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--ink-3);
   margin-bottom: 16px;
}
.sidebar-card a{
   text-decoration: none;
}

/* TOC */
.toc-list {
   list-style: none;
}
.toc-list li {
   margin-bottom: 4px;
}
.toc-list a {
   font-size: 13px;
   color: var(--ink-2);
   text-decoration: none;
   display: block;
   padding: 6px 10px;
   border-radius: 6px;
   transition: background 0.15s, color 0.15s;
   border-left: 2px solid transparent;
}
.toc-list a:hover,
.toc-list a.active {
   background: var(--blue-lt);
   color: var(--blue);
   border-left-color: var(--blue);
}

/* Share */
.share-btns {
   display: flex;
   flex-direction: column;
   gap: 8px;
}
.share-btn {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 13px;
   font-weight: 500;
   color: var(--ink-2);
   background: var(--paper);
   /* border: 1px solid var(--border); */
   border: 1px solid #f59e0b;
   padding: 10px 14px;
   border-radius: 8px;
   cursor: pointer;
   text-decoration: none;
   transition: background 0.15s, border-color 0.15s;
}
.share-btn:hover {
   background: var(--blue-lt);
   border-color: #c5ded4;
   color: var(--blue);
}
.share-btn svg {
   width: 15px;
   height: 15px;
   stroke: currentColor;
   fill: none;
   color: #f59e0b;
}

/* Also read */
.also-read-card {
   display: flex;
   gap: 12px;
   align-items: flex-start;
   padding: 12px 0;
   border-bottom: 1px solid var(--border);
   cursor: pointer;
}
.also-read-card:last-child {
   border-bottom: none;
   padding-bottom: 0;
}
.also-read-thumb {
   flex-shrink: 0;
   width: 44px;
   height: 44px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
}
.also-read-card h6 {
   font-size: 13px;
   font-weight: 500;
   line-height: 1.4;
   color: var(--ink);
   margin-bottom: 4px;
}
.also-read-card span {
   font-size: 11px;
   color: var(--ink-3);
}

/* ── ANIMATIONS ───────────────────── */
@keyframes fadeUp {
   to {
      opacity: 1;
      transform: translateY(0);
   }
}
.post-body > * {
   opacity: 0;
   transform: translateY(16px);
   animation: fadeUp 0.5s ease forwards;
}
.post-body > *:nth-child(1) {
   animation-delay: 0.15s;
}
.post-body > *:nth-child(2) {
   animation-delay: 0.2s;
}
.post-body > *:nth-child(3) {
   animation-delay: 0.25s;
}
.post-body > *:nth-child(4) {
   animation-delay: 0.3s;
}
.post-body > *:nth-child(n + 5) {
   animation-delay: 0.35s;
}

/* ── RESPONSIVE ───────────────────── */
@media (max-width: 900px) {
   .post-layout {
      grid-template-columns: 1fr;
      gap: 48px;
   }
   .sidebar {
      position: static;
   }
   .cat-grid {
      grid-template-columns: 1fr;
   }
}

/* ===========================
   EPR BLOG FAQ
=========================== */

.epr-blog-faq-wrapper {
   margin-top: 28px;
}

.epr-blog-faq-card {
   background: var(--white);
   border: 1px solid var(--border);
   border-radius: 12px;
   margin-bottom: 14px;
   overflow: hidden;
   transition: all 0.25s ease;
}

.epr-blog-faq-card:hover {
   border-color: #d6dce3;
}

.epr-blog-faq-trigger {
   width: 100%;
   border: none;
   background: transparent;
   cursor: pointer;

   display: flex;
   align-items: center;
   justify-content: space-between;

   padding: 22px 24px;

   font-family: var(--sans);
   font-size: 16px;
   font-weight: 600;
   color: var(--ink);

   text-align: left;
}

.epr-blog-faq-symbol {
   font-size: 22px;
   color: var(--blue);
   transition: transform 0.3s ease;
   flex-shrink: 0;
}

.epr-blog-faq-content {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.35s ease;
}

.epr-blog-faq-content p {
   padding: 0 24px 22px;
   margin: 0;
   color: var(--ink-2);
   line-height: 1.8;
}

.epr-blog-faq-card.epr-blog-faq-open .epr-blog-faq-content {
   max-height: 300px;
}

.epr-blog-faq-card.epr-blog-faq-open .epr-blog-faq-symbol {
   transform: rotate(45deg);
}

@media (max-width: 768px) {
   .epr-blog-faq-trigger {
      font-size: 15px;
      padding: 18px 20px;
   }

   .epr-blog-faq-content p {
      padding: 0 20px 18px;
   }
}
/* =====================================
EPR BLOG FEATURED IMAGE
===================================== */

.epr-blog-featured-figure {
   margin: 0 2px;
   padding: 0 15%;
}

.epr-blog-featured-image {
   display: block;
   width: 100%;
   height: auto;
   border-radius: 18px;
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
   transition: transform 0.3s ease;
}

.epr-blog-featured-image:hover {
   transform: translateY(-2px);
}

.epr-blog-featured-figure figcaption {
   margin-top: 12px;
   font-size: 14px;
   line-height: 1.6;
   color: #6b7280;
   text-align: center;
   font-style: italic;
   max-width: 90%;
   margin-left: auto;
   margin-right: auto;
}

/* Tablet */

@media (max-width: 992px) {
   .epr-blog-featured-figure {
      margin: 24px 0 32px;
      padding: 0 2%;
   }
}

/* Mobile */

@media (max-width: 768px) {
   .epr-blog-featured-image {
      border-radius: 14px;
   }

   .epr-blog-featured-figure figcaption {
      font-size: 13px;

      max-width: 100%;

      padding: 0 10px;
   }
}