/* ============================================================
   SPIRILIGIOUS — ARTICLE THEME CONTROLS
   ------------------------------------------------------------
   A single file to control the typography and colour of every
   article on the site (reading page + archive cards).

   Loaded AFTER editorial.css, so anything you set here wins.

   HOW TO USE
   ----------
   1. Everything editable lives inside the :root block below.
   2. Change a value, save, refresh. Done.
   3. Article DATA (Hindi/Sanskrit text, titles, slugs) stays in
      articles-data.js — this file is only for looks.
   4. Do NOT delete lines that start with "--". You may change the
      value after the colon; keep the variable name intact.
   5. Article DATA and this file have nothing to do with each
      other, so you can edit them independently.

   WHAT YOU CAN CONTROL
   --------------------
   · Fonts (body, headings, sanskrit, meta, title)
   · Font sizes and line heights
   · Text colours (body, headings, title, summary, meta, quotes,
     sanskrit, lists, drop cap, links, cards)
   · Bold / italic / weight / letter-spacing
   · Quote, list, drop-cap and takeaway styling
   · Mobile overrides at the bottom
   ============================================================ */


/* ============================================================
   1. EDITABLE VARIABLES — CHANGE ANYTHING BELOW
   ============================================================ */
:root {

  /* ---------- FONTS ---------- */
  --art-body-font:            "EB Garamond", Georgia, serif;
  --art-heading-font:         "EB Garamond", Georgia, serif;
  --art-title-font:           "EB Garamond", Georgia, serif;
  --art-sanskrit-font:        "Tiro Devanagari Hindi", "Noto Sans Devanagari", serif;
  --art-meta-font:            "Inter", system-ui, sans-serif;

  /* ---------- BODY TEXT ---------- */
  --art-body-size:            1.18rem;
  --art-body-line-height:     1.85;
  --art-body-color:           #3b2f24;   /* warm brown */
  --art-body-letter-spacing:  0.003em;
  --art-body-weight:          400;

  /* ---------- TITLE (H1) ---------- */
  --art-title-size:           clamp(2.1rem, 4.6vw, 3.55rem);
  --art-title-color:          #0e3020;   /* deep forest */
  --art-title-weight:         600;
  --art-title-line-height:    1.06;
  --art-title-letter-spacing: -0.022em;
  --art-title-style:          normal;    /* normal | italic */

  /* ---------- SUMMARY ---------- */
  --art-summary-size:         clamp(1.1rem, 1.6vw, 1.25rem);
  --art-summary-color:        #6b5a47;
  --art-summary-style:        italic;    /* normal | italic */
  --art-summary-line-height:  1.7;

  /* ---------- CATEGORY EYEBROW ---------- */
  --art-cat-color:            #b88732;   /* antique gold */
  --art-cat-size:             0.7rem;
  --art-cat-weight:           700;
  --art-cat-spacing:          0.22em;
  --art-cat-transform:        uppercase;

  /* ---------- BREADCRUMB + META ---------- */
  --art-breadcrumb-color:     #6b5a47;
  --art-breadcrumb-size:      0.72rem;
  --art-meta-color:           #6b5a47;
  --art-meta-size:            0.8rem;
  --art-meta-icon-color:      #b88732;

  /* ---------- H2 ---------- */
  --art-h2-size:              1.82rem;
  --art-h2-color:             #0e3020;
  --art-h2-weight:            600;
  --art-h2-line-height:       1.22;
  --art-h2-letter-spacing:    -0.012em;
  --art-h2-style:             normal;
  --art-h2-rule-color:        #b88732;   /* small gold underline */
  --art-h2-rule-width:        34px;

  /* ---------- H3 ---------- */
  --art-h3-size:              1.36rem;
  --art-h3-color:             #0e3020;
  --art-h3-weight:            600;
  --art-h3-line-height:       1.3;
  --art-h3-letter-spacing:    -0.008em;
  --art-h3-style:             normal;

  /* ---------- PARAGRAPHS ---------- */
  --art-para-spacing:         1.55rem;   /* gap between blocks */

  /* ---------- BOLD (strong / b) ---------- */
  --art-strong-weight:        700;
  --art-strong-color:         #0e3020;

  /* ---------- ITALIC (em / i) ---------- */
  --art-em-color:             inherit;
  --art-em-style:             italic;    /* normal | italic */

  /* ---------- LINKS INSIDE BODY ---------- */
  --art-link-color:           #b88732;
  --art-link-hover-color:     #0e3020;
  --art-link-decoration:      underline;

  /* ---------- BLOCKQUOTE ---------- */
  --art-quote-size:           1.32rem;
  --art-quote-color:          #0e3020;
  --art-quote-border:         #b88732;
  --art-quote-border-width:   3px;
  --art-quote-style:          italic;
  --art-quote-mark-color:     #b88732;   /* the big " */
  --art-quote-cite-color:     #6b5a47;

  /* ---------- SANSKRIT VERSE ---------- */
  --art-sanskrit-size:        1.5rem;
  --art-sanskrit-color:       #0e3020;
  --art-sanskrit-line-height: 2;
  --art-sanskrit-bg:          linear-gradient(180deg, rgba(184,135,50,0.06) 0%, rgba(184,135,50,0.02) 100%);
  --art-sanskrit-border:      rgba(184, 135, 50, 0.22);
  --art-sanskrit-mark-color:  #b88732;   /* the ॥ symbol */
  --art-sanskrit-trans-color: #6b5a47;
  --art-sanskrit-trans-size:  1rem;
  --art-sanskrit-trans-style: italic;

  /* ---------- LISTS ---------- */
  --art-list-marker-color:    #b88732;
  --art-list-spacing:         0.55rem;

  /* ---------- DROP CAP (first letter of first paragraph) ---------- */
  --art-dropcap-color:        #0e3020;
  --art-dropcap-size:         4.4rem;
  --art-dropcap-weight:       600;
  --art-dropcap-font:         "EB Garamond", Georgia, serif;

  /* ---------- TAKEAWAYS BOX ---------- */
  --art-takeaways-bg:         linear-gradient(180deg, rgba(14,48,32,0.055) 0%, rgba(14,48,32,0.03) 100%);
  --art-takeaways-border:     #0e3020;
  --art-takeaways-heading:    #0e3020;
  --art-takeaways-text:       #3b2f24;
  --art-takeaways-mark:       #b88732;

  /* ---------- ARCHIVE CARDS (articles.html) ---------- */
  --art-card-title-color:     #0e3020;
  --art-card-title-size:      1.24rem;
  --art-card-summary-color:   #6b5a47;
  --art-card-summary-size:    0.97rem;
  --art-card-chip-bg:         rgba(14, 48, 32, 0.86);
  --art-card-chip-color:      #ffffff;
}


