/* ==========================================================================
   DD AUTOPILOT — ARTICLE
   THE READING EXPERIENCE — this is the product

   Psychology applied:
   - 18-20px body with 1.8 line-height → no eye fatigue on longform
   - 38rem reading column = 60-70 chars/line = Harvard sweet spot
   - Drop cap on first paragraph → magazine cue, triggers "I'm going to read"
   - Generous paragraph spacing → brain registers "reachable milestones"
   - Warm ink on cream → 2x longer dwell vs black-on-white (eye fatigue studies)
   - Pull quotes in serif italic → rhythm break, keeps attention fresh
   - Key Takeaways above fold → scanner can extract value in 5 sec, stays longer
   ========================================================================== */

/* ---------- POST HERO (full-bleed image) ---------- */
.post-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  max-height: 520px;
  overflow: hidden;
  background: var(--paper-sink);
}
.post-hero img,
.post-hero picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-hero__caption {
  position: absolute;
  bottom: var(--s-2);
  right: var(--s-4);
  color: rgba(255,255,255,0.85);
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* ---------- ARTICLE HEADER ---------- */
.article-header {
  max-width: var(--prose-col);
  margin: 0 auto;
  padding: var(--s-6) var(--s-4) var(--s-5);
}
.article-breadcrumb {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  color: var(--ink-muted);
  margin-bottom: var(--s-4);
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
}
.article-breadcrumb a { color: var(--accent-ink); text-decoration: none; }
.article-breadcrumb a:hover { text-decoration: underline; }
.article-breadcrumb__sep { color: var(--ink-faint); }

.article-category {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  text-decoration: none;
  padding: 3px 10px;
  background: var(--accent-wash);
  border-radius: var(--r-sm);
  margin-bottom: var(--s-4);
}
.article-category--food      { color: var(--cat-food);      background: #f8ebeb; }
.article-category--finance   { color: var(--cat-finance);   background: #e4efe5; }
.article-category--health    { color: var(--cat-health);    background: #ebe5f5; }
.article-category--travel    { color: var(--cat-travel);    background: #e0ebf5; }
.article-category--lifestyle { color: var(--cat-lifestyle); background: #f5e0d8; }

.article-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: var(--s-4);
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  max-width: 22ch;
}

.article-deck {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-muted);
  margin-bottom: var(--s-5);
  max-width: 46ch;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}

/* ---------- BYLINE ---------- */
.article-byline {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.article-byline__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--paper-sink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-soft);
  flex-shrink: 0;
  overflow: hidden;
}
.article-byline__avatar img { width: 100%; height: 100%; object-fit: cover; }
.article-byline__meta {
  font-family: var(--font-ui);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.article-byline__author {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.article-byline__info {
  font-size: var(--fs-micro);
  color: var(--ink-muted);
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.article-byline__info > *::after {
  content: '·';
  margin-left: var(--s-2);
  color: var(--ink-faint);
}
.article-byline__info > *:last-child::after { display: none; }
.article-byline__updated {
  color: var(--cat-finance);
  font-weight: 500;
}

/* ---------- SHARE BAR ---------- */
.dd-share-bar {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin: var(--s-5) 0;
  padding: 0;
}
.dd-share-bar__btn {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 500;
  padding: 9px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--rule);
  background: var(--paper-lift);
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.01em;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.dd-share-bar__btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); text-decoration: none; }
.dd-share-bar__btn svg { width: 14px; height: 14px; }
.dd-share-bar__btn--pinterest { background: #e60023; color: #fff; border-color: #e60023; }
.dd-share-bar__btn--whatsapp  { background: #25d366; color: #fff; border-color: #25d366; }
.dd-share-bar__btn--facebook  { background: #1877f2; color: #fff; border-color: #1877f2; }
.dd-share-bar__btn--twitter   { background: #000;    color: #fff; border-color: #000; }
.dd-share-bar__btn--copy {}

/* WhatsApp pulse on mobile — India signal */
@media (max-width: 768px) {
  .dd-share-bar__btn--whatsapp { animation: dd-wa-pulse 2.5s ease-in-out infinite; }
}
@keyframes dd-wa-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(37,211,102,0); }
}

/* ---------- GEO QUICK ANSWER (above article body, AI search bait) ---------- */
.dd-geo-answer {
  max-width: var(--prose-col);
  margin: var(--s-5) auto;
  background: var(--highlight-wash);
  border-left: 4px solid var(--highlight);
  padding: var(--s-4) var(--s-5);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.dd-geo-answer__label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #92700a;
  margin-bottom: var(--s-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.dd-geo-answer__content {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: #3a2e0a;
  font-variation-settings: 'opsz' 14, 'SOFT' 50;
}
.dd-geo-answer__content p + p { margin-top: var(--s-3); }

/* ---------- KEY TAKEAWAYS BOX ---------- */
.dd-takeaways {
  max-width: var(--prose-col);
  margin: var(--s-5) auto;
  background: var(--paper-lift);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  padding: var(--s-4) var(--s-5);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.dd-takeaways__label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: var(--s-3);
}
.dd-takeaways__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.dd-takeaways__list li {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-soft);
  padding-left: 24px;
  position: relative;
}
.dd-takeaways__list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 12px;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

/* ---------- TABLE OF CONTENTS ---------- */
.dd-toc {
  max-width: var(--prose-col);
  margin: var(--s-5) auto;
  padding: var(--s-4) var(--s-5);
  background: var(--paper-sink);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}
.dd-toc__title {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--s-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dd-toc__toggle {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--accent-ink);
  background: none;
  border: 0;
  cursor: pointer;
  letter-spacing: 0;
  text-transform: none;
}
.dd-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dd-toc__list li { counter-increment: toc; }
.dd-toc__list a {
  display: flex;
  gap: var(--s-2);
  padding: 4px 0;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  color: var(--ink);
  text-decoration: none;
  line-height: 1.4;
  transition: color var(--dur-fast);
}
.dd-toc__list a::before {
  content: counter(toc) '.';
  color: var(--ink-muted);
  font-weight: 600;
  min-width: 1.5em;
}
.dd-toc__list a:hover { color: var(--accent-ink); }

/* ---------- ARTICLE PROSE (the actual reading) ---------- */
.article-content {
  max-width: var(--prose-col);
  margin: var(--s-5) auto var(--s-7);
  padding: 0 var(--s-4);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--ink-soft);
}

/* Drop cap — triggers "I'm going to read" magazine cue */
.article-content > p:first-child::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 4.5em;
  line-height: 0.85;
  padding: 6px 10px 0 0;
  margin-top: 4px;
  color: var(--accent);
  font-weight: 700;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}

.article-content p {
  margin-bottom: var(--s-4);
  max-width: 100%;
}
.article-content p + p { margin-top: 0; }

.article-content h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
  letter-spacing: -0.015em;
  scroll-margin-top: 80px;
}
.article-content h2::before {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--accent);
  margin-bottom: var(--s-3);
  border-radius: 2px;
}

.article-content h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  margin-top: var(--s-6);
  margin-bottom: var(--s-2);
  scroll-margin-top: 80px;
}

.article-content h4 {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--ink);
  margin-top: var(--s-5);
  margin-bottom: var(--s-2);
  letter-spacing: 0;
}

.article-content a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(139,61,67,0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast);
}
.article-content a:hover { text-decoration-color: var(--accent-ink); }

