/* =========================================================
   JING REN TANG — BODY REFLECTIONS ARTICLE SYSTEM
   Global Article CSS v1.0
   File: 16-editorial-articles.css

   Applies only to:
   

   Purpose:
   - Body Reflections individual reading pages
   - Volume I / II / future volumes
   - Calm editorial reading environment
   - Warm paper surface
   - Stable typography inside existing global CSS system

   Important:
   - GLOBAL component CSS
   - NOT article-specific
   - NOT condition-page CSS
   - NOT hub / volume landing CSS

   Minimal !important use:
   Existing 02-typography.css defines global headings with
   !important. Scoped heading overrides below therefore use
   !important only where needed to prevent cascade conflicts.
========================================================= */


/* =========================================================
   01 — ARTICLE TOKENS
========================================================= */

#main-content.jrt-editorial-article {
  --jrt-article-ink:
    var(--jrt-green-dark, #294742);

  --jrt-article-text:
    #34433e;

  --jrt-article-muted:
    #6e7974;

  --jrt-article-soft:
    #87918c;

  --jrt-article-gold:
    var(--jrt-gold, #b49758);

  --jrt-article-paper:
    #f6f1e8;

  --jrt-article-paper-light:
    #faf7f1;

  --jrt-article-paper-deep:
    #eee8dd;

  --jrt-article-sage:
    #edf0e9;

  --jrt-article-line:
    rgba(41, 71, 66, 0.13);

  --jrt-article-line-strong:
    rgba(41, 71, 66, 0.20);

  --jrt-article-shell:
    900px;

  --jrt-article-reading:
    68ch;

  --jrt-article-narrow:
    640px;

  --jrt-article-gutter:
    clamp(20px, 5vw, 48px);

  --jrt-article-serif:
    var(--jrt-font-heading, Alice, Georgia, serif);

  --jrt-article-body:
    var(--jrt-font-body, Inter, Arial, sans-serif);

  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0 0 clamp(72px, 8vw, 110px);

  color: var(--jrt-article-text);
  background: var(--jrt-article-paper);

  font-size: 18px;
  line-height: 1.84;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  overflow-x: clip;
}


/* =========================================================
   02 — DIVI OUTER SURFACE NORMALIZATION
   Prevent white Divi wrappers around article pages
========================================================= */

body:has(#main-content.jrt-editorial-article),
.et_pb_section:has(#main-content.jrt-editorial-article),
.et_pb_row:has(#main-content.jrt-editorial-article),
.et_pb_column:has(#main-content.jrt-editorial-article),
.et_pb_module:has(#main-content.jrt-editorial-article),
.et_pb_code:has(#main-content.jrt-editorial-article),
.et_pb_code_inner:has(#main-content.jrt-editorial-article),
.et_pb_text:has(#main-content.jrt-editorial-article),
.et_pb_text_inner:has(#main-content.jrt-editorial-article) {
  background:
    var(--jrt-article-paper, #f6f1e8);
}


/* Remove Divi spacing around the article root */

.et_pb_section:has(#main-content.jrt-editorial-article),
.et_pb_row:has(#main-content.jrt-editorial-article),
.et_pb_column:has(#main-content.jrt-editorial-article),
.et_pb_module:has(#main-content.jrt-editorial-article) {
  padding-top: 0;
  padding-bottom: 0;

  margin-top: 0;
  margin-bottom: 0;
}


/* Let the article itself control width */

.et_pb_row:has(#main-content.jrt-editorial-article),
.et_pb_module:has(#main-content.jrt-editorial-article),
.et_pb_code:has(#main-content.jrt-editorial-article),
.et_pb_code_inner:has(#main-content.jrt-editorial-article) {
  width: 100%;
  max-width: none;
}


/* =========================================================
   03 — BOX MODEL
========================================================= */

#main-content.jrt-editorial-article *,
#main-content.jrt-editorial-article *::before,
#main-content.jrt-editorial-article *::after {
  box-sizing: border-box;
}


/* =========================================================
   04 — SHARED ARTICLE WIDTHS
========================================================= */

#main-content.jrt-editorial-article
:is(
  .jrt-editorial-article__breadcrumb,
  .jrt-editorial-article__hero,
  .jrt-editorial-article__volume,
  .jrt-editorial-article__return,
  .jrt-editorial-article__note,
  .jrt-editorial-article__author,
  .jrt-editorial-article__explore
) {
  width:
    min(
      calc(100% - (var(--jrt-article-gutter) * 2)),
      var(--jrt-article-shell)
    );

  margin-left: auto;
  margin-right: auto;
}

/* Essay shell aligns with Hero / editorial shell */

#main-content.jrt-editorial-article
.jrt-editorial-article__essay {
  width:
    min(
      calc(100% - (var(--jrt-article-gutter) * 2)),
      var(--jrt-article-shell)
    );

  max-width: var(--jrt-article-shell);

  margin-left: auto;
  margin-right: auto;

  padding-left: 0;
  padding-right: 0;
}

#main-content.jrt-editorial-article
.jrt-editorial-article__essay p {
  max-width: var(--jrt-article-reading);

  margin-left: 0;
  margin-right: auto;
}

/* =========================================================
   05 — LINKS
========================================================= */

#main-content.jrt-editorial-article a {
  color: #2e635b;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color:
    rgba(46, 99, 91, 0.38);
  text-underline-offset: 0.18em;
}

#main-content.jrt-editorial-article a:hover {
  color: var(--jrt-article-ink);
  text-decoration-color:
    currentColor;
}

#main-content.jrt-editorial-article a:focus-visible {
  outline:
    2px solid
    var(--jrt-article-gold);

  outline-offset: 4px;
  border-radius: 2px;
}

/* =========================================================
   06 — BREADCRUMB
   Editorial navigation strip
========================================================= */

#main-content.jrt-editorial-article
.jrt-editorial-article__breadcrumb {
  width:
    min(
      calc(100% - (var(--jrt-article-gutter) * 2)),
      var(--jrt-article-shell)
    );

  margin-left: auto;
  margin-right: auto;

  padding-top:
    clamp(22px, 3vw, 34px);

  padding-bottom:
    clamp(18px, 2.5vw, 26px);

  border-bottom:
    1px solid
    rgba(41, 71, 66, 0.12);

  font-family:
    var(--jrt-article-body);

  font-size:
    0.82rem;

  line-height:
    1.4;

  letter-spacing:
    0.01em;
}


#main-content.jrt-editorial-article
.jrt-editorial-article__breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 0;

  margin: 0;
  padding: 0;

  list-style: none;
}


#main-content.jrt-editorial-article
.jrt-editorial-article__breadcrumb li {
  display: inline-flex;
  align-items: center;

  margin: 0;
  padding: 0;

  color:
    var(--jrt-article-muted);

  white-space: nowrap;
}


#main-content.jrt-editorial-article
.jrt-editorial-article__breadcrumb
li:not(:last-child)::after {
  content: "/";

  display: inline-block;

  margin:
    0
    0.7rem;

  color:
    rgba(110, 121, 116, 0.55);

  font-weight: 400;

  pointer-events: none;
}


#main-content.jrt-editorial-article
.jrt-editorial-article__breadcrumb a {
  color:
    #4f6f68;

  text-decoration: none;

  border-bottom:
    1px solid
    rgba(79, 111, 104, 0.25);

  padding-bottom:
    0.08em;

  transition:
    color 160ms ease,
    border-color 160ms ease;
}


#main-content.jrt-editorial-article
.jrt-editorial-article__breadcrumb a:hover {
  color:
    var(--jrt-article-ink);

  border-bottom-color:
    var(--jrt-article-ink);
}


/* Last item = current structural location */

#main-content.jrt-editorial-article
.jrt-editorial-article__breadcrumb li:last-child a,
#main-content.jrt-editorial-article
.jrt-editorial-article__breadcrumb li:last-child span {
  color:
    var(--jrt-article-ink);

  font-weight:
    500;

  border-bottom-color:
    transparent;
}


/* Mobile */

@media (max-width: 767px) {

  #main-content.jrt-editorial-article
  .jrt-editorial-article__breadcrumb {
    padding-top:
      20px;

    padding-bottom:
      18px;

    font-size:
      0.78rem;
  }


  #main-content.jrt-editorial-article
  .jrt-editorial-article__breadcrumb
  li:not(:last-child)::after {
    margin:
      0
      0.45rem;
  }

}
/* =========================================================
   07 — ARTICLE HERO
========================================================= */

#main-content.jrt-editorial-article
.jrt-editorial-article__hero {
  padding-top:
    clamp(46px, 7vw, 86px);

  padding-bottom:
    clamp(46px, 6vw, 76px);
}


/* Editorial identity */

#main-content.jrt-editorial-article
.jrt-editorial-article__kicker {
  display: flex;
  flex-direction: column;

  gap: 0.55rem;

  margin:
    0
    0
    clamp(26px, 3vw, 38px);
}


#main-content.jrt-editorial-article
.jrt-editorial-article__eyebrow {
  display: block;

  margin: 0;

  color: #486b64;

  font-family:
    var(--jrt-article-body);

  font-size: 0.76rem;
  font-weight: 650;

  line-height: 1.4;

  letter-spacing: 0.15em;

  text-transform: uppercase;
}


#main-content.jrt-editorial-article
.jrt-editorial-article__movement {
  color: var(--jrt-article-muted);

  font-size: 0.96rem;
  line-height: 1.55;
}


/* =========================================================
   08 — H1
========================================================= */

#main-content.jrt-editorial-article
.jrt-editorial-article__title {
  max-width: 12em;

  margin:
    0
    0
    clamp(24px, 3vw, 34px);

  color:
    var(--jrt-article-ink) !important;

  font-family:
    var(--jrt-article-serif) !important;

  font-size:
    clamp(3.15rem, 6vw, 5.65rem) !important;

  font-weight: 400 !important;

  line-height: 0.99 !important;

  letter-spacing:
    -0.045em !important;

  text-wrap: balance;

  overflow-wrap: normal;
}


/* =========================================================
   09 — HERO SUPPORTING COPY
========================================================= */

#main-content.jrt-editorial-article
.jrt-editorial-article__deck {
  max-width: 42rem;

  margin:
    0
    0
    1.45rem;

  color:
    var(--jrt-article-text);

  font-family:
    var(--jrt-article-serif);

  font-size:
    clamp(1.16rem, 1.4vw, 1.35rem);

  line-height: 1.62;

  letter-spacing:
    -0.008em;
}


#main-content.jrt-editorial-article
.jrt-editorial-article__en {
  margin:
    0
    0
    1.75rem;

  color:
    #7c8580;

  font-family:
    var(--jrt-article-serif);

  font-size: 0.98rem;

  font-style: italic;

  line-height: 1.55;
}


#main-content.jrt-editorial-article
.jrt-editorial-article__byline {
  margin: 0;

  color:
    #737e79;

  font-size: 0.92rem;

  line-height: 1.5;
}


/* =========================================================
   10 — ESSAY BODY
========================================================= */

#main-content.jrt-editorial-article
.jrt-editorial-article__essay {
  padding-bottom:
    clamp(54px, 7vw, 86px);

  color:
    var(--jrt-article-text);

  font-size: inherit;

  line-height: 1.88;
}


#main-content.jrt-editorial-article
.jrt-editorial-article__essay p {
  margin:
    0
    0
    1.38em;

  color:
    inherit;

  font-size: inherit;

  line-height: inherit;

  letter-spacing:
    -0.003em;

  text-wrap: pretty;
}


#main-content.jrt-editorial-article
.jrt-editorial-article__essay
p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   11 — ARTICLE H2
   Deliberately stronger than pilot
========================================================= */

#main-content.jrt-editorial-article
.jrt-editorial-article__essay h2 {
  max-width: 16em;

  margin:
    clamp(2.7em, 7vw, 4.5em)
    0
    0.85em;

  color:
    var(--jrt-article-ink) !important;

  font-family:
    var(--jrt-article-serif) !important;

  font-size:
  clamp(
    2.15rem,
    1.7rem + 1.5vw,
    3rem
  ) !important;

line-height: 1.1 !important;
letter-spacing: -0.03em !important;

  font-weight:
    400 !important;

  line-height:
    1.12 !important;

  letter-spacing:
    -0.025em !important;

  text-wrap: balance;
}


/* =========================================================
   12 — ARTICLE H3 / H4
========================================================= */

#main-content.jrt-editorial-article
.jrt-editorial-article__essay h3 {
  margin:
    2.4em
    0
    0.8em;

  color:
    var(--jrt-article-ink) !important;

  font-family:
    var(--jrt-article-serif) !important;

  font-size:
    clamp(1.5rem, 1.25rem + 0.8vw, 1.9rem) !important;

  font-weight:
    400 !important;

  line-height:
    1.18 !important;
}


#main-content.jrt-editorial-article
.jrt-editorial-article__essay h4 {
  margin:
    2em
    0
    0.7em;

  color:
    #4f6963 !important;

  font-family:
    var(--jrt-article-serif) !important;

  font-size:
    clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem) !important;

  font-weight:
    400 !important;

  line-height:
    1.25 !important;
}


/* =========================================================
   13 — LISTS
========================================================= */

#main-content.jrt-editorial-article
.jrt-editorial-article__essay
:is(ul, ol) {
  margin:
    1.4em
    0
    1.7em;

  padding-left:
    1.3em;
}


#main-content.jrt-editorial-article
.jrt-editorial-article__essay li {
  margin:
    0
    0
    0.7em;

  color:
    var(--jrt-article-text);

  font-size:
    inherit;

  line-height:
    1.8;
}


/* =========================================================
   14 — BLOCKQUOTE
========================================================= */

#main-content.jrt-editorial-article
.jrt-editorial-article__essay blockquote {
  margin:
    clamp(2.5rem, 5vw, 4rem)
    0;

  padding:
    0
    0
    0
    clamp(22px, 3vw, 34px);

  border:
    0;

  border-left:
    2px solid
    var(--jrt-article-gold);

  background:
    transparent;
}


#main-content.jrt-editorial-article
.jrt-editorial-article__essay blockquote p {
  margin: 0;

  color:
    var(--jrt-article-ink);

  font-family:
    var(--jrt-article-serif);

  font-size:
    clamp(1.35rem, 2vw, 1.72rem);

  line-height:
    1.48;

  letter-spacing:
    -0.015em;
}


/* =========================================================
   15 — ARTICLE CLOSE
========================================================= */

#main-content.jrt-editorial-article
.jrt-editorial-article__close {
  margin-top:
    clamp(54px, 7vw, 80px);

  padding-top:
    clamp(34px, 4vw, 48px);

  border-top:
    1px solid
    var(--jrt-article-line-strong);
}


#main-content.jrt-editorial-article
.jrt-editorial-article__close p {
  color:
    var(--jrt-article-ink);

  font-family:
    var(--jrt-article-serif);

  font-size:
    clamp(1.22rem, 1.5vw, 1.45rem);

  line-height:
    1.58;

  letter-spacing:
    -0.012em;
}


/* =========================================================
   16 — VOLUME CONTEXT
========================================================= */

#main-content.jrt-editorial-article
.jrt-editorial-article__volume {
  margin-top:
    clamp(18px, 3vw, 28px);

  padding:
    clamp(34px, 4vw, 46px)
    0;

  border-top:
    1px solid
    var(--jrt-article-line);

  border-bottom:
    1px solid
    var(--jrt-article-line);
}


#main-content.jrt-editorial-article
.jrt-editorial-article__volume p {
  margin:
    0
    0
    0.7rem;

  color:
    var(--jrt-article-muted);

  font-size: 0.98rem;

  line-height: 1.7;
}


#main-content.jrt-editorial-article
.jrt-editorial-article__volume
p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   17 — RETURN NAVIGATION
========================================================= */

#main-content.jrt-editorial-article
.jrt-editorial-article__return {
  padding:
    22px
    0
    34px;
}


#main-content.jrt-editorial-article
.jrt-editorial-article__return p {
  margin: 0;

  font-size: 1rem;
}


/* =========================================================
   18 — EDITORIAL / MEDICAL NOTE
========================================================= */

#main-content.jrt-editorial-article
.jrt-editorial-article__note {
  margin-top:
    clamp(22px, 4vw, 36px);

  padding:
    clamp(34px, 5vw, 52px);

  background:
    var(--jrt-article-paper-deep);

  border:
    1px solid
    rgba(41, 71, 66, 0.08);
}


#main-content.jrt-editorial-article
.jrt-editorial-article__note p {
  max-width:
    66ch;

  margin:
    0
    0
    1rem;

  color:
    #65706b;

  font-size:
    0.96rem;

  line-height:
    1.76;
}


#main-content.jrt-editorial-article
.jrt-editorial-article__note
.jrt-editorial-article__eyebrow {
  margin-bottom:
    1.4rem;

  color:
    #526d66;
}


#main-content.jrt-editorial-article
.jrt-editorial-article__note
p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   19 — AUTHOR
========================================================= */

#main-content.jrt-editorial-article
.jrt-editorial-article__author {
  margin-top:
    clamp(26px, 4vw, 40px);

  padding-top:
    clamp(34px, 4vw, 46px);

  border-top:
    1px solid
    var(--jrt-article-line);
}


#main-content.jrt-editorial-article
.jrt-editorial-article__author h2 {
  margin:
    0
    0
    0.85rem;

  color:
    var(--jrt-article-ink) !important;

  font-family:
    var(--jrt-article-serif) !important;

  font-size:
    clamp(
      1.6rem,
      1.3rem + 0.8vw,
      2rem
    ) !important;

  font-weight:
    400 !important;

  line-height:
    1.18 !important;

  letter-spacing:
    -0.018em !important;
}


#main-content.jrt-editorial-article
.jrt-editorial-article__author p {
  margin:
    0
    0
    0.55rem;

  color:
    var(--jrt-article-muted);

  font-size:
    0.96rem;

  line-height:
    1.65;
}


/* =========================================================
   20 — CLINIC EXPLORATION
========================================================= */

#main-content.jrt-editorial-article
.jrt-editorial-article__explore {
  padding-top:
    28px;

  padding-bottom:
    10px;
}


#main-content.jrt-editorial-article
.jrt-editorial-article__explore p {
  margin: 0;

  color:
    var(--jrt-article-muted);

  font-size:
    0.96rem;

  line-height:
    1.7;
}


/* =========================================================
   21 — TABLET
========================================================= */

@media (max-width: 980px) {

  #main-content.jrt-editorial-article {
    --jrt-article-gutter:
      clamp(20px, 6vw, 38px);
  }


  #main-content.jrt-editorial-article
  .jrt-editorial-article__title {
    max-width:
      11em;

    font-size:
      clamp(
        2.9rem,
        8vw,
        4.4rem
      ) !important;
  }


  #main-content.jrt-editorial-article
  .jrt-editorial-article__essay {
    font-size:
      17px;
  }


  #main-content.jrt-editorial-article
  .jrt-editorial-article__essay li {
    font-size:
      17px;
  }

}


/* =========================================================
   22 — MOBILE
========================================================= */

@media (max-width: 767px) {

  #main-content.jrt-editorial-article {
    --jrt-article-gutter:
      20px;

    padding-bottom:
      72px;
  }


  #main-content.jrt-editorial-article
  .jrt-editorial-article__breadcrumb {
    padding-top:
      24px;

    padding-bottom:
      18px;

    font-size:
      0.8rem;
  }


  #main-content.jrt-editorial-article
  .jrt-editorial-article__breadcrumb ol {
    gap:
      0.18rem;
  }


  #main-content.jrt-editorial-article
  .jrt-editorial-article__breadcrumb
  li:not(:last-child)::after {
    margin:
      0
      0.4rem;
  }


  #main-content.jrt-editorial-article
  .jrt-editorial-article__hero {
    padding-top:
      42px;

    padding-bottom:
      52px;
  }


  #main-content.jrt-editorial-article
  .jrt-editorial-article__title {
    max-width:
      100%;

    font-size:
      clamp(
        2.65rem,
        12vw,
        3.65rem
      ) !important;

    line-height:
      1.01 !important;

    letter-spacing:
      -0.04em !important;

    text-wrap:
      balance;
  }


  #main-content.jrt-editorial-article
  .jrt-editorial-article__deck {
    font-size:
      1.12rem;

    line-height:
      1.62;
  }


  #main-content.jrt-editorial-article
  .jrt-editorial-article__essay {
    font-size:
      17px;

    line-height:
      1.83;
  }


  #main-content.jrt-editorial-article
  .jrt-editorial-article__essay p {
    margin-bottom:
      1.28em;
  }


  #main-content.jrt-editorial-article
  .jrt-editorial-article__essay h2 {
    margin-top:
      2.5em;

    font-size:
      clamp(
        1.75rem,
        8.5vw,
        2.25rem
      ) !important;
  }


  #main-content.jrt-editorial-article
  .jrt-editorial-article__essay h3 {
    font-size:
      clamp(
        1.4rem,
        7vw,
        1.75rem
      ) !important;
  }


  #main-content.jrt-editorial-article
  .jrt-editorial-article__note {
    padding:
      30px
      22px;
  }


  #main-content.jrt-editorial-article
  .jrt-editorial-article__author h2 {
    font-size:
      1.65rem !important;
  }

}


/* =========================================================
   23 — SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  #main-content.jrt-editorial-article {
    --jrt-article-gutter:
      17px;
  }


  #main-content.jrt-editorial-article
  .jrt-editorial-article__title {
    font-size:
      clamp(
        2.4rem,
        11.5vw,
        3.15rem
      ) !important;
  }


  #main-content.jrt-editorial-article
  .jrt-editorial-article__breadcrumb
  [aria-current="page"] {
    width:
      100%;

    margin-top:
      0.25rem;
  }

}


/* =========================================================
   24 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  #main-content.jrt-editorial-article *,
  #main-content.jrt-editorial-article *::before,
  #main-content.jrt-editorial-article *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
  }

}


/* =========================================================
   25 — PRINT
========================================================= */

@media print {

  #main-content.jrt-editorial-article {
    width: 100%;
    max-width: none;

    padding: 0;

    background: #fff;

    color: #111;
  }


  #main-content.jrt-editorial-article
  .jrt-editorial-article__breadcrumb,
  #main-content.jrt-editorial-article
  .jrt-editorial-article__return,
  #main-content.jrt-editorial-article
  .jrt-editorial-article__explore {
    display: none;
  }


  #main-content.jrt-editorial-article
  .jrt-editorial-article__essay {
    width: 100%;
    max-width: none;
  }

}