/* ============================================================
   2. BODY TEXT
   ============================================================ */
.ed-article__body {
  font-family: var(--art-body-font);
  font-size: var(--art-body-size);
  line-height: var(--art-body-line-height);
  color: var(--art-body-color);
  letter-spacing: var(--art-body-letter-spacing);
  font-weight: var(--art-body-weight);
}
.ed-article__body > * + * {
  margin-top: var(--art-para-spacing);
}
.ed-article__body p {
  color: var(--art-body-color);
  font-family: var(--art-body-font);
}

/* Bold */
.ed-article__body strong,
.ed-article__body b {
  font-weight: var(--art-strong-weight);
  color: var(--art-strong-color);
}

/* Italic */
.ed-article__body em,
.ed-article__body i {
  font-style: var(--art-em-style);
  color: var(--art-em-color);
}

/* Links inside body */
.ed-article__body a {
  color: var(--art-link-color);
  text-decoration: var(--art-link-decoration);
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.ed-article__body a:hover {
  color: var(--art-link-hover-color);
}


/* ============================================================
   3. TITLE · SUMMARY · CATEGORY · BREADCRUMB · META
   ============================================================ */
.ed-article__title {
  font-family: var(--art-title-font);
  font-size: var(--art-title-size);
  color: var(--art-title-color);
  font-weight: var(--art-title-weight);
  line-height: var(--art-title-line-height);
  letter-spacing: var(--art-title-letter-spacing);
  font-style: var(--art-title-style);
}
.ed-article__summary {
  font-family: var(--art-body-font);
  font-size: var(--art-summary-size);
  color: var(--art-summary-color);
  font-style: var(--art-summary-style);
  line-height: var(--art-summary-line-height);
}
.ed-article__cat {
  color: var(--art-cat-color);
  font-size: var(--art-cat-size);
  font-weight: var(--art-cat-weight);
  letter-spacing: var(--art-cat-spacing);
  text-transform: var(--art-cat-transform);
}
.ed-article__cat::before {
  background: var(--art-cat-color);
}
.ed-article__meta {
  color: var(--art-meta-color);
  font-size: var(--art-meta-size);
}
.ed-article__meta i {
  color: var(--art-meta-icon-color);
}
.ed-breadcrumb,
.ed-breadcrumb a {
  color: var(--art-breadcrumb-color);
  font-size: var(--art-breadcrumb-size);
}
.ed-breadcrumb span[aria-current] {
  color: var(--art-h2-color);
}


/* ============================================================
   4. HEADINGS INSIDE ARTICLE
   ============================================================ */
.ed-article__body h2 {
  font-family: var(--art-heading-font);
  font-size: var(--art-h2-size);
  color: var(--art-h2-color);
  font-weight: var(--art-h2-weight);
  line-height: var(--art-h2-line-height);
  letter-spacing: var(--art-h2-letter-spacing);
  font-style: var(--art-h2-style);
}
.ed-article__body h2::after {
  background: var(--art-h2-rule-color);
  width: var(--art-h2-rule-width);
}
.ed-article__body h3 {
  font-family: var(--art-heading-font);
  font-size: var(--art-h3-size);
  color: var(--art-h3-color);
  font-weight: var(--art-h3-weight);
  line-height: var(--art-h3-line-height);
  letter-spacing: var(--art-h3-letter-spacing);
  font-style: var(--art-h3-style);
}


/* ============================================================
   5. LISTS
   ============================================================ */
.ed-article__body li {
  color: var(--art-body-color);
  font-family: var(--art-body-font);
  margin-bottom: var(--art-list-spacing);
}
.ed-article__body li::marker {
  color: var(--art-list-marker-color);
}


/* ============================================================
   6. BLOCKQUOTE
   ============================================================ */
.ed-article__body blockquote {
  font-family: var(--art-body-font);
  font-size: var(--art-quote-size);
  font-style: var(--art-quote-style);
  color: var(--art-quote-color);
  border-left-color: var(--art-quote-border);
  border-left-width: var(--art-quote-border-width);
}
.ed-article__body blockquote::before {
  color: var(--art-quote-mark-color);
}
.ed-article__body blockquote cite {
  color: var(--art-quote-cite-color);
}


/* ============================================================
   7. SANSKRIT VERSE
   ============================================================ */
.ed-sanskrit {
  font-family: var(--art-sanskrit-font);
  font-size: var(--art-sanskrit-size);
  line-height: var(--art-sanskrit-line-height);
  color: var(--art-sanskrit-color);
  background: var(--art-sanskrit-bg);
  border-top-color: var(--art-sanskrit-border);
  border-bottom-color: var(--art-sanskrit-border);
}
.ed-sanskrit::before {
  color: var(--art-sanskrit-mark-color);
}
.ed-sanskrit__translation {
  color: var(--art-sanskrit-trans-color);
  font-size: var(--art-sanskrit-trans-size);
  font-style: var(--art-sanskrit-trans-style);
}


/* ============================================================
   8. DROP CAP
   ============================================================ */
.ed-article__body .ed-first-para::first-letter {
  font-family: var(--art-dropcap-font);
  color: var(--art-dropcap-color);
  font-size: var(--art-dropcap-size);
  font-weight: var(--art-dropcap-weight);
}


/* ============================================================
   9. TAKEAWAYS BOX
   ============================================================ */
.ed-takeaways {
  background: var(--art-takeaways-bg);
  border-left-color: var(--art-takeaways-border);
}
.ed-takeaways h3 {
  color: var(--art-takeaways-heading);
}
.ed-takeaways h3::before {
  background: var(--art-takeaways-mark);
}
.ed-takeaways li {
  color: var(--art-takeaways-text);
}
.ed-takeaways li::before {
  background: var(--art-takeaways-mark);
}


/* ============================================================
   10. ARCHIVE CARDS (articles.html)
   ============================================================ */
.ed-card__title {
  color: var(--art-card-title-color);
  font-size: var(--art-card-title-size);
  font-family: var(--art-heading-font);
}
.ed-card__summary {
  color: var(--art-card-summary-color);
  font-size: var(--art-card-summary-size);
  font-family: var(--art-body-font);
}
.ed-card__chip {
  background: var(--art-card-chip-bg);
  color: var(--art-card-chip-color);
}


/* ============================================================
   11. MOBILE OVERRIDES (below 768px and below 480px)
   Change these only if you want phones to look different.
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --art-body-size:        1.09rem;
    --art-body-line-height: 1.8;
    --art-title-size:       clamp(1.75rem, 7.5vw, 2.4rem);
    --art-summary-size:     1.02rem;
    --art-h2-size:          1.42rem;
    --art-h3-size:          1.18rem;
    --art-quote-size:       1.14rem;
    --art-sanskrit-size:    1.24rem;
    --art-dropcap-size:     3.2rem;
    --art-meta-size:        0.74rem;
  }
}

@media (max-width: 480px) {
  :root {
    --art-body-size:        1.05rem;
    --art-title-size:       1.68rem;
    --art-h2-size:          1.3rem;
    --art-h3-size:          1.12rem;
    --art-sanskrit-size:    1.12rem;
    --art-dropcap-size:     2.9rem;
  }
}



/* ============================================================
   12. POLISHED EDITORIAL FINISH
   Subtle depth, more deliberate spacing, and responsive details.
   Keeps the existing Spiriligious forest-green + antique-gold identity.
   ============================================================ */

:root {
  --art-gold-soft: #d0ad68;
  --art-ivory: #fbf8f1;
  --art-ink-soft: #4b4034;
  --art-green-deep: #09271b;
  --art-gold-hairline: rgba(184, 135, 50, 0.28);
}

/* A little more typographic presence without making the page loud. */
.ed-article__title {
  text-wrap: balance;
  max-width: 19ch;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
}

.ed-article__summary {
  max-width: 66ch;
  text-wrap: pretty;
}

.ed-article__cat {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.ed-article__cat::before {
  content: "";
  display: inline-block;
  width: 1.65rem;
  height: 1px;
  opacity: 0.9;
}

/* Reading rhythm and subtle editorial polish. */
.ed-article__body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

.ed-article__body p {
  text-wrap: pretty;
}

.ed-article__body h2 {
  position: relative;
  margin-bottom: 0.95rem;
  padding-bottom: 0.65rem;
  text-wrap: balance;
}

.ed-article__body h2::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 0.62rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--art-h2-rule-color), rgba(184, 135, 50, 0.12));
}

