/* ==========================================================
   ARTICLE DETAIL
========================================================== */


/* ==========================================================
   READING PROGRESS
========================================================== */

.reading-progress {
  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  z-index: 9999;

  height: 3px;

  pointer-events: none;
}

.reading-progress span {
  display: block;

  width: 0;
  height: 100%;

  background: var(--blue-600);

  transform-origin: left center;
}


/* ==========================================================
   ARTICLE HEADER
========================================================== */

.article-header {
  position: relative;

  padding:
    clamp(75px, 9vw, 130px) var(--gutter) clamp(65px, 8vw, 105px);

  overflow: hidden;

  background: var(--surface);
}

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

  position: absolute;

  top: 0;
  right: 8%;

  width: 1px;
  height: 100%;

  background:
    rgba(15, 23, 42, .045);
}

.article-header-grid {
  width: min(100%,
      var(--container));

  margin-inline: auto;

  display: grid;

  grid-template-columns:
    145px minmax(0, 930px);

  gap:
    clamp(45px, 7vw, 100px);
}


/* Rail */

.article-header-rail {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding-top: 12px;

  color: #94a3b8;
}

.article-number {
  font-family: var(--font-display);

  font-size: 1.25rem;
  font-weight: 600;

  color: var(--blue-600);
}

.article-rail-line {
  width: 1px;
  height: 80px;

  margin: 18px 0;

  background: #cbd5e1;
}

.article-header-rail span:last-child {
  writing-mode: vertical-rl;

  font-size: .58rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: .13em;
}


/* Breadcrumb */

.article-breadcrumb {
  margin-bottom: 28px;

  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 9px;

  font-size: .65rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: .08em;

  color: #94a3b8;
}

.article-breadcrumb a {
  transition:
    color var(--transition);
}

.article-breadcrumb a:hover {
  color: var(--blue-600);
}

.article-breadcrumb span {
  color: #cbd5e1;
}


/* Heading */

.article-heading h1 {
  max-width: 1050px;

  margin-bottom: 30px;

  font-family: var(--font-display);

  font-size:
    clamp(3rem, 5.6vw, 6rem);

  font-weight: 600;

  line-height: .99;
  letter-spacing: -.045em;

  color: var(--navy-900);
}

.article-deck {
  max-width: 790px;

  margin-bottom: 35px;

  font-size:
    clamp(1.05rem, 1.55vw, 1.3rem);

  line-height: 1.65;

  color: #64748b;
}


/* Byline */

.article-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 13px;

  padding-top: 25px;

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

  font-size: .68rem;

  color: #64748b;
}

.article-author-info {
  display: flex;
  align-items: center;

  gap: 5px;
}

.article-author-info span {
  color: #94a3b8;
}

.article-author-info strong {
  color: var(--navy-900);
}

.byline-divider {
  width: 3px;
  height: 3px;

  border-radius: 50%;

  background: #cbd5e1;
}


/* ==========================================================
   FEATURE IMAGE
========================================================== */

.article-feature-wrapper {
  padding:
    0 var(--gutter);

  background:
    linear-gradient(to bottom,
      var(--surface) 50%,
      white 50%);
}

.article-feature-image {
  width: min(100%,
      var(--container));

  margin: 0 auto;

  position: relative;
}

.article-feature-image img {
  width: 100%;

  max-height: 760px;

  object-fit: cover;
}

.article-feature-image figcaption {
  margin-top: 10px;

  text-align: right;

  font-size: .6rem;
  line-height: 1.5;

  color: #94a3b8;
}


/* ==========================================================
   BODY LAYOUT
========================================================== */

.article-body-section {
  padding:
    clamp(70px, 9vw, 125px) var(--gutter) clamp(85px, 10vw, 140px);

  background: white;
}

.article-body-layout {
  width: min(100%,
      1120px);

  margin-inline: auto;

  display: grid;

  grid-template-columns:
    70px minmax(0, 740px) 190px;

  align-items: start;

  gap:
    clamp(30px, 5vw, 60px);
}


/* ==========================================================
   SHARE RAIL
========================================================== */

.article-share-rail {
  position: sticky;

  top: 140px;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 9px;
}

.share-label {
  margin-bottom: 7px;

  font-size: .56rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: .1em;

  color: #94a3b8;
}

.share-button {
  width: 38px;
  height: 38px;

  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid #e2e8f0;

  border-radius: 50%;

  color: #64748b;
  background: white;

  font-size: .67rem;
  font-weight: 700;

  transition:
    color var(--transition),
    border-color var(--transition),
    background var(--transition),
    transform var(--transition);
}

