/* =========================================================
   REDOVAR ARTICLES
   Developed by Cavendish Pierre-Louis
   https://cavendishpierrelouis.io

   IMPORTANT:
   This file styles ARTICLE CONTENT ONLY.
   Header, mobile navigation, footer, privacy modal,
   and their responsive behavior remain owned entirely
   by ../../files/css/header-footer.css.
========================================================= */


/* =========================================================
   ARTICLE VARIABLES
========================================================= */

.article-main {
  --article-blue: #0B369A;
  --article-blue-hover: #092F86;

  --article-terra: #C34811;

  --article-text: #171717;
  --article-muted: #6B6B68;
  --article-soft: #8B8B86;

  --article-border: #E7E7E3;
  --article-surface: #F7F7F5;
  --article-white: #FFFFFF;

  --article-radius: 4px;

  --article-shell: 1380px;
  --article-copy-width: 790px;

  --article-gutter:
    clamp(
      24px,
      4.4vw,
      72px
    );

  --article-header-height: 76px;

  --article-ease:
    cubic-bezier(
      .22,
      .61,
      .36,
      1
    );

  width: 100%;

  min-height: 100vh;

  margin: 0;

  overflow: clip;

  background:
    var(--article-white);

  color:
    var(--article-text);

  font-family:
    "Onest",
    "Helvetica Neue",
    Arial,
    sans-serif;

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;
}


/* =========================================================
   PAGE SHELL
========================================================= */

.article-page-shell {
  width: 100%;

  margin: 0;

  padding:
    clamp(
      148px,
      12vw,
      184px
    )
    0
    clamp(
      110px,
      10vw,
      154px
    );

  background:
    var(--article-white);
}


/* =========================================================
   ARTICLE GRID
========================================================= */

.article-layout {
  width:
    min(
      calc(
        100% -
        (var(--article-gutter) * 2)
      ),
      var(--article-shell)
    );

  margin-inline:
    auto;

  display:
    grid;

  grid-template-columns:
    minmax(
      120px,
      .62fr
    )
    minmax(
      0,
      var(--article-copy-width)
    )
    minmax(
      180px,
      .76fr
    );

  gap:
    clamp(
      38px,
      4.8vw,
      70px
    );

  align-items:
    start;
}


/* =========================================================
   CENTER CONTENT
========================================================= */

.article-content {
  grid-column: 2;

  min-width: 0;
}


/* =========================================================
   LEFT RAIL
========================================================= */

.article-rail {
  grid-column: 1;

  position: sticky;

  top:
    calc(
      var(--article-header-height)
      +
      30px
    );

  align-self: start;

  padding:
    6px
    0
    0
    19px;

  display: flex;

  align-items: center;

  gap: 7px;

  color:
    var(--article-soft);

  font-size: 10px;

  font-weight: 550;

  line-height: 1.4;

  letter-spacing: .01em;

  white-space: nowrap;
}


.article-rail::before {
  content: "";

  position: absolute;

  top: 4px;
  left: 0;

  width: 2px;
  height: 112px;

  background:
    repeating-linear-gradient(
      to bottom,
      #DCDCD7 0,
      #DCDCD7 15px,
      transparent 15px,
      transparent 22px
    );
}


.article-rail::after {
  content: "";

  position: absolute;

  top: 4px;
  left: 0;

  width: 2px;
  height:
    calc(
      112px
      *
      var(--article-read-progress, 0)
    );

  background:
    repeating-linear-gradient(
      to bottom,
      var(--article-terra) 0,
      var(--article-terra) 15px,
      transparent 15px,
      transparent 22px
    );

  transition:
    height
    120ms
    ease;
}


.article-rail .article-breadcrumb {
  position: relative;

  width: fit-content;

  color:
    var(--article-muted);

  text-decoration: none;

  cursor: pointer;

  transition:
    color
    170ms
    ease;
}


.article-rail .article-breadcrumb::after {
  content: "";

  position: absolute;

  left: 0;

  bottom: -5px;

  width: 100%;

  height: 1px;

  background:
    var(--article-blue);

  transform:
    scaleX(0);

  transform-origin:
    left;

  transition:
    transform
    180ms
    ease;
}