.ed-article__body h3 {
  margin-bottom: 0.45rem;
  text-wrap: balance;
}

/* Elegant, restrained links. */
.ed-article__body a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

.ed-article__body a:hover {
  text-decoration-color: var(--art-link-hover-color);
}

/* Quote panel: warm paper, fine gold rule, and gentle depth. */
.ed-article__body blockquote {
  position: relative;
  margin: 2rem 0;
  padding: 1.25rem 1.5rem 1.25rem 1.65rem;
  border-left-style: solid;
  border-radius: 0 14px 14px 0;
  background: linear-gradient(110deg, rgba(184, 135, 50, 0.075), rgba(184, 135, 50, 0.018));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.ed-article__body blockquote p:last-child {
  margin-bottom: 0;
}

/* Sanskrit / shloka panels feel like a deliberate sacred insert. */
.ed-sanskrit {
  position: relative;
  margin: 2rem 0;
  padding: 1.5rem clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--art-sanskrit-border);
  border-left: 3px solid var(--art-gold-soft);
  border-radius: 4px 16px 16px 4px;
  box-shadow: 0 12px 30px rgba(54, 39, 17, 0.045);
  text-wrap: pretty;
}

.ed-sanskrit::before {
  display: block;
  margin-bottom: 0.45rem;
  opacity: 0.85;
}