.share-button svg {
  width: 15px;
}

.share-button:hover {
  color: white;
  background: var(--navy-900);

  border-color: var(--navy-900);

  transform: translateY(-2px);
}

.copy-status {
  min-height: 16px;

  margin-top: 5px;

  font-size: .55rem;

  color: var(--blue-600);
}


/* ==========================================================
   ARTICLE CONTENT
========================================================== */

.article-content {
  min-width: 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(1.05rem, 1.3vw, 1.16rem);

  line-height: 1.9;

  color: #334155;
}

.article-content>*:first-child {
  margin-top: 0;
}


/* Drop cap */

.article-content>p:first-child::first-letter {
  float: left;

  margin:
    .08em .11em 0 0;

  font-family: var(--font-display);

  font-size: 4.6em;
  font-weight: 600;

  line-height: .76;

  color: var(--navy-900);
}


/* Paragraph */

.article-content p {
  margin:
    0 0 1.55em;
}


/* Headings */

.article-content h2,
.article-content h3,
.article-content h4 {
  font-family: var(--font-display);

  color: var(--navy-900);

  letter-spacing: -.025em;
}

.article-content h2 {
  margin:
    2.1em 0 .75em;

  font-size:
    clamp(1.8rem, 3vw, 2.6rem);

  line-height: 1.15;
}

.article-content h3 {
  margin:
    1.9em 0 .7em;

  font-size:
    clamp(1.4rem, 2.3vw, 1.9rem);

  line-height: 1.2;
}


/* Links */

.article-content a {
  color: var(--blue-600);

  text-decoration:
    underline;

  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}


/* Lists */

.article-content ul,
.article-content ol {
  margin:
    0 0 1.6em;

  padding-left: 1.5em;
}

.article-content li {
  margin-bottom: .65em;

  padding-left: .25em;
}


/* Quotes */

.article-content blockquote {
  position: relative;

  margin:
    2.2em 0;

  padding:
    5px 0 5px 30px;

  border-left:
    3px solid var(--blue-600);

  font-family: var(--font-display);

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

  font-style: italic;

  line-height: 1.45;

  color: var(--navy-900);
}

.article-content blockquote p {
  margin: 0;
}


/* Images */

.article-content figure {
  margin:
    2.5em 0;
}

.article-content img {
  width: 100%;
  height: auto;
}

.article-content figcaption {
  margin-top: 9px;

  font-family: var(--font-body);
  font-size: .65rem;

  line-height: 1.5;

  color: #94a3b8;
}


/* Horizontal rule */

.article-content hr {
  width: 60px;
  height: 1px;

  margin:
    3em auto;

  border: 0;

  background: #cbd5e1;
}


/* Table */

.article-content .table-responsive {
  width: 100%;

  margin:
    2em 0;

  overflow-x: auto;
}

.article-content table {
  width: 100%;

  border-collapse: collapse;

  font-family: var(--font-body);
  font-size: .75rem;
}

.article-content th,
.article-content td {
  padding:
    12px 14px;

  text-align: left;

  border-bottom:
    1px solid #e2e8f0;
}

.article-content th {
  color: var(--navy-900);
  background: #f8fafc;
}


/* ==========================================================
   ARTICLE CONTEXT
========================================================== */

.article-context {
  position: sticky;

  top: 140px;
}

.article-context-inner {
  border-top:
    2px solid var(--navy-900);
}