.article-rail .article-breadcrumb:hover,
.article-rail .article-breadcrumb:focus-visible {
  color:
    var(--article-blue);
}


.article-rail .article-breadcrumb:hover::after,
.article-rail .article-breadcrumb:focus-visible::after {
  transform:
    scaleX(1);
}


.article-rail .article-breadcrumb:focus-visible {
  outline:
    2px solid
    var(--article-blue);

  outline-offset:
    7px;
}


/* =========================================================
   ARTICLE HEAD
========================================================= */

.article-head {
  min-width: 0;
}


.article-date {
  display: block;

  margin:
    0
    0
    12px;

  color:
    var(--article-soft);

  font-size: 11px;

  font-weight: 500;

  letter-spacing: -.01em;

  line-height: 1.4;
}


.article-head h1 {
  max-width: 790px;

  margin: 0;

  color:
    var(--article-text);

  font-size:
    clamp(
      36px,
      3.45vw,
      52px
    );

  font-weight: 500;

  letter-spacing: -.046em;

  line-height: 1.01;

  text-wrap: balance;
}


/* =========================================================
   AUTHOR
========================================================= */

.article-author-row {
  margin:
    clamp(
      20px,
      2.5vw,
      28px
    )
    0
    clamp(
      30px,
      4vw,
      44px
    );

  display: flex;

  align-items: center;

  gap: 9px;

  flex-wrap: wrap;

  color:
    var(--article-soft);

  font-size: 11px;

  font-weight: 500;

  line-height: 1.4;
}


.article-author-avatar {
  flex:
    0
    0
    34px;

  width: 34px;

  height: 34px;

  display: block;

  border-radius: 999px;

  object-fit: cover;

  object-position: center;

  background:
    var(--article-surface);
}


.article-author-name {
  color:
    var(--article-muted);
}


.article-author-divider {
  color:
    #B0B0AC;
}


.article-reading-time {
  color:
    var(--article-soft);
}


/* =========================================================
   ARTICLE COVER
========================================================= */

.article-cover {
  width:
    min(
      100%,
      760px
    );

  margin: 0;

  overflow: hidden;

  border-radius:
    var(--article-radius);

  background:
    var(--article-surface);
}


.article-cover img {
  width: 100%;

  height: auto;

  display: block;

  object-fit: cover;

  object-position: center;
}


/* =========================================================
   SUMMARY
========================================================= */

.article-summary {
  max-width: 720px;

  margin:
    clamp(
      44px,
      5vw,
      64px
    )
    0
    0;

  color:
    var(--article-text);

  font-size:
    clamp(
      19px,
      1.55vw,
      23px
    );

  font-weight: 500;

  letter-spacing: -.026em;

  line-height: 1.4;
}


/* =========================================================
   RIGHT STICKY TABLE OF CONTENTS
========================================================= */

.article-side {
  grid-column: 3;

  position: sticky;

  top:
    calc(
      var(--article-header-height)
      +
      30px
    );

  align-self: start;

  padding-top: 0;
}


.article-toc {
  display: grid;

  gap: 13px;
}


.article-toc p {
  margin:
    0
    0
    6px;

  color:
    var(--article-text);

  font-size: 11px;

  font-weight: 600;

  line-height: 1.4;

  display: flex;

  align-items: center;

  gap: 8px;
}


.article-toc-icon {
  width: 15px;
  height: 15px;

  object-fit: contain;
}


.article-toc a {
  width: fit-content;

  color:
    var(--article-soft);

  font-size: 10.5px;

  font-weight: 500;

  line-height: 1.45;

  text-decoration: none;

  cursor: pointer;

  transition:
    color
    170ms
    ease;
}


.article-toc a:hover,
.article-toc a:focus-visible,
.article-toc a.is-active {
  color:
    var(--article-blue);
}


.article-toc a:focus-visible {
  outline:
    2px solid
    var(--article-blue);

  outline-offset: 6px;
}


/* =========================================================
   ARTICLE BODY
========================================================= */

