/* =========================================================
   JRT GLOBAL EDITORIAL ESSAY SYSTEM
   Version 1.0
   File: 13-editorial-essay.css

   Purpose:
   - Body Reflections single essays
   - Volume I / Volume II reflections
   - Long-form editorial reading pages
   - Editorial essay navigation
   - Clinical-editorial bridges

   Canonical root:

   <main
     id="main-content"
     class="
       jrt-condition
       jrt-condition--editorial
       jrt-editorial-essay
       jrt-editorial-essay--volume-i
     "
   >

   Design principle:
   - Editorial, not blog-like
   - Quiet long-form reading
   - Strong hierarchy
   - Generous but controlled spacing
   - Reusable across all essays
   - Fully scoped to .jrt-editorial-essay

   Depends on:
   - 00-variables.css
   - 01-base.css
   - 02-typography.css
   - 04-links.css
   - 05-components.css
   - 09-condition-pages.css
========================================================= */


/* =========================================================
   00 — ESSAY ROOT TOKENS
========================================================= */

main#main-content.jrt-editorial-essay {
  --jrt-essay-max: 1180px;
  --jrt-essay-reading-max: 760px;
  --jrt-essay-narrow-max: 660px;

  --jrt-essay-green:
    var(
      --jrt-condition-green,
      var(--jrt-green-dark, #294844)
    );

  --jrt-essay-green-mid:
    var(
      --jrt-condition-green-mid,
      var(--jrt-green, #345b53)
    );

  --jrt-essay-gold:
    var(
      --jrt-condition-gold,
      var(--jrt-gold, #b69752)
    );

  --jrt-essay-gold-light:
    var(
      --jrt-condition-gold-light,
      var(--jrt-gold-light, #d8ba70)
    );

  --jrt-essay-wine:
    var(
      --jrt-condition-wine,
      var(--jrt-wine, #875144)
    );

  --jrt-essay-copy:
    var(
      --jrt-condition-copy,
      var(--jrt-text, #34403b)
    );

  --jrt-essay-muted:
    var(
      --jrt-condition-muted,
      var(--jrt-muted, #65716c)
    );

  --jrt-essay-paper:
    var(
      --jrt-paper,
      var(--jrt-condition-paper, #f3efe8)
    );

  --jrt-essay-paper-light:
    var(
      --jrt-paper-light,
      #f8f4ed
    );

  --jrt-essay-paper-soft:
    var(
      --jrt-paper-soft,
      #ece9e1
    );

  --jrt-essay-sage:
    var(
      --jrt-sage-soft,
      var(--jrt-condition-sage-light, #edf1eb)
    );

  --jrt-essay-sage-medium:
    var(
      --jrt-sage-medium,
      var(--jrt-condition-sage-medium, #dce7df)
    );

  --jrt-essay-dark:
    var(
      --jrt-condition-dark,
      #294844
    );

  --jrt-essay-dark-copy:
    var(
      --jrt-condition-dark-copy,
      rgba(248, 244, 235, 0.82)
    );

  --jrt-essay-line:
    rgba(42, 69, 66, 0.20);

  --jrt-essay-line-soft:
    rgba(42, 69, 66, 0.12);

  --jrt-essay-line-dark:
    rgba(248, 244, 235, 0.18);

  --jrt-essay-section-large:
    clamp(84px, 9vw, 136px);

  --jrt-essay-section-medium:
    clamp(68px, 8vw, 112px);

  --jrt-essay-section-small:
    clamp(54px, 6vw, 82px);

  width: 100%;
  color: var(--jrt-essay-copy);
  background: var(--jrt-essay-paper);
}


/* =========================================================
   01 — BOX SIZING / SAFETY
========================================================= */

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

main#main-content.jrt-editorial-essay {
  overflow-wrap: break-word;
}

main#main-content.jrt-editorial-essay img {
  max-width: 100%;
  height: auto;
}


/* =========================================================
   02 — ESSAY CONTAINERS
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-container--essay {
  width: min(
    calc(100% - clamp(36px, 8vw, 120px)),
    var(--jrt-essay-reading-max)
  );
  margin-inline: auto;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-container--essay-narrow {
  width: min(
    calc(100% - clamp(36px, 8vw, 120px)),
    var(--jrt-essay-narrow-max)
  );
  margin-inline: auto;
}


/* =========================================================
   03 — ESSAY SECTION RHYTHM
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-section {
  position: relative;
  padding-block: var(--jrt-essay-section-large);
}

main#main-content.jrt-editorial-essay
.jrt-editorial-section--medium {
  padding-block: var(--jrt-essay-section-medium);
}

main#main-content.jrt-editorial-essay
.jrt-editorial-section--compact {
  padding-block: var(--jrt-essay-section-small);
}


/* =========================================================
   04 — ESSAY SURFACES
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-section--white {
  background: var(--jrt-essay-paper-light);
}

main#main-content.jrt-editorial-essay
.jrt-editorial-section--paper {
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(182, 151, 82, 0.08),
      transparent 34%
    ),
    var(--jrt-essay-paper);
}

main#main-content.jrt-editorial-essay
.jrt-editorial-section--soft {
  background: var(--jrt-essay-paper-soft);
}

main#main-content.jrt-editorial-essay
.jrt-editorial-section--sage {
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(182, 151, 82, 0.08),
      transparent 35%
    ),
    var(--jrt-essay-sage);
}

main#main-content.jrt-editorial-essay
.jrt-editorial-section--sage-medium {
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(182, 151, 82, 0.10),
      transparent 34%
    ),
    var(--jrt-essay-sage-medium);
}

main#main-content.jrt-editorial-essay
.jrt-editorial-section--dark {
  color: var(--jrt-essay-dark-copy);
  background:
    radial-gradient(
      circle at 86% 14%,
      rgba(216, 186, 112, 0.12),
      transparent 34%
    ),
    var(--jrt-essay-dark);
}


/* =========================================================
   05 — ESSAY HERO
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero {
  position: relative;
  padding:
    clamp(30px, 4vw, 52px)
    0
    clamp(76px, 10vw, 144px);
  overflow: hidden;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero__top,
main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero__meta,
main#main-content.jrt-editorial-essay
.jrt-editorial-essay-author {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;

  color: rgba(42, 69, 66, 0.62);
  -webkit-text-fill-color:
    rgba(42, 69, 66, 0.62);

  font-family:
    var(--jrt-font-sans, Arial, sans-serif);

  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero__grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.52fr)
    minmax(270px, 0.7fr);

  gap: clamp(52px, 9vw, 126px);
  align-items: end;

  padding:
    clamp(64px, 9vw, 126px)
    0
    clamp(52px, 7vw, 92px);
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero__content {
  min-width: 0;
  max-width: 880px;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero h1 {
  max-width: 12em;
  margin:
    0
    0
    clamp(26px, 4vw, 42px);

  color: var(--jrt-essay-green);
  -webkit-text-fill-color:
    var(--jrt-essay-green);

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

  font-size:
    clamp(3.25rem, 6.8vw, 6.8rem);

  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.052em;
  text-wrap: balance;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero__lead {
  max-width: 700px;
  margin: 0;

  color: var(--jrt-essay-copy);
  -webkit-text-fill-color:
    var(--jrt-essay-copy);

  font-size:
    clamp(1.08rem, 1.7vw, 1.34rem);

  line-height: 1.75;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero__aside {
  min-width: 0;
  padding-left:
    clamp(24px, 4vw, 44px);

  border-left:
    1px solid
    rgba(154, 107, 73, 0.50);
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero__aside blockquote {
  margin:
    0
    0
    1.5rem;

  padding: 0;
  border: 0;
  background: transparent;

  color: var(--jrt-essay-green);
  -webkit-text-fill-color:
    var(--jrt-essay-green);

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

  font-size:
    clamp(1.75rem, 3.1vw, 2.8rem);

  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.03em;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero__aside
> p:not(.jrt-editorial-eyebrow) {
  margin:
    0
    0
    1.2rem;

  color: var(--jrt-essay-muted);
  -webkit-text-fill-color:
    var(--jrt-essay-muted);

  line-height: 1.72;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero__footer {
  padding-top:
    clamp(26px, 4vw, 42px);

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


/* =========================================================
   06 — EDITORIAL EYEBROW
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-eyebrow {
  margin:
    0
    0
    18px;

  color: var(--jrt-essay-gold);
  -webkit-text-fill-color:
    var(--jrt-essay-gold);

  font-family:
    var(--jrt-font-sans, Arial, sans-serif);

  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-section--dark
.jrt-editorial-eyebrow {
  color: var(--jrt-essay-gold-light);
  -webkit-text-fill-color:
    var(--jrt-essay-gold-light);
}


/* =========================================================
   07 — ESSAY BODY
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-body {
  color: var(--jrt-essay-copy);
  font-size:
    clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.9;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-body
> *:first-child {
  margin-top: 0;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-body
> *:last-child {
  margin-bottom: 0;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-body p {
  max-width: 100%;
  margin:
    0
    0
    1.55em;

  color: inherit;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-body
a:not(.jrt-editorial-button) {
  color: var(--jrt-essay-green-mid);
  -webkit-text-fill-color:
    var(--jrt-essay-green-mid);

  text-decoration: underline;
  text-decoration-color:
    rgba(52, 91, 83, 0.38);
  text-underline-offset: 0.18em;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-body
a:not(.jrt-editorial-button):hover,
main#main-content.jrt-editorial-essay
.jrt-editorial-essay-body
a:not(.jrt-editorial-button):focus-visible {
  color: var(--jrt-essay-wine);
  -webkit-text-fill-color:
    var(--jrt-essay-wine);
}


/* =========================================================
   08 — OPENING PARAGRAPH
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-body__opening {
  margin-bottom:
    clamp(34px, 5vw, 54px);

  color: var(--jrt-essay-green);
  -webkit-text-fill-color:
    var(--jrt-essay-green);

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

  font-size:
    clamp(1.85rem, 3.3vw, 3rem);

  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-body__emphasis {
  margin:
    clamp(38px, 6vw, 62px)
    0;

  color: var(--jrt-essay-green);
  -webkit-text-fill-color:
    var(--jrt-essay-green);

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

  font-size:
    clamp(1.55rem, 2.7vw, 2.25rem);

  font-weight: 400;
  line-height: 1.43;
  letter-spacing: -0.025em;
}


/* =========================================================
   09 — ESSAY INTERLUDE HEADINGS
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-interlude {
  max-width: 820px;
  margin-bottom:
    clamp(38px, 6vw, 66px);
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-interlude h2 {
  max-width: 13em;
  margin: 0;

  color: var(--jrt-essay-green);
  -webkit-text-fill-color:
    var(--jrt-essay-green);

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

  font-size:
    clamp(2.25rem, 4.7vw, 4.5rem);

  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.043em;
  text-wrap: balance;
}


/* =========================================================
   10 — SHORT SENTENCE LIST
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-list {
  margin:
    clamp(38px, 6vw, 64px)
    0;

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

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

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

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-list p {
  margin: 0;
  padding:
    0.55rem
    0;

  color: var(--jrt-essay-green);
  -webkit-text-fill-color:
    var(--jrt-essay-green);

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

  font-size:
    clamp(1.3rem, 2.3vw, 1.85rem);

  font-weight: 400;
  line-height: 1.42;
  letter-spacing: -0.02em;
}


/* =========================================================
   11 — PULL QUOTE
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-pullquote {
  margin:
    clamp(52px, 8vw, 88px)
    0;

  padding:
    8px
    0
    8px
    clamp(24px, 4vw, 48px);

  background: transparent;
  border: 0;
  border-left:
    2px solid
    rgba(154, 107, 73, 0.68);

  color: var(--jrt-essay-green);
  -webkit-text-fill-color:
    var(--jrt-essay-green);

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

  font-size:
    clamp(1.8rem, 3.7vw, 3.25rem);

  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.035em;
}


/* =========================================================
   12 — DARK EDITORIAL STATEMENT
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-statement {
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-statement h2 {
  max-width: 14em;
  margin:
    0
    auto
    clamp(32px, 6vw, 58px);

  color: #f8f4eb;
  -webkit-text-fill-color: #f8f4eb;

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

  font-size:
    clamp(2.5rem, 5vw, 5rem);

  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-statement
> p:not(.jrt-editorial-eyebrow) {
  max-width: 680px;
  margin:
    0
    auto
    1.25rem;

  color: var(--jrt-essay-dark-copy);
  -webkit-text-fill-color:
    var(--jrt-essay-dark-copy);

  line-height: 1.78;
}


/* =========================================================
   13 — PROTECTION / LIFE PAIRS
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-pairs {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  margin-top:
    clamp(42px, 7vw, 74px);

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

  border-left:
    1px solid
    var(--jrt-essay-line);
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-pairs
> div {
  min-height: 190px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding:
    clamp(26px, 4vw, 44px);

  border-right:
    1px solid
    var(--jrt-essay-line);

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

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-pairs
span {
  display: block;
  margin-bottom: 1.3rem;

  color: var(--jrt-essay-gold);
  -webkit-text-fill-color:
    var(--jrt-essay-gold);

  font-family:
    var(--jrt-font-sans, Arial, sans-serif);

  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-pairs p {
  margin: 0;

  color: var(--jrt-essay-green);
  -webkit-text-fill-color:
    var(--jrt-essay-green);

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

  font-size:
    clamp(1.4rem, 2.65vw, 2.15rem);

  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.025em;
}


/* =========================================================
   14 — ESSAY CONCLUSION
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-conclusion {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-conclusion h2 {
  max-width: 14em;
  margin:
    0
    auto
    clamp(34px, 6vw, 62px);

  color: var(--jrt-essay-green);
  -webkit-text-fill-color:
    var(--jrt-essay-green);

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

  font-size:
    clamp(2.3rem, 4.6vw, 4.4rem);

  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.043em;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-conclusion blockquote {
  margin:
    0
    0
    clamp(34px, 6vw, 54px);

  padding: 0;
  border: 0;
  background: transparent;

  color: var(--jrt-essay-green);
  -webkit-text-fill-color:
    var(--jrt-essay-green);

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

  font-size:
    clamp(2.1rem, 4.8vw, 4.5rem);

  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-conclusion
> p:last-child {
  margin: 0;

  color: rgba(42, 69, 66, 0.58);
  -webkit-text-fill-color:
    rgba(42, 69, 66, 0.58);

  font-family:
    var(--jrt-font-sans, Arial, sans-serif);

  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


/* =========================================================
   15 — ESSAY NAVIGATION
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-navigation {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

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

  border-left:
    1px solid
    var(--jrt-essay-line);
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-navigation a {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;

  grid-template-areas:
    "label label"
    "title arrow";

  gap:
    12px
    24px;

  min-height: 210px;

  padding:
    clamp(28px, 4vw, 46px);

  color: inherit;
  background: transparent;

  border-right:
    1px solid
    var(--jrt-essay-line);

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

  text-decoration: none !important;

  transition:
    background-color 180ms ease,
    color 180ms ease;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-navigation
a
> span:first-child {
  grid-area: label;

  color: var(--jrt-essay-gold);
  -webkit-text-fill-color:
    var(--jrt-essay-gold);

  font-family:
    var(--jrt-font-sans, Arial, sans-serif);

  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-navigation strong {
  grid-area: title;
  align-self: end;

  color: var(--jrt-essay-green);
  -webkit-text-fill-color:
    var(--jrt-essay-green);

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

  font-size:
    clamp(1.45rem, 2.6vw, 2.2rem);

  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.025em;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-navigation
a
> span:last-child {
  grid-area: arrow;
  align-self: end;

  color: var(--jrt-essay-gold);
  -webkit-text-fill-color:
    var(--jrt-essay-gold);

  font-family: Arial, sans-serif;
  font-size: 1.15rem;

  transition:
    transform 180ms ease;
}

@media (hover: hover) {

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-navigation
  a:hover {
    background:
      rgba(237, 241, 235, 0.62);
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-navigation
  a:hover
  > span:last-child {
    transform: translateX(5px);
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-navigation
  a:hover strong {
    color: var(--jrt-essay-wine);
    -webkit-text-fill-color:
      var(--jrt-essay-wine);
  }

}


/* =========================================================
   16 — ESSAY IMAGE
   Optional global component
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-media {
  width: min(
    calc(100% - clamp(36px, 8vw, 120px)),
    1040px
  );

  margin:
    0
    auto;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-media img {
  display: block;
  width: 100%;
  height: auto;

  object-fit: cover;

  border-radius:
    var(
      --jrt-radius-large,
      var(--jrt-radius-card, 18px)
    );
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-media--landscape img {
  aspect-ratio: 3 / 2;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-media--wide img {
  aspect-ratio: 16 / 9;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-media--portrait {
  max-width: 760px;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-media--portrait img {
  aspect-ratio: 4 / 5;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-media figcaption {
  max-width: 720px;
  margin:
    1rem
    0
    0;

  color: var(--jrt-essay-muted);
  -webkit-text-fill-color:
    var(--jrt-essay-muted);

  font-size: 0.82rem;
  line-height: 1.6;
}


/* =========================================================
   17 — ESSAY NOTE / AUTHOR NOTE
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-note {
  max-width: 720px;
  margin:
    clamp(44px, 7vw, 76px)
    auto
    0;

  padding-top:
    clamp(26px, 4vw, 38px);

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

  text-align: center;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-note p {
  margin: 0;

  color: var(--jrt-essay-muted);
  -webkit-text-fill-color:
    var(--jrt-essay-muted);

  font-size: 0.98rem;
  font-style: italic;
  line-height: 1.8;
}


/* =========================================================
   18 — DARK SURFACE PROTECTION
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-section--dark
:is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6
) {
  color: #f8f4eb !important;
  -webkit-text-fill-color:
    #f8f4eb !important;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-section--dark
:is(
  p,
  li
) {
  color: var(--jrt-essay-dark-copy);
  -webkit-text-fill-color:
    var(--jrt-essay-dark-copy);
}

main#main-content.jrt-editorial-essay
.jrt-editorial-section--dark
a:not(.jrt-editorial-button) {
  color: var(--jrt-essay-gold-light);
  -webkit-text-fill-color:
    var(--jrt-essay-gold-light);
}


/* =========================================================
   19 — ACCESSIBILITY / FOCUS
========================================================= */

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

  outline-offset: 4px;
}

main#main-content.jrt-editorial-essay
blockquote {
  quotes: none;
}


/* =========================================================
   20 — TABLET
========================================================= */

@media (max-width: 980px) {

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-hero__grid {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-hero__content {
    max-width: 820px;
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-hero__aside {
    max-width: 660px;

    padding:
      34px
      0
      0;

    border-top:
      1px solid
      rgba(154, 107, 73, 0.50);

    border-left: 0;
  }

}


/* =========================================================
   21 — MOBILE
========================================================= */

@media (max-width: 767px) {

  main#main-content.jrt-editorial-essay {
    --jrt-essay-section-large:
      clamp(58px, 16vw, 84px);

    --jrt-essay-section-medium:
      clamp(54px, 14vw, 76px);

    --jrt-essay-section-small:
      clamp(48px, 12vw, 68px);
  }


  /* Containers */

  main#main-content.jrt-editorial-essay
  .jrt-editorial-container--essay,
  main#main-content.jrt-editorial-essay
  .jrt-editorial-container--essay-narrow {
    width:
      min(
        calc(100% - 36px),
        620px
      );
  }


  /* Hero */

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-hero {
    padding:
      26px
      0
      70px;
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-hero__top,
  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-hero__footer {
    align-items: flex-start;
    flex-direction: column;
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-hero__grid {
    gap: 40px;

    padding:
      54px
      0
      44px;
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-hero h1 {
    max-width: 100%;

    font-size:
      clamp(2.85rem, 13.5vw, 4.35rem);

    line-height: 1;
    letter-spacing: -0.05em;
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-hero__lead {
    font-size: 1.05rem;
    line-height: 1.72;
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-hero__aside {
    padding-top: 28px;
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-hero__aside blockquote {
    font-size:
      clamp(1.65rem, 8vw, 2.25rem);
  }


  /* Essay text */

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-body {
    font-size: 1rem;
    line-height: 1.84;
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-body__opening {
    font-size:
      clamp(1.65rem, 8vw, 2.35rem);
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-body__emphasis {
    font-size:
      clamp(1.4rem, 6.6vw, 1.9rem);
  }


  /* Interlude */

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-interlude h2 {
    max-width: 100%;

    font-size:
      clamp(2.1rem, 10.5vw, 3.35rem);

    line-height: 1.07;
  }


  /* List */

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-list p {
    font-size:
      clamp(1.2rem, 6.1vw, 1.55rem);
  }


  /* Pull quote */

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-pullquote {
    margin:
      42px
      0;

    padding-left: 22px;

    font-size:
      clamp(1.55rem, 7.5vw, 2.2rem);
  }


  /* Dark statement */

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-statement {
    text-align: left;
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-statement h2 {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;

    font-size:
      clamp(2.2rem, 10.5vw, 3.45rem);

    text-align: left;
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-statement
  > p:not(.jrt-editorial-eyebrow) {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;

    text-align: left;
  }


  /* Pairs */

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-pairs {
    grid-template-columns: 1fr;
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-pairs
  > div {
    min-height: 0;
  }


  /* Conclusion */

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-conclusion {
    text-align: left;
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-conclusion h2,
  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-conclusion blockquote {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;

    text-align: left;
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-conclusion h2 {
    font-size:
      clamp(2.1rem, 10vw, 3.3rem);
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-conclusion blockquote {
    font-size:
      clamp(1.85rem, 9vw, 3rem);
  }


  /* Navigation */

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-navigation {
    grid-template-columns: 1fr;
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-navigation a {
    min-height: 170px;
  }

}


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

@media (max-width: 479px) {

  main#main-content.jrt-editorial-essay
  .jrt-editorial-container--essay,
  main#main-content.jrt-editorial-essay
  .jrt-editorial-container--essay-narrow {
    width:
      calc(100% - 30px);
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-hero h1 {
    font-size:
      clamp(2.65rem, 13vw, 3.8rem);
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-pairs
  > div {
    padding:
      26px
      22px;
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-navigation a {
    padding:
      28px
      22px;
  }

}


/* =========================================================
   23 — REDUCED MOTION
========================================================= */

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

  main#main-content.jrt-editorial-essay *,
  main#main-content.jrt-editorial-essay *::before,
  main#main-content.jrt-editorial-essay *::after {
    scroll-behavior: auto !important;

    transition-duration:
      0.01ms !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;
  }

}


/* =========================================================
   24 — PRINT
========================================================= */

@media print {

  main#main-content.jrt-editorial-essay {
    width: 100% !important;
    margin: 0 !important;

    color: #111;
    background: #fff;
  }

  main#main-content.jrt-editorial-essay
  .jrt-ia,
  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-hero__footer,
  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-navigation,
  main#main-content.jrt-editorial-essay
  .jrt-editorial-volume-next,
  main#main-content.jrt-editorial-essay
  .jrt-editorial-about__actions {
    display: none !important;
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-section,
  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-hero {
    padding:
      32px
      0 !important;

    color: #111 !important;
    background: #fff !important;
  }

  main#main-content.jrt-editorial-essay
  :is(
    h1,
    h2,
    h3,
    p,
    blockquote,
    span,
    strong
  ) {
    color: #111 !important;
    -webkit-text-fill-color:
      #111 !important;
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-hero__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-hero__aside {
    padding:
      24px
      0
      0;

    border-top:
      1px solid #999;

    border-left: 0;
  }

}

/* =========================================================
   EDITORIAL ESSAY HERO v2.1
   Layout stability fix
   Place at the very end of 13-editorial-essay.css
========================================================= */


/* =========================================================
   01 — HERO MUST NOT INHERIT A LARGE HEIGHT
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero--stacked {
  min-height: 0 !important;
  height: auto !important;

  display: block !important;

  padding:
    clamp(28px, 4vw, 48px)
    0
    clamp(72px, 9vw, 120px) !important;
}


/* =========================================================
   02 — FORCE A CONTROLLED CENTERED CONTAINER
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero--stacked
> .jrt-editorial-essay-hero__container {
  position: relative;

  width:
    min(
      calc(100% - clamp(40px, 8vw, 128px)),
      1180px
    ) !important;

  max-width: 1180px !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding-left: 0 !important;
  padding-right: 0 !important;

  transform: none !important;
}


/* =========================================================
   03 — TOP LINE
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero--stacked
.jrt-editorial-essay-hero__top {
  width: 100%;

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

  gap: 24px;

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

  border-bottom:
    1px solid
    rgba(42, 69, 66, 0.14);
}


/* =========================================================
   04 — INTRO WIDTH
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero--stacked
.jrt-editorial-essay-hero__intro {
  width: 100%;
  max-width: 940px;

  margin: 0;

  padding:
    clamp(58px, 8vw, 108px)
    0
    clamp(44px, 6vw, 74px);
}


/* =========================================================
   05 — TITLE
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero--stacked
.jrt-editorial-essay-hero__intro h1 {
  width: auto;
  max-width: 10.5em;

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

  font-size:
    clamp(3.3rem, 6vw, 6.4rem);

  line-height: 0.98;
  letter-spacing: -0.052em;
}


/* =========================================================
   06 — LEAD
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero--stacked
.jrt-editorial-essay-hero__lead {
  width: 100%;
  max-width: 690px;

  margin: 0;

  font-size:
    clamp(1.06rem, 1.45vw, 1.28rem);

  line-height: 1.72;
}


/* =========================================================
   07 — OPTIONAL IMAGE
   Only visible when a real image URL is present
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero__media {
  width: 100%;
  max-width: 100%;

  margin:
    0
    0
    clamp(48px, 7vw, 84px);

  padding: 0;

  overflow: hidden;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero__media img {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 16 / 9;

  object-fit: cover;
}

/* Hide the placeholder automatically. */

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero__media
img[src="REMPLACER-PAR-URL-DE-L-IMAGE"],
main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero__media
img[src=""],
main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero__media
img:not([src]) {
  display: none !important;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero__media:has(
  img[src="REMPLACER-PAR-URL-DE-L-IMAGE"]
),
main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero__media:has(
  img[src=""]
),
main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero__media:not(:has(img[src])) {
  display: none !important;
}


/* =========================================================
   08 — CENTRAL STATEMENT
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero--stacked
.jrt-editorial-essay-hero__statement {
  width: 100%;

  display: grid;
  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(260px, 0.75fr);

  align-items: end;

  gap:
    clamp(42px, 7vw, 92px);

  margin: 0;

  padding:
    clamp(40px, 5vw, 64px)
    0;

  border-top:
    1px solid
    rgba(42, 69, 66, 0.18);

  border-bottom:
    1px solid
    rgba(42, 69, 66, 0.18);
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero__statement
> div {
  min-width: 0;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero__statement blockquote {
  max-width: 760px;

  margin: 0;
  padding: 0;

  background: transparent;
  border: 0;

  font-size:
    clamp(2rem, 3.8vw, 3.9rem);

  line-height: 1.1;
  letter-spacing: -0.04em;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero__statement
> p {
  max-width: 390px;

  margin: 0;

  line-height: 1.72;
}


/* =========================================================
   09 — FOOTER
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero--stacked
.jrt-editorial-essay-hero__footer {
  width: 100%;

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

  gap: 24px;

  padding-top:
    clamp(28px, 4vw, 44px);

  border-top: 0;
}


/* =========================================================
   10 — REMOVE ANY LEGACY HERO GRID EFFECT
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero--stacked
.jrt-editorial-essay-hero__grid {
  display: block !important;

  min-height: 0 !important;

  padding: 0 !important;
  margin: 0 !important;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero--stacked
.jrt-editorial-essay-hero__content {
  width: auto !important;
  max-width: none !important;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero--stacked
.jrt-editorial-essay-hero__aside {
  width: auto !important;
  max-width: none !important;

  padding: 0 !important;

  border: 0 !important;
}


/* =========================================================
   11 — TABLET
========================================================= */

@media (max-width: 980px) {

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-hero--stacked
  .jrt-editorial-essay-hero__statement {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-hero__statement
  > p {
    max-width: 620px;
  }

}


/* =========================================================
   12 — MOBILE
========================================================= */

@media (max-width: 767px) {

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-hero--stacked
  > .jrt-editorial-essay-hero__container {
    width:
      min(
        calc(100% - 36px),
        620px
      ) !important;
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-hero--stacked
  .jrt-editorial-essay-hero__top,
  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-hero--stacked
  .jrt-editorial-essay-hero__footer {
    align-items: flex-start;
    flex-direction: column;
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-hero--stacked
  .jrt-editorial-essay-hero__intro {
    max-width: 100%;

    padding:
      48px
      0
      40px;
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-hero--stacked
  .jrt-editorial-essay-hero__intro h1 {
    max-width: 100%;

    font-size:
      clamp(2.75rem, 13vw, 4.1rem);

    line-height: 1;
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-hero--stacked
  .jrt-editorial-essay-hero__statement {
    padding:
      34px
      0;
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-hero__statement blockquote {
    font-size:
      clamp(1.8rem, 8.5vw, 2.8rem);
  }

}


/* =========================================================
   13 — SMALL MOBILE
========================================================= */

@media (max-width: 479px) {

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-hero--stacked
  > .jrt-editorial-essay-hero__container {
    width:
      calc(100% - 30px) !important;
  }

}

/* =========================================================
   EDITORIAL ESSAY — SHARED LOWER SECTIONS
   Volume navigation, related paths and clinical bridge

   Place at the very end of:
   13-editorial-essay.css
========================================================= */


/* =========================================================
   01 — SHARED EDITORIAL CONTAINER
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-container {
  width:
    min(
      calc(100% - clamp(40px, 8vw, 128px)),
      var(--jrt-essay-max, 1180px)
    );

  max-width:
    var(--jrt-essay-max, 1180px);

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

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


main#main-content.jrt-editorial-essay
.jrt-editorial-container--reading {
  width:
    min(
      calc(100% - clamp(40px, 8vw, 128px)),
      var(--jrt-essay-reading-max, 760px)
    );

  max-width:
    var(--jrt-essay-reading-max, 760px);

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


/* =========================================================
   02 — SECTION HEADING
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-section-heading {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(280px, 0.8fr);

  align-items: end;

  gap:
    clamp(40px, 7vw, 88px);

  margin-bottom:
    clamp(42px, 6vw, 72px);
}


main#main-content.jrt-editorial-essay
.jrt-editorial-section-heading
> div {
  min-width: 0;
}


main#main-content.jrt-editorial-essay
.jrt-editorial-section-heading h2 {
  max-width: 13em;

  margin: 0;

  color:
    var(--jrt-essay-green, #294844);

  -webkit-text-fill-color:
    var(--jrt-essay-green, #294844);

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

  font-size:
    clamp(2.45rem, 4.7vw, 4.7rem);

  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.043em;
  text-wrap: balance;
}


main#main-content.jrt-editorial-essay
.jrt-editorial-section-heading__intro {
  max-width: 520px;

  margin: 0;

  color:
    var(--jrt-essay-muted, #65716c);

  -webkit-text-fill-color:
    var(--jrt-essay-muted, #65716c);

  line-height: 1.76;
}


/* =========================================================
   03 — VOLUME NAVIGATION SECTION
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-navigation {
  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  border-top:
    1px solid
    var(--jrt-essay-line, rgba(42, 69, 66, 0.20));

  border-left:
    1px solid
    var(--jrt-essay-line, rgba(42, 69, 66, 0.20));
}


main#main-content.jrt-editorial-essay
.jrt-editorial-essay-navigation a {
  min-width: 0;
  min-height: 210px;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  grid-template-areas:
    "label label"
    "title arrow";

  align-content: space-between;

  gap:
    16px
    24px;

  padding:
    clamp(30px, 4vw, 48px);

  color: inherit;

  background:
    rgba(248, 244, 237, 0.36);

  border-right:
    1px solid
    var(--jrt-essay-line, rgba(42, 69, 66, 0.20));

  border-bottom:
    1px solid
    var(--jrt-essay-line, rgba(42, 69, 66, 0.20));

  text-decoration: none !important;

  transition:
    background-color 180ms ease,
    transform 180ms ease;
}


main#main-content.jrt-editorial-essay
.jrt-editorial-essay-navigation
a > span:first-child {
  grid-area: label;

  color:
    var(--jrt-essay-gold, #b69752);

  -webkit-text-fill-color:
    var(--jrt-essay-gold, #b69752);

  font-family:
    var(--jrt-font-sans, Arial, sans-serif);

  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


main#main-content.jrt-editorial-essay
.jrt-editorial-essay-navigation strong {
  grid-area: title;

  align-self: end;

  min-width: 0;

  color:
    var(--jrt-essay-green, #294844);

  -webkit-text-fill-color:
    var(--jrt-essay-green, #294844);

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

  font-size:
    clamp(1.5rem, 2.7vw, 2.25rem);

  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.028em;
}


main#main-content.jrt-editorial-essay
.jrt-editorial-essay-navigation
a > span:last-child {
  grid-area: arrow;

  align-self: end;

  color:
    var(--jrt-essay-gold, #b69752);

  -webkit-text-fill-color:
    var(--jrt-essay-gold, #b69752);

  font-family: Arial, sans-serif;
  font-size: 1.15rem;

  transition:
    transform 180ms ease;
}


@media (hover: hover) {

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-navigation a:hover {
    background:
      rgba(237, 241, 235, 0.72);
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-navigation
  a:hover > span:last-child {
    transform: translateX(5px);
  }

}


/* =========================================================
   04 — RELATED PATHS GRID
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-volume-next {
  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  border-top:
    1px solid
    var(--jrt-essay-line, rgba(42, 69, 66, 0.20));

  border-left:
    1px solid
    var(--jrt-essay-line, rgba(42, 69, 66, 0.20));
}


main#main-content.jrt-editorial-essay
.jrt-editorial-volume-next > a {
  min-width: 0;
  min-height: 160px;

  display: grid;

  grid-template-columns:
    42px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap:
    20px;

  padding:
    clamp(26px, 4vw, 42px);

  color: inherit;

  background:
    rgba(248, 244, 237, 0.26);

  border-right:
    1px solid
    var(--jrt-essay-line, rgba(42, 69, 66, 0.20));

  border-bottom:
    1px solid
    var(--jrt-essay-line, rgba(42, 69, 66, 0.20));

  text-decoration: none !important;

  transition:
    background-color 180ms ease;
}


main#main-content.jrt-editorial-essay
.jrt-editorial-volume-next
> a
> span:first-child {
  align-self: start;

  padding-top: 4px;

  color:
    var(--jrt-essay-gold, #b69752);

  -webkit-text-fill-color:
    var(--jrt-essay-gold, #b69752);

  font-family:
    var(--jrt-font-sans, Arial, sans-serif);

  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.14em;
}


main#main-content.jrt-editorial-essay
.jrt-editorial-volume-next
> a
> div {
  min-width: 0;
}


main#main-content.jrt-editorial-essay
.jrt-editorial-volume-next small {
  display: block;

  margin-bottom: 8px;

  color:
    var(--jrt-essay-muted, #65716c);

  -webkit-text-fill-color:
    var(--jrt-essay-muted, #65716c);

  font-family:
    var(--jrt-font-sans, Arial, sans-serif);

  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}


main#main-content.jrt-editorial-essay
.jrt-editorial-volume-next strong {
  display: block;

  color:
    var(--jrt-essay-green, #294844);

  -webkit-text-fill-color:
    var(--jrt-essay-green, #294844);

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

  font-size:
    clamp(1.35rem, 2.35vw, 1.95rem);

  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.025em;
}


main#main-content.jrt-editorial-essay
.jrt-editorial-volume-next
> a
> span:last-child {
  color:
    var(--jrt-essay-gold, #b69752);

  -webkit-text-fill-color:
    var(--jrt-essay-gold, #b69752);

  font-family: Arial, sans-serif;

  transition:
    transform 180ms ease;
}


@media (hover: hover) {

  main#main-content.jrt-editorial-essay
  .jrt-editorial-volume-next > a:hover {
    background:
      rgba(237, 241, 235, 0.72);
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-volume-next
  > a:hover
  > span:last-child {
    transform: translateX(5px);
  }

}


/* =========================================================
   05 — CLINICAL BRIDGE SURFACE
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-section--clinic {
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(182, 151, 82, 0.08),
      transparent 34%
    ),
    var(--jrt-essay-sage, #edf1eb);
}


main#main-content.jrt-editorial-essay
.jrt-editorial-about {
  max-width: 840px;

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

  text-align: center;
}


main#main-content.jrt-editorial-essay
.jrt-editorial-about h2 {
  max-width: 13em;

  margin:
    0
    auto
    clamp(28px, 4vw, 42px);

  color:
    var(--jrt-essay-green, #294844);

  -webkit-text-fill-color:
    var(--jrt-essay-green, #294844);

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

  font-size:
    clamp(2.45rem, 4.7vw, 4.6rem);

  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.043em;
  text-wrap: balance;
}


main#main-content.jrt-editorial-essay
.jrt-editorial-about__lead {
  max-width: 680px;

  margin:
    0
    auto
    1.4rem;

  color:
    var(--jrt-essay-green-mid, #345b53);

  -webkit-text-fill-color:
    var(--jrt-essay-green-mid, #345b53);

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

  font-size:
    clamp(1.25rem, 2vw, 1.7rem);

  line-height: 1.5;
}


main#main-content.jrt-editorial-essay
.jrt-editorial-about
> p:not(
  .jrt-editorial-eyebrow,
  .jrt-editorial-about__lead
) {
  max-width: 660px;

  margin:
    0
    auto;

  color:
    var(--jrt-essay-muted, #65716c);

  -webkit-text-fill-color:
    var(--jrt-essay-muted, #65716c);

  line-height: 1.78;
}


main#main-content.jrt-editorial-essay
.jrt-editorial-about__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  gap:
    14px;

  margin-top:
    clamp(30px, 5vw, 46px);
}


/* =========================================================
   06 — BUTTON PROTECTION
========================================================= */

main#main-content.jrt-editorial-essay
.jrt-editorial-about__actions
.jrt-editorial-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 48px;

  padding:
    13px
    22px;

  border-radius: 999px;

  font-family:
    var(--jrt-font-sans, Arial, sans-serif);

  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;

  text-decoration: none !important;
}


main#main-content.jrt-editorial-essay
.jrt-editorial-about__actions
.jrt-editorial-button--primary {
  color:
    #ffffff !important;

  -webkit-text-fill-color:
    #ffffff !important;

  background:
    var(--jrt-essay-green, #294844);

  border:
    1px solid
    var(--jrt-essay-green, #294844);
}


main#main-content.jrt-editorial-essay
.jrt-editorial-about__actions
.jrt-editorial-button--outline {
  color:
    var(--jrt-essay-green, #294844) !important;

  -webkit-text-fill-color:
    var(--jrt-essay-green, #294844) !important;

  background:
    transparent;

  border:
    1px solid
    rgba(42, 69, 66, 0.34);
}


/* =========================================================
   07 — TABLET
========================================================= */

@media (max-width: 980px) {

  main#main-content.jrt-editorial-essay
  .jrt-editorial-section-heading {
    grid-template-columns: 1fr;

    align-items: start;

    gap: 20px;
  }


  main#main-content.jrt-editorial-essay
  .jrt-editorial-section-heading__intro {
    max-width: 680px;
  }

}


/* =========================================================
   08 — MOBILE
========================================================= */

@media (max-width: 767px) {

  main#main-content.jrt-editorial-essay
  .jrt-editorial-container,
  main#main-content.jrt-editorial-essay
  .jrt-editorial-container--reading {
    width:
      min(
        calc(100% - 36px),
        620px
      );
  }


  main#main-content.jrt-editorial-essay
  .jrt-editorial-section-heading {
    margin-bottom: 34px;
  }


  main#main-content.jrt-editorial-essay
  .jrt-editorial-section-heading h2 {
    max-width: 100%;

    font-size:
      clamp(2.15rem, 10.5vw, 3.3rem);
  }


  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-navigation,
  main#main-content.jrt-editorial-essay
  .jrt-editorial-volume-next {
    grid-template-columns: 1fr;
  }


  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-navigation a {
    min-height: 165px;
  }


  main#main-content.jrt-editorial-essay
  .jrt-editorial-volume-next > a {
    min-height: 0;

    grid-template-columns:
      34px
      minmax(0, 1fr)
      auto;

    gap:
      14px;

    padding:
      26px
      20px;
  }


  main#main-content.jrt-editorial-essay
  .jrt-editorial-about {
    text-align: left;
  }


  main#main-content.jrt-editorial-essay
  .jrt-editorial-about h2,
  main#main-content.jrt-editorial-essay
  .jrt-editorial-about__lead,
  main#main-content.jrt-editorial-essay
  .jrt-editorial-about
  > p:not(
    .jrt-editorial-eyebrow,
    .jrt-editorial-about__lead
  ) {
    max-width: 100%;

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


  main#main-content.jrt-editorial-essay
  .jrt-editorial-about h2 {
    font-size:
      clamp(2.15rem, 10.5vw, 3.35rem);
  }


  main#main-content.jrt-editorial-essay
  .jrt-editorial-about__actions {
    display: grid;
    grid-template-columns: 1fr;

    justify-content: stretch;
  }


  main#main-content.jrt-editorial-essay
  .jrt-editorial-about__actions
  .jrt-editorial-button {
    width: 100%;
  }

}


/* =========================================================
   09 — SMALL MOBILE
========================================================= */

@media (max-width: 479px) {

  main#main-content.jrt-editorial-essay
  .jrt-editorial-container,
  main#main-content.jrt-editorial-essay
  .jrt-editorial-container--reading {
    width:
      calc(100% - 30px);
  }

}

/* =========================================================
   V1.1 — JRT TYPOGRAPHY V5.1
   Long-form Readability Edition
========================================================= */

main#main-content.jrt-editorial-essay {
  --jrt-essay-reading-max: 780px;
}


/* Hero supporting copy */

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero__lead {
  font-size: clamp(1.16rem, 1.7vw, 1.4rem);
  line-height: 1.8;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero__aside
> p:not(.jrt-editorial-eyebrow),
main#main-content.jrt-editorial-essay
.jrt-editorial-essay-hero__statement > p {
  font-size: 1.05rem;
  line-height: 1.8;
}


/* Main essay text */

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-body {
  font-size: clamp(1.125rem, 1.45vw, 1.25rem);
  line-height: 1.92;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-body p {
  margin-bottom: 1.6em;
}


/* Supporting paragraphs */

main#main-content.jrt-editorial-essay :is(
  .jrt-editorial-essay-statement > p:not(.jrt-editorial-eyebrow),
  .jrt-editorial-about > p:not(
    .jrt-editorial-eyebrow,
    .jrt-editorial-about__lead
  ),
  .jrt-editorial-section-heading__intro
) {
  font-size: 1.06rem;
  line-height: 1.84;
}


/* Captions and author notes */

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-media figcaption {
  font-size: 0.94rem;
  line-height: 1.7;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-note p {
  font-size: 1.04rem;
  line-height: 1.84;
}


/* Micro typography */

main#main-content.jrt-editorial-essay
.jrt-editorial-eyebrow {
  font-size: 0.78rem;
  line-height: 1.5;
}

main#main-content.jrt-editorial-essay :is(
  .jrt-editorial-essay-hero__meta,
  .jrt-editorial-essay-author
) {
  font-size: 0.76rem;
}

main#main-content.jrt-editorial-essay
.jrt-editorial-essay-pairs span,
main#main-content.jrt-editorial-essay
.jrt-editorial-essay-navigation a > span:first-child,
main#main-content.jrt-editorial-essay
.jrt-editorial-volume-next > a > span:first-child,
main#main-content.jrt-editorial-essay
.jrt-editorial-volume-next small {
  font-size: 0.75rem;
}


/* Buttons */

main#main-content.jrt-editorial-essay
.jrt-editorial-about__actions
.jrt-editorial-button {
  font-size: 0.88rem;
}


/* Mobile */

@media (max-width: 767px) {

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-body {
    font-size: 17px;
    line-height: 1.88;
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-hero__lead,
  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-hero__aside
  > p:not(.jrt-editorial-eyebrow),
  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-hero__statement > p,
  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-statement
  > p:not(.jrt-editorial-eyebrow),
  main#main-content.jrt-editorial-essay
  .jrt-editorial-about
  > p:not(
    .jrt-editorial-eyebrow,
    .jrt-editorial-about__lead
  ),
  main#main-content.jrt-editorial-essay
  .jrt-editorial-section-heading__intro {
    font-size: 17px;
    line-height: 1.8;
  }

  main#main-content.jrt-editorial-essay
  .jrt-editorial-essay-media figcaption {
    font-size: 15px;
  }

}