.context-block {
  padding:
    18px 0;

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

.context-label {
  display: block;

  margin-bottom: 8px;

  font-size: .56rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: .1em;

  color: #94a3b8;
}

.context-block>a,
.context-block>span:not(.context-label) {
  font-size: .68rem;
  font-weight: 600;

  line-height: 1.5;

  color: var(--navy-900);
}

.context-block>a:hover {
  color: var(--blue-600);
}

.context-tags {
  display: flex;
  flex-wrap: wrap;

  gap: 5px;
}

.context-tags a {
  font-size: .62rem;

  color: #64748b;
}

.context-tags a:hover {
  color: var(--blue-600);
}


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

.article-mobile-share {
  display: none;

  padding:
    25px 0;

  background: white;

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

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

.article-mobile-share .reading-container {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;
}

.article-mobile-share .reading-container>span {
  font-size: .65rem;
  font-weight: 700;

  color: var(--navy-900);
}

.article-mobile-share .reading-container>div {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;
}

.article-mobile-share button {
  padding:
    6px 9px;

  border:
    1px solid #e2e8f0;

  background: white;

  font-size: .61rem;
  font-weight: 600;

  color: #64748b;
}


/* ==========================================================
   ARTICLE TAGS
========================================================== */

.article-tags-section {
  padding:
    30px 0 65px;

  background: white;
}

.article-tags-section .reading-container {
  padding-top: 25px;

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

.article-tags-section .reading-container>span {
  display: block;

  margin-bottom: 13px;

  font-size: .58rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: .09em;

  color: #94a3b8;
}

.article-tags {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;
}

.article-tags a {
  padding:
    6px 10px;

  border:
    1px solid #e2e8f0;

  border-radius: 4px;

  font-size: .64rem;
  font-weight: 600;

  color: #64748b;

  transition:
    color var(--transition),
    border-color var(--transition),
    background var(--transition);
}

.article-tags a:hover {
  color: var(--blue-600);

  border-color:
    rgba(37, 99, 235, .25);

  background: #eff6ff;
}


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

.article-author-section {
  padding:
    clamp(65px, 8vw, 100px) 0;

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

.article-author-card {
  display: grid;

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

  gap: 30px;

  align-items: center;
}

.author-image {
  width: 130px;
  height: 130px;

  overflow: hidden;

  border-radius: 50%;

  background: #dce2e8;
}

.author-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center top;
}

.author-eyebrow {
  display: block;

  margin-bottom: 8px;

  font-size: .57rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: .1em;

  color: var(--blue-600);
}

.author-content h2 {
  margin-bottom: 10px;

  font-family: var(--font-display);
  font-size: 2rem;

  color: var(--navy-900);
}

.author-content p {
  max-width: 580px;

  margin-bottom: 17px;

  font-size: .78rem;
  line-height: 1.75;

  color: #64748b;
}

.author-content a {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  font-size: .67rem;
  font-weight: 700;

  color: var(--navy-900);
}

.author-content svg {
  width: 15px;

  transition:
    transform var(--transition);
}

.author-content a:hover svg {
  transform: translateX(4px);
}


/* ==========================================================
   PREVIOUS / NEXT
========================================================== */

.article-navigation {
  background: var(--navy-900);
}

.article-navigation-grid {
  display: grid;

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

.article-nav-item {
  min-height: 220px;

  padding:
    45px clamp(20px, 4vw, 55px);

  display: flex;
  flex-direction: column;
  justify-content: center;

  transition:
    background var(--transition);
}

.article-nav-item:first-child {
  border-right:
    1px solid rgba(255, 255, 255, .1);
}

.article-nav-item:hover {
  background:
    rgba(255, 255, 255, .035);
}

.article-nav-direction {
  margin-bottom: 18px;

  display: flex;
  align-items: center;

  gap: 9px;

  font-size: .58rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: .09em;

  color: #64748b;
}

.article-nav-direction svg {
  width: 15px;

  color: var(--amber-500);
  
}

.article-nav-item strong {
  max-width: 470px;

  font-family: var(--font-display);

  font-size:
    clamp(1.3rem, 2.2vw, 1.8rem);

  font-weight: 600;

  line-height: 1.3;

  color: white;
}

.article-nav-next {
  text-align: right;
  align-items: flex-end;
}

.article-nav-next .article-nav-direction {
  justify-content: flex-end;
}


/* ==========================================================
   RELATED
========================================================== */

.related-articles {
  padding:
    clamp(85px, 10vw, 140px) 0;

  background: white;
}

.related-header {
  margin-bottom: 50px;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 30px;
}

.related-header h2 {
  margin: 0;

  font-family: var(--font-display);

  font-size:
    clamp(2.4rem, 4vw, 4rem);

  letter-spacing: -.035em;

  color: var(--navy-900);
}

.related-header>a {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  padding-bottom: 5px;

  border-bottom:
    1px solid #cbd5e1;

  font-size: .68rem;
  font-weight: 700;

  color: var(--navy-900);
}

.related-header svg {
  width: 16px;
}

.related-grid {
  display: grid;

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

  gap: 24px;
}

.related-image {
  position: relative;

  display: block;

  aspect-ratio: 1.5;

  overflow: hidden;

  background: #e2e8f0;
}

.related-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 750ms var(--ease);
}

.related-card:hover .related-image img {
  transform: scale(1.035);
}

.related-image>span {
  position: absolute;

  left: 15px;
  bottom: 15px;

  padding:
    6px 9px;

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

  font-size: .57rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: .07em;

  color: var(--blue-600);
}

.related-content {
  padding-top: 20px;
}

.related-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  margin-bottom: 13px;

  font-size: .59rem;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: .04em;

  color: #94a3b8;
}

.related-content h3 {
  margin-bottom: 17px;

  font-family: var(--font-display);

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

  line-height: 1.25;

  color: var(--navy-900);
}

.related-content h3 a {
  transition: color var(--transition);
}

.related-content h3 a:hover {
  color: var(--blue-600);
}

.related-read {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  font-size: .65rem;
  font-weight: 700;

  color: var(--navy-900);
}

.related-read svg {
  width: 15px;

  transition:
    transform var(--transition);
}

.related-read:hover svg {
  transform: translateX(4px);
}


/* ==========================================================
   NEWSLETTER
========================================================== */

.article-newsletter {
  padding:
    clamp(80px, 10vw, 125px) 0;

  text-align: center;

  color: white;

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

.article-newsletter-inner {
  max-width: 680px;

  margin-inline: auto;
}

.article-newsletter .section-eyebrow {
  justify-content: center;
}

.article-newsletter h2 {
  margin-bottom: 22px;

  font-family: var(--font-display);

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

  line-height: 1.03;
  letter-spacing: -.04em;

  color: white;
}

.article-newsletter h2 em {
  color: #dbeafe;
}

.article-newsletter p {
  max-width: 520px;

  margin:
    0 auto 28px;

  font-size: .85rem;
  line-height: 1.75;

  color: #dbeafe;
}

.article-newsletter a {
  display: inline-flex;
  align-items: center;

  gap: 10px;

  padding-bottom: 5px;

  border-bottom:
    1px solid rgba(255, 255, 255, .5);

  font-size: .7rem;
  font-weight: 700;

  color: white;
}

.article-newsletter svg {
  width: 17px;

  transition:
    transform var(--transition);
}

.article-newsletter a:hover svg {
  transform: translateX(4px);
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1050px) {

  .article-header-grid {
    grid-template-columns:
      70px minmax(0, 1fr);
  }

  .article-body-layout {
    grid-template-columns:
      55px minmax(0, 1fr);

    max-width: 870px;
  }

  .article-context {
    display: none;
  }

}


@media (max-width: 800px) {

  .article-header-grid {
    grid-template-columns: 1fr;
  }

  .article-header-rail {
    display: none;
  }

  .article-body-layout {
    grid-template-columns: 1fr;

    max-width:
      var(--container-reading);
  }

  .article-share-rail {
    display: none;
  }

  .article-mobile-share {
    display: block;
  }

  .related-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .related-card:last-child {
    grid-column: 1 / -1;

    max-width:
      calc(50% - 12px);
  }

}


@media (max-width: 650px) {

  .article-header {
    padding:
      65px var(--gutter) 55px;
  }

  .article-heading h1 {
    font-size:
      clamp(2.8rem, 13vw, 4.3rem);
  }

  .article-byline {
    align-items: flex-start;
  }

  .article-feature-wrapper {
    padding: 0;
  }

  .article-feature-image img {
    min-height: 280px;

    object-fit: cover;
  }

  .article-feature-image figcaption {
    padding:
      0 var(--gutter);
  }

  .article-content {
    font-size: 1.02rem;

    line-height: 1.85;
  }

  .article-content>p:first-child::first-letter {
    font-size: 3.8em;
  }

  .article-mobile-share .reading-container {
    align-items: flex-start;
    flex-direction: column;
  }

  .article-author-card {
    grid-template-columns: 1fr;
  }

  .author-image {
    width: 100px;
    height: 100px;
  }

  .article-navigation-grid {
    grid-template-columns: 1fr;
  }

  .article-nav-item {
    min-height: 180px;

    padding:
      35px 0;
  }

  .article-nav-item:first-child {
    border-right: 0;

    border-bottom:
      1px solid rgba(255, 255, 255, .1);
  }

  .article-nav-next {
    text-align: left;
    align-items: flex-start;
  }

  .article-nav-next .article-nav-direction {
    justify-content: flex-start;
  }

  .related-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .related-grid {
    grid-template-columns: 1fr;
  }

  .related-card:last-child {
    grid-column: auto;

    max-width: none;
  }

}