.article-prose {
  margin-top:
    clamp(
      86px,
      9vw,
      126px
    );
}


.article-section {
  scroll-margin-top:
    calc(
      var(--article-header-height)
      +
      52px
    );
}


.article-section
+
.article-section {
  margin-top:
    clamp(
      88px,
      9vw,
      124px
    );
}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.article-section h2 {
  max-width: 700px;

  margin:
    0
    0
    clamp(
      30px,
      3.6vw,
      42px
    );

  color:
    var(--article-text);

  font-size:
    clamp(
      22px,
      1.8vw,
      28px
    );

  font-weight: 550;

  letter-spacing: -.028em;

  line-height: 1.22;

  text-wrap: balance;
}


/* THIS FIXES THE SPECIFIC SPACING YOU CALLED OUT */

.article-section p + h2 {
  margin-top:
    clamp(
      68px,
      7vw,
      94px
    );
}


/* =========================================================
   PARAGRAPHS
========================================================= */

.article-section p {
  max-width: 700px;

  margin: 0;

  color:
    var(--article-muted);

  font-size:
    clamp(
      16px,
      1.06vw,
      17px
    );

  font-weight: 400;

  letter-spacing: -.006em;

  line-height: 1.84;
}


.article-section p + p {
  margin-top: 28px;
}


/* =========================================================
   LEDE + DROP CAP
========================================================= */

.article-section .article-lede {
  color:
    var(--article-muted);
}


.article-section .article-lede .drop-cap {
  float: left;

  margin:
    .075em
    .13em
    0
    0;

  color:
    var(--article-terra);

  font-size: 5em;

  font-weight: 500;

  letter-spacing: -.08em;

  line-height: .78;
}


/* =========================================================
   LISTS
========================================================= */

.article-section ul {
  max-width: 700px;

  margin:
    32px
    0
    0;

  padding: 0;

  list-style: none;

  display: grid;

  gap: 16px;
}


.article-section li {
  position: relative;

  padding-left: 25px;

  color:
    var(--article-muted);

  font-size:
    clamp(
      16px,
      1.06vw,
      17px
    );

  font-weight: 400;

  line-height: 1.72;
}


.article-section li::before {
  content: "";

  position: absolute;

  left: 2px;

  top: .76em;

  width: 5px;

  height: 5px;

  border-radius: 50%;

  background:
    var(--article-blue);
}


.article-section ul + p {
  margin-top: 32px;
}


/* =========================================================
   ARTICLE ENDING
========================================================= */