.article-content strong, .article-content b { font-weight: 600; color: var(--ink); }
.article-content em, .article-content i { font-style: italic; }

/* Lists in article */
.article-content ul, .article-content ol {
  margin: var(--s-3) 0 var(--s-4);
  padding-left: var(--s-5);
}
.article-content li {
  margin-bottom: var(--s-2);
  line-height: var(--lh-loose);
}
.article-content li::marker { color: var(--accent); }

/* Pull quote — rhythm break for longform */
.article-content blockquote {
  margin: var(--s-6) 0;
  padding: var(--s-4) 0 var(--s-4) var(--s-5);
  border-left: 3px solid var(--accent);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h4);
  line-height: 1.5;
  color: var(--ink);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}
.article-content blockquote p { margin-bottom: var(--s-2); }
.article-content blockquote cite {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--font-ui);
  font-style: normal;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}
.article-content blockquote cite::before { content: '— '; }

/* Images in article */
.article-content figure,
.article-content .wp-block-image {
  margin: var(--s-6) 0;
}
.article-content figure img,
.article-content img { border-radius: var(--r-md); }
.article-content figcaption,
.article-content .wp-caption-text {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--ink-muted);
  text-align: center;
  margin-top: var(--s-2);
  line-height: 1.5;
}

/* Code */
.article-content code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--paper-sink);
  padding: 2px 6px;
  border-radius: var(--r-sm);
}
.article-content pre {
  background: var(--ink);
  color: #e5d9cb;
  padding: var(--s-4);
  border-radius: var(--r-md);
  overflow-x: auto;
  margin: var(--s-5) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.article-content pre code { background: none; padding: 0; color: inherit; }

/* Tables */
.article-content table {
  width: 100%;
  margin: var(--s-5) 0;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
}
.article-content th {
  background: var(--paper-sink);
  font-weight: 600;
  text-align: left;
  padding: var(--s-3);
  border-bottom: 2px solid var(--rule);
}
.article-content td {
  padding: var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.article-content tr:last-child td { border-bottom: none; }
.article-content tr:nth-child(even) { background: var(--paper); }

/* HR as section break */
.article-content hr {
  border: 0;
  text-align: center;
  margin: var(--s-7) 0;
  height: 1em;
}
.article-content hr::before {
  content: '• • •';
  color: var(--ink-faint);
  letter-spacing: 0.5em;
  font-size: 0.75em;
}

/* ---------- IN-CONTENT AD ---------- */
.ad-slot {
  max-width: var(--prose-col);
  margin: var(--s-6) auto;
  padding: 0 var(--s-4);
}
.ad-slot__label {
  display: block;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s-1);
}
.ad-slot__holder {
  background: var(--paper-sink);
  border: 1px dashed var(--rule);
  border-radius: var(--r-md);
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  color: var(--ink-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- ARTICLE FOOTER (CTA + author box) ---------- */
.article-footer {
  max-width: var(--prose-col);
  margin: var(--s-7) auto 0;
  padding: 0 var(--s-4);
}

/* Email capture — contextual, end of article */
.dd-subscribe-cta {
  background: var(--ink);
  color: #fff;
  padding: var(--s-6) var(--s-5);
  border-radius: var(--r-lg);
  margin: var(--s-6) 0;
  position: relative;
  overflow: hidden;
}
.dd-subscribe-cta::before {
  content: '';
  position: absolute;
  right: -60px; top: -60px;
  width: 200px; height: 200px;
  background: var(--accent);
  opacity: 0.08;
  border-radius: 50%;
}
.dd-subscribe-cta__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: #fff;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: var(--s-2);
  max-width: 22ch;
}
.dd-subscribe-cta__blurb {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--s-4);
  line-height: 1.6;
  max-width: 44ch;
}
.dd-subscribe-cta__form {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-2);
}
.dd-subscribe-cta__input {
  flex: 1;
  min-width: 200px;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--r-sm);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  background: #fff;
  color: var(--ink);
}
.dd-subscribe-cta__button {
  padding: 12px 20px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: var(--r-sm);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-fast);
}
.dd-subscribe-cta__button:hover { background: var(--accent-ink); }
.dd-subscribe-cta__privacy {
  font-family: var(--font-ui);
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  text-align: left;
  line-height: 1.5;
}
.dd-subscribe-cta__privacy a { color: rgba(255,255,255,0.7); text-decoration: underline; }

