/* Long-form research pages in the ELO Labs light theme. */
.labs-article {
  background: #e8e8db;
  color: #14100c;
  font-family: Lato,Arial,sans-serif;
}
.article-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(5rem,10vw,9rem) clamp(1.25rem,4vw,3.5rem) clamp(3.5rem,7vw,6rem);
  background: #e8e8db;
  border-bottom: 1px solid rgba(20,16,12,.18);
}
.article-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px,.55fr) minmax(0,1.45fr);
  align-items: center;
  gap: clamp(2rem,5vw,5rem);
  width: min(100%,1440px);
  min-height: min(62vh,690px);
  margin: 0 auto;
}
.article-meta,.article-title-wrap { position: relative; z-index: 2; }
.article-kicker {
  margin: 0;
  color: #14100c;
  font: 600 12px/1.2 "Barlow Condensed",sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.article-date {
  margin: 2rem 0 0;
  color: #6b6455;
  font: 10px/1.8 var(--label);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.article-back {
  display: inline-block;
  margin-top: 2rem;
  color: #14100c;
  border-bottom: 1px solid rgba(20,16,12,.35);
  font: 600 11px/1.5 var(--label);
  letter-spacing: .04em;
  text-decoration: none;
}
.article-back:hover,.article-back:focus-visible { color: #d03415; border-color: #d03415; }
.article-title-wrap h1 {
  max-width: 14ch;
  margin: 0;
  color: #14100c;
  font: 700 clamp(5rem,10.5vw,10.5rem)/.78 "Barlow Condensed",sans-serif;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.article-deck {
  max-width: 48ch;
  margin: 2rem 0 0;
  color: #4a4437;
  font: 400 clamp(1.05rem,1.7vw,1.35rem)/1.55 Lato,Arial,sans-serif;
}
.article-byline {
  margin: 2.2rem 0 0;
  color: #6b6455;
  font: 10px/1.6 var(--label);
  letter-spacing: .12em;
}
.article-byline span { color: #d03415; }
.article-orbit {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -12%;
  width: min(42vw,460px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  fill: none;
  stroke: rgba(20,16,12,.13);
  stroke-width: 1;
  pointer-events: none;
}
.article-orbit .orbit-core { fill: #14100c; stroke: none; }
.article-scroll {
  position: absolute;
  right: clamp(1.25rem,4vw,3.5rem);
  bottom: 1.5rem;
  color: #6b6455;
  font: 9px/1.5 var(--label);
  letter-spacing: .13em;
  text-decoration: none;
  text-transform: uppercase;
}
.article-scroll span { margin-left: .65rem; color: #d03415; }
.article-layout {
  display: grid;
  grid-template-columns: minmax(180px,240px) minmax(0,860px);
  gap: clamp(2.5rem,7vw,7rem);
  width: min(calc(100% - clamp(2.5rem,8vw,7rem)),1280px);
  margin: 0 auto;
  padding: clamp(4rem,8vw,7rem) 0 8rem;
  align-items: start;
}
.article-toc {
  position: sticky;
  top: 76px;
  max-height: calc(100vh - 98px);
  overflow-y: auto;
  padding-right: .35rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(20,16,12,.25) transparent;
}
.article-toc nav { display: grid; margin-top: 1rem; }
.article-toc nav a {
  padding: .58rem 0;
  color: #6b6455;
  border-top: 1px solid rgba(20,16,12,.15);
  font: 9px/1.5 var(--label);
  letter-spacing: .015em;
  text-decoration: none;
  text-transform: uppercase;
}
.article-toc nav a:hover,.article-toc nav a:focus-visible { color: #d03415; }
.article-body { min-width: 0; }
.article-section {
  padding: clamp(2.8rem,5vw,4.5rem) 0;
  border-top: 1px solid rgba(20,16,12,.2);
  scroll-margin-top: 74px;
}
.article-section:first-child { padding-top: 0; border-top: 0; }
.article-section h2 {
  max-width: 19ch;
  margin: .8rem 0 1.5rem;
  color: #14100c;
  font: 700 clamp(2.6rem,5vw,4.7rem)/.9 "Barlow Condensed",sans-serif;
  letter-spacing: -.015em;
  text-transform: uppercase;
}
.article-section p:not(.article-kicker),.article-case div {
  max-width: 72ch;
  color: #4a4437;
  font: 400 17px/1.75 Lato,Arial,sans-serif;
}
.article-section p:not(.article-kicker) { margin: 1rem 0 0; }
.article-section .article-lead {
  color: #14100c !important;
  font-size: clamp(1.2rem,2vw,1.55rem) !important;
  line-height: 1.55 !important;
}
.article-section .article-intro { margin: 0 0 2rem !important; }
.article-callout {
  margin: 2.5rem 0;
  padding: 1.1rem 0 1.1rem clamp(1rem,3vw,2rem);
  border-left: 3px solid #d03415;
  color: #14100c;
  font: 700 clamp(1.8rem,3.4vw,3.1rem)/.98 "Barlow Condensed",sans-serif;
  text-transform: uppercase;
}
.article-callout i { color: #d03415; font-style: normal; }
.article-sequence { max-width: 38ch !important; margin-top: 2.5rem !important; }
.article-sequence i { color: #d03415; font-style: normal; }
.article-table-wrap { overflow-x: auto; margin-top: 2rem; }
.article-table {
  width: 100%;
  border-collapse: collapse;
  color: #4a4437;
  font: 400 14px/1.55 Lato,Arial,sans-serif;
}
.article-table th,.article-table td {
  min-width: 130px;
  padding: .9rem 1rem;
  border: 1px solid rgba(20,16,12,.17);
  text-align: left;
  vertical-align: top;
}
.article-table th {
  color: #14100c;
  background: #ddd2ba;
  font: 600 13px/1.2 "Barlow Condensed",sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.article-table td:first-child { color: #14100c; font-weight: 700; }
.article-cases { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 2.5rem; border-top: 1px solid rgba(20,16,12,.2); border-left: 1px solid rgba(20,16,12,.2); }
.article-case { padding: clamp(1.1rem,2vw,1.7rem); border-right: 1px solid rgba(20,16,12,.2); border-bottom: 1px solid rgba(20,16,12,.2); }
.article-case p { margin: 0 !important; color: #14100c !important; font: 600 11px/1.4 "Barlow Condensed",sans-serif !important; letter-spacing: .12em; text-transform: uppercase; }
.article-case h3 {
  margin: .8rem 0 .7rem;
  color: #14100c;
  font: 700 clamp(1.6rem,2.5vw,2.2rem)/.95 "Barlow Condensed",sans-serif;
  text-transform: uppercase;
}
.article-case div { font-size: 14px; line-height: 1.65; }
.article-implications { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 2rem; border-top: 1px solid rgba(20,16,12,.2); }
.article-implications p { display: grid; grid-template-columns: minmax(130px,.65fr) minmax(0,1.35fr); gap: 1rem; max-width: none !important; margin: 0 !important; padding: 1rem 0; border-bottom: 1px solid rgba(20,16,12,.2); font-size: 14px !important; }
.article-implications p:nth-child(odd) { padding-right: 1rem; }
.article-implications p:nth-child(even) { padding-left: 1rem; border-left: 1px solid rgba(20,16,12,.2); }
.article-implications b { color: #14100c; font: 600 13px/1.3 "Barlow Condensed",sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.article-implications span { color: #4a4437; }
.article-conclusion { margin-top: 1rem; padding: clamp(2rem,4vw,3.5rem); background: #ddd2ba; border: 0; }
.article-conclusion h2 { max-width: 16ch; }
.article-sources { padding-bottom: 0; }

@media (max-width: 900px) {
  .article-hero-grid { min-height: 0; grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 2rem; }
  .article-date { margin-top: .8rem; }
  .article-meta { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; }
  .article-meta .article-back { grid-column: 1 / -1; margin-top: .8rem; width: fit-content; }
  .article-title-wrap h1 { font-size: clamp(5rem,17vw,9rem); }
  .article-orbit { top: auto; right: -14%; bottom: -12%; width: min(58vw,420px); transform: none; opacity: .65; }
  .article-scroll { position: relative; right: auto; bottom: auto; display: block; width: min(100%,1440px); margin: 1rem auto 0; }
  .article-layout { grid-template-columns: 1fr; gap: 2.2rem; padding-top: 2.5rem; }
  .article-toc { position: static; max-height: none; padding: 1rem; border: 1px solid rgba(20,16,12,.18); }
  .article-toc nav { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 1rem; }
}
@media (max-width: 600px) {
  .article-hero { padding-top: 4.5rem; }
  .article-title-wrap h1 { font-size: clamp(4.7rem,21vw,7.5rem); }
  .article-deck { margin-top: 1.4rem; font-size: 1rem; }
  .article-layout { width: calc(100% - 2rem); padding-bottom: 4rem; }
  .article-toc nav { grid-template-columns: 1fr; }
  .article-section h2 { font-size: clamp(2.7rem,12vw,4rem); }
  .article-section p:not(.article-kicker),.article-case div { font-size: 15px; }
  .article-cases,.article-implications { grid-template-columns: 1fr; }
  .article-implications p:nth-child(odd),.article-implications p:nth-child(even) { padding-inline: 0; border-left: 0; }
  .article-table th,.article-table td { padding: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .article-scroll { scroll-behavior: auto; }
}