.article-ending {
  margin-top:
    clamp(
      58px,
      6vw,
      76px
    );

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

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


/* =========================================================
   ARTICLE ACTIONS
========================================================= */

.article-page-actions {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap:
    clamp(
      28px,
      4vw,
      50px
    );
}


.article-page-action {
  min-height: 46px;

  padding: 0;

  display: inline-flex;

  align-items: center;

  gap: 11px;

  border: 0;

  background: transparent;

  color: var(--article-text);

  font-size: 11px;

  line-height: 1;

  font-weight: 600;

  text-decoration: none;

  cursor: pointer;

  transition:
    color
    150ms
    ease;
}


.article-page-action-icon {
  width: 34px;
  height: 34px;

  display: grid;

  place-items: center;
}


.article-page-action-icon img {
  width: 18px;
  height: 18px;

  object-fit: contain;

  transition:
    filter
    150ms
    ease;
}


.article-page-action:hover,
.article-page-action:focus-visible {
  color: var(--article-blue);

  outline: none;
}


.article-page-action-status {
  color: var(--article-muted);

  font-size: 11px;
}


/* =========================================================
   REVEAL
========================================================= */

[data-article-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 450ms ease,
    transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-article-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* =========================================================
   SMALL DESKTOP / TABLET
========================================================= */

@media (max-width: 1180px) {

  .article-layout {
    width:
      min(
        calc(
          100% -
          (var(--article-gutter) * 2)
        ),
        940px
      );

    grid-template-columns:
      1fr;

    gap: 30px;
  }


  .article-rail,
  .article-content,
  .article-side {
    grid-column: 1;
  }


  .article-rail {
    position: static;

    padding-top: 0;
  }


  .article-side {
    position: static;

    padding-top: 0;
  }


  .article-toc {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );

    gap:
      12px
      24px;

    padding-top: 18px;

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


  .article-toc p {
    grid-column:
      1 / -1;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

  .article-page-shell {
    padding:
      124px
      0
      104px;
  }


  .article-layout {
    width:
      calc(
        100% -
        44px
      );

    gap: 26px;
  }


  /* The article label becomes the same left-aligned sticky reader strip used
     by the mobile policy pages, with its reading indicator directly beneath. */
  .article-rail {
    position: sticky;

    top: var(--header-h, var(--article-header-height));

    z-index: 30;

    width: calc(100% + 44px);

    min-height: 48px;

    margin-left: -22px;

    padding: 12px 22px 18px;

    align-items: center;

    background: rgba(255, 255, 255, .96);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }


  .article-rail::before,
  .article-rail::after {
    top: auto;
    bottom: 8px;

    left: 22px;

    height: 1px;
  }


  .article-rail::before {
    width: calc(100% - 44px);

    background: repeating-linear-gradient(to right, #D7D7D2 0, #D7D7D2 14px, transparent 14px, transparent 23px);
  }


  .article-rail::after {
    width: var(--article-read-progress-width, 0%);

    background: repeating-linear-gradient(to right, var(--article-terra) 0, var(--article-terra) 14px, transparent 14px, transparent 23px);

    transition: width 80ms linear;
  }


  .article-head h1 {
    font-size:
      clamp(
        34px,
        9.4vw,
        46px
      );

    line-height: 1;
  }


  .article-author-row {
    margin-bottom: 30px;
  }


  .article-ending {
    width: calc(100% + 44px);

    margin-left: -22px;

    padding-right: 22px;
    padding-left: 22px;

    text-align: center;
  }


  .article-page-actions {
    justify-content: center;

    gap: 16px 20px;
  }


  .article-page-action-status {
    flex-basis: 100%;

    text-align: center;
  }


  .article-summary {
    font-size:
      clamp(
        18px,
        5vw,
        22px
      );

    line-height: 1.42;
  }


  .article-prose {
    margin-top: 76px;
  }


  .article-section
  +
  .article-section {
    margin-top: 82px;
  }


  .article-section h2 {
    margin-bottom: 28px;

    font-size:
      clamp(
        26px,
        7vw,
        34px
      );
  }


  .article-section p + h2 {
    margin-top:
      68px;
  }


  .article-section p,
  .article-section li {
    font-size: 16px;
  }


  .article-side {
    display: none;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 520px) {

  .article-layout {
    width:
      calc(
        100% -
        40px
      );
  }


  .article-rail {
    width: calc(100% + 40px);

    margin-left: -20px;

    padding-right: 20px;
    padding-left: 20px;
  }


  .article-ending {
    width: calc(100% + 40px);

    margin-left: -20px;

    padding-right: 20px;
    padding-left: 20px;
  }


  .article-rail::before,
  .article-rail::after {
    left: 20px;
  }


  .article-rail::before {
    width: calc(100% - 40px);
  }


  .article-rail::after {
    width: var(--article-read-progress-width, 0%);
  }


  .article-rail {
    flex-wrap: wrap;

    white-space: normal;
  }


  .article-head h1 {
    font-size:
      clamp(
        32px,
        9.5vw,
        42px
      );
  }


  .article-author-row {
    gap: 8px;
  }


  .article-author-avatar {
    flex-basis: 32px;

    width: 32px;

    height: 32px;
  }


  .article-cover {
    width: 100%;
  }


  .article-summary {
    margin-top: 38px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

  .article-main {
    scroll-behavior: auto;
  }


  .article-rail .article-breadcrumb::after,
  .article-toc a,
  .article-page-action,
  .article-page-action-icon img,
  [data-article-reveal] {
    transition: none;
  }


  [data-article-reveal] {
    opacity: 1;

    transform: none;
  }

}