/* Author box */
.article-author-box {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--paper-sink);
  border-radius: var(--r-md);
  margin: var(--s-6) 0;
  align-items: flex-start;
}
.article-author-box__avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--paper);
  flex-shrink: 0;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink-soft);
}
.article-author-box__name {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.article-author-box__role {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  margin-bottom: var(--s-2);
}
.article-author-box__bio {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ---------- RELATED POSTS ---------- */
.dd-related {
  max-width: var(--content-max);
  margin: var(--s-8) auto 0;
  padding: 0 var(--s-4);
}
.dd-related__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-bottom: var(--s-5);
  letter-spacing: -0.02em;
}
.dd-related__heading em { color: var(--accent); font-style: normal; }
.dd-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 600px) { .dd-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .dd-related__grid { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   REVAMP — quiet share row (neutral outline, brand hue on hover only)
   Replaces the loud full-colour brand buttons that competed with the read.
   ============================================================ */
.dd-share-bar { gap: 8px; }
.dd-share-bar__btn,
.dd-share-bar__btn--pinterest,
.dd-share-bar__btn--whatsapp,
.dd-share-bar__btn--facebook,
.dd-share-bar__btn--twitter,
.dd-share-bar__btn--copy {
  background: var(--paper-lift) !important;
  color: var(--ink-muted) !important;
  border: 1px solid var(--rule) !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}
.dd-share-bar__btn:hover,
.dd-share-bar__btn:focus-visible {
  border-color: var(--accent) !important;
  color: var(--accent-ink) !important;
  background: var(--accent-wash) !important;
}