.ed-sanskrit__translation {
  margin-top: 0.55rem;
}

/* Takeaways: refined paper card rather than a heavy callout. */
.ed-takeaways {
  margin: 2.25rem 0;
  padding: 1.35rem 1.5rem;
  border: 1px solid rgba(14, 48, 32, 0.10);
  border-left: 3px solid var(--art-takeaways-border);
  border-radius: 4px 14px 14px 4px;
  box-shadow: 0 12px 32px rgba(31, 42, 29, 0.055);
}

.ed-takeaways h3 {
  margin-top: 0;
  letter-spacing: 0.005em;
}

/* Article archive cards: lift on hover, but remain calm and editorial. */
.ed-card {
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.ed-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(24, 42, 29, 0.10);
}

.ed-card__title {
  text-wrap: balance;
  transition: color 180ms ease;
}

.ed-card:hover .ed-card__title {
  color: var(--art-link-hover-color);
}

/* Cleaner lists and more comfortable reading on long-form pages. */
.ed-article__body ul,
.ed-article__body ol {
  padding-inline-start: 1.35em;
}

.ed-article__body li {
  padding-inline-start: 0.15em;
}

.ed-article__body li::marker {
  font-weight: 700;
}

/* Keyboard accessibility and reduced-motion support. */
.ed-article__body a:focus-visible,
.ed-card a:focus-visible {
  outline: 2px solid var(--art-gold-soft);
  outline-offset: 4px;
  border-radius: 3px;
}

@media (hover: none) {
  .ed-card:hover {
    transform: none;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ed-article__body a,
  .ed-card,
  .ed-card__title {
    transition: none;
  }

  .ed-card:hover {
    transform: none;
  }
}

@media (max-width: 768px) {
  .ed-article__title {
    max-width: 100%;
  }

  .ed-article__body blockquote {
    padding: 1rem 1rem 1rem 1.15rem;
    margin: 1.5rem 0;
  }

  .ed-sanskrit {
    padding: 1.15rem 1rem;
  }

  .ed-takeaways {
    padding: 1.1rem 1rem;
  }
}



/* ============================================================
   13. SAFFRON HERITAGE PALETTE
   Replaces the forest-green identity with saffron, marigold,
   warm ivory, and sacred vermilion accents.
   ============================================================ */

:root {
  --art-body-color: #493326;
  --art-title-color: #8f3f13;
  --art-summary-color: #785640;

  --art-cat-color: #b85c16;
  --art-breadcrumb-color: #785640;
  --art-meta-color: #785640;
  --art-meta-icon-color: #d18a22;

  --art-h2-color: #8f3f13;
  --art-h2-rule-color: #d18a22;
  --art-h2-rule-width: 42px;

  --art-h3-color: #9f4b17;
  --art-strong-color: #843b12;

  --art-link-color: #b85c16;
  --art-link-hover-color: #7c2e10;

  --art-quote-color: #843b12;
  --art-quote-border: #d18a22;
  --art-quote-mark-color: #d18a22;
  --art-quote-cite-color: #785640;

  --art-sanskrit-color: #843b12;
  --art-sanskrit-bg: linear-gradient(135deg, rgba(255, 190, 75, 0.15) 0%, rgba(255, 248, 231, 0.82) 52%, rgba(226, 113, 35, 0.07) 100%);
  --art-sanskrit-border: rgba(209, 138, 34, 0.34);
  --art-sanskrit-mark-color: #c66a16;
  --art-sanskrit-trans-color: #785640;

  --art-dropcap-color: #b85c16;

  --art-takeaways-bg: linear-gradient(135deg, rgba(255, 184, 64, 0.16) 0%, rgba(255, 249, 237, 0.92) 100%);
  --art-takeaways-border: #c66a16;
  --art-takeaways-heading: #8f3f13;
  --art-takeaways-text: #493326;
  --art-takeaways-mark: #d18a22;

  --art-card-title-color: #8f3f13;
  --art-card-summary-color: #785640;
  --art-card-chip-bg: rgba(163, 69, 17, 0.91);
  --art-card-chip-color: #fffaf0;

  --art-gold-soft: #e3a333;
  --art-ivory: #fff9ed;
  --art-ink-soft: #493326;
  --art-green-deep: #8f3f13;
  --art-gold-hairline: rgba(209, 138, 34, 0.32);
}

/* Replace remaining hard-coded forest-green styling in enhancement layer. */
.ed-article__title {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.ed-article__body blockquote {
  background: linear-gradient(110deg, rgba(209, 138, 34, 0.13), rgba(255, 248, 231, 0.55));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.ed-sanskrit {
  border-left-color: #e3a333;
  box-shadow: 0 12px 30px rgba(130, 66, 18, 0.065);
}

.ed-takeaways {
  border-color: rgba(184, 92, 22, 0.15);
  box-shadow: 0 12px 32px rgba(130, 66, 18, 0.065);
}

.ed-card:hover {
  box-shadow: 0 16px 36px rgba(130, 66, 18, 0.13);
}

.ed-article__body a:focus-visible,
.ed-card a:focus-visible {
  outline-color: #e3a333;
}

/* Make decorative rules and focus states feel warm, not green. */
.ed-article__cat::before {
  background: linear-gradient(90deg, #d18a22, rgba(209, 138, 34, 0.35));
}

@media (prefers-color-scheme: dark) {
  /* No forced dark mode; these colors only apply if the site already
     has a dark-mode surface and can inherit its surrounding background. */
  .ed-article__body blockquote,
  .ed-sanskrit,
  .ed-takeaways {
    border-color: rgba(227, 163, 51, 0.38);
  }
}