:root {
  /* primitive - color */
  --color-black-0-100: #000000;
  --color-grey-10: #1a1a1a;
  --color-grey-20: #333333;
  --color-grey-35: #5a5a5a;
  --color-grey-86: #dbdbdb;
  --color-grey-90: #e6e6e6;
  --color-grey-94: #f0f0f0;
  --color-grey-96: #f6f6f6;
  --color-white-100: #ffffff;
  --color-red-43: #bb2127;
  --color-red-15: #2A0B08;
  --color-magenta-95: #f0e6e0;
  --color-green-92: #dbf0ea;
  /* primitive - size */
  --size-4: 4px;
  --size-8: 8px;
  --size-12: 12px;
  --size-16: 16px;
  --size-18: 18px;
  --size-20: 20px;
  --size-24: 24px;
  --size-32: 32px;
  --size-40: 40px;
  --size-48: 48px;
  --size-64: 64px;
  --size-80: 80px;
  --size-87: 87px;
  --size-112: 112px;
  --size-120: 120px;
  --size-128: 128px;
  --size-264: 264px;
  --size-544: 544px;
  --size-1328: 1328px;
  --size-1920: 1920px;
  --size-4032: 4032px;
  /* primitive - type */
  --font-family-sofia-sans: "Sofia Sans", sans-serif;
  --font-weight-600: 600;
  --font-weight-700: 700;
  --letter-spacing-neg1: -1px;
  --letter-spacing-negHalf: -0.5px;
  /* primitive - stroke weight */
  --stroke-weight-5: 5;
  --stroke-weight-learn-more-arrow: 2;
  --stroke-weight-logo: 0.5422535538673401;
  /* semantic - type */
  --hero-title-font-size: var(--size-40);
  --hero-title-line-height: var(--size-48);
  --eyebrow-font-size: var(--size-16);
  --eyebrow-line-height: var(--size-16);
  --eyebrow-font-weight: var(--weight-700);
  --eyebrow-letter-spacing: var(--letter-spacing-neg1);
  --eyebrow-text-transform: uppercase;
  --eyebrow-margin-bottom: var(--space-small-h2-bottom);
  --bulleted-font-size: var(--size-16);
  --bulleted-line-height: var(--size-24);
  --footer-font-size: var(--size-16);
  --footer-line-height: var(--size-24);
  --prose-block-font-size: var(--size-18);
  --prose-block-line-height: var(--size-24);
  --factor-title-font-size: var(--size-32);
  --factor-title-line-height: var(--size-40);
  --result-h4-font-size: var(--size-24);
  --result-h4-line-height: var(--size-32);
  --result-p-font-size: var(--size-18);
  --result-p-line-height: var(--size-24);
  --result-learn-more-font-size: var(--size-18);
  --result-learn-more-line-height: var(--size-24);
  --section-title-font-size: var(--size-40);
  --section-title-line-height: var(--size-48);
  /* semantic - space */
  --space-column-gap: var(--size-16);
  --space-content-section-top-bottom: var(--size-32);
  --space-element-gap: var(--size-8);
  --space-factor-header-bottom: var(--size-20);
  --space-factors-gap: var(--size-16);
  --space-footer-bottom: var(--size-24);
  --space-footer-top: var(--size-24);
  --space-large-h2-bottom: var(--size-24);
  --space-main-body-bottom: var(--size-48);
  --space-main-body-top: var(--size-64);
  --space-result-body-bottom: var(--size-8);
  --space-result-bottom: var(--size-24);
  --space-result-header-bottom: var(--size-8);
  --space-small-h2-bottom: var(--size-8);
  --space-main-title-bottom: var(--size-32);
  --space-main-title-top: var(--size-32);
  --space-sides-minimum: var(--size-32);
  --space-site-header-top: var(--size-32);
  /* semantic - object size */
  --object-size-logo-site-footer-max: var(--size-48);
  --object-size-logo-site-header-max: var(--size-48);
  --object-size-hero-title-width: var(--size-264);

}

/* Responsive design tokens */
@media (min-width: 800px) {
  :root {
    /* semantic - type */
    --hero-title-font-size: var(--size-48);
    /* semantic - space */
    --space-sides-minimum: var(--size-64);
    --space-site-header-top: var(--size-80);
    --space-main-title-bottom: var(--size-64);
    --space-main-title-top: var(--size-120);
    /* semantic - object size */
    --object-size-logo-site-footer-max: var(--size-64);
    --object-size-logo-site-header-max: var(--size-128);
    --object-size-hero-title-width: var(--size-544);
  }
}

/* Base */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body {
  margin: 0;
  font-family: var(--font-family-sofia-sans);
  color: var(--color-grey-10);
  background-image: linear-gradient(90deg, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0) 100%), url("./assets/background--medium.jpg");
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: auto 448px;
  transition: background-size 500ms ease, background-position 500ms ease;
}

@media (min-width: 800px) {
  body {
    background-image: linear-gradient(90deg, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0) 100%), url("./assets/background--large.jpg");
    background-size: auto 600px;
  }
}

@media (min-width: 1400px) {
  body {
    background-image: linear-gradient(90deg, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0) 100%), url("./assets/background--ultrawide.jpg");
    background-position: 50% -200px;
    background-size: 100% auto;
  }
}
@media (min-width: 1750px) {
  body {
    background-position: 50% -300px;
  }
}
@media (min-width: 2000px) {
  body {
    background-position: 50% -400px;
  }
}
@media (min-width: 2350px) {
  body {
    background-position: 50% -500px;
  }
}
@media (min-width: 2600px) {
  body {
    background-position: 50% -600px;
  }
}
@media (min-width: 3000px) {
  body {
    background-position: 50% -800px;
  }
}
@media (min-width: 3800px) {
  body {
    background-position: 50% -1000px;
  }
}

.container {
  max-width: 1328px;
  padding-left: var(--space-sides-minimum);
  padding-right: var(--space-sides-minimum);
  margin-left: auto;
  margin-right: auto;
  transition: padding 500ms ease;
}

p#approach-body { max-width: 800px; }

/* Header */
.site-header { padding-top: var(--space-site-header-top); transition: padding 500ms ease; }
.site-logo { width: min(100%, var(--object-size-logo-site-header-max)); height: auto; display: block; transition: width 500ms ease; }

/* Hero */
.hero { padding-top: var(--space-main-title-top); padding-bottom: var(--space-main-title-bottom); transition: padding 500ms ease; }
.hero-title {
  max-width: var(--object-size-hero-title-width);
  color: var(--color-white-100);
  font-size: var(--hero-title-font-size);
  line-height: var(--hero-title-line-height);
  font-weight: var(--font-weight-700);
  letter-spacing: var(--letter-spacing-neg1);
  margin: 0;
  transition: font-size 500ms ease, width 500ms ease;
}
.hero-title em { font-style: italic; }
.title-accent { width: 112px; height: 10px; background: var(--color-red-43); margin-top: 24px; }

/* Main body */
.main-body { 
  background: var(--color-grey-94);
  padding-top: var(--space-main-body-top);
  padding-bottom: var(--space-main-body-bottom);
}

.grid-two { display: block; }

.main-body-section { padding-top: var(--space-content-section-top-bottom); padding-bottom:  var(--space-content-section-top-bottom); }
.eyebrow { font-size: var(--eyebrow-font-size); line-height: var(--eyebrow-line-height); font-weight: var(--eyebrow-font-weight); text-transform: uppercase; margin: 0 0 var(--eyebrow-margin-bottom) 0; }
.eyebrow-accent { width: 87px; height: 4px; background: var(--color-red-43); margin-bottom: 16px; }
.eyebrow-accent.small { width: 63px; }
.bulleted { padding-left: 24px; margin: 0; font-size: var(--bulleted-font-size); line-height: var(--bulleted-line-height); }

.section-title { color: var(--color-red-43); font-size: var(--section-title-font-size); line-height: var(--section-title-line-height); font-weight: var(--font-weight-700); letter-spacing: var(--letter-spacing-negHalf); margin: 0 0 var(--space-large-h2-bottom) 0; }
#results-title {
  margin-bottom: var(--size-8);
}
.prose-block p { color: var(--color-grey-20); font-size: var(--prose-block-font-size); line-height: var(--prose-block-line-height); margin: 0; }

.factor { margin-bottom: var(--space-factors-gap);}
.factor .factor-title { font-size: var(--factor-title-font-size); line-height: var(--factor-title-line-height); font-weight: var(--font-weight-600); margin: 0 0 var(--space-factor-header-bottom) 0; }
.factor .factor-description { 
  color: var(--color-grey-20); 
  font-size: var(--size-18); 
  line-height: var(--size-24); 
  margin: 0 0 var(--size-16) 0; 
  max-width: 800px;
}

.result { 
  margin-bottom: var(--space-result-bottom);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.result-image { 
  width: 100%; 
  height: auto; 
  display: block; 
  border-radius: var(--size-12) var(--size-12) 0 0;
  padding: var(--size-16) var(--size-16) 0 var(--size-16);
  background: var(--color-white-100);
}
.result-content {
  padding: var(--size-16);
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: 0 0 var(--size-12) var(--size-12);
}

/* Individual result-content backgrounds */
#viz-career-trajectories {
  background: radial-gradient(at 86% 27%, #D0E9EA 0px, transparent 50%), radial-gradient(at 89% 41%, #EFFAF7 0px, transparent 50%) #EFFAF7; /* green 1 */
}

#viz-ross-sc {
  background: radial-gradient(at 60% 74%, #E3D0E3 0px, transparent 50%), radial-gradient(at 99% 58%, #F0E6F0 0px, transparent 50%) #F0E6F0; /* magenta 1 */
}

#viz-community-supervision {
  background: radial-gradient(at 50% 95%, #DADCBB 0px, transparent 50%), radial-gradient(at 42% 85%, #F2F4E1 0px, transparent 50%) #F2F4E1; /* yellow 1 */
}

/* ====================== */

#story-telemedicine-ukraine {
  background: radial-gradient(at 95% 37%, #E3D0E3 0px, transparent 50%), radial-gradient(at 65% 55%, #F0E6F0 0px, transparent 50%) #F0E6F0; /* magenta 2 */
}

#story-california-homelessness {
  background: radial-gradient(at 44% 17%, #D0E9EA 0px, transparent 50%), radial-gradient(at 26% 56%, #EFFAF7 0px, transparent 50%) #EFFAF7; /* green 2 */
}

#story-epa-community {
  background: radial-gradient(at 24% 95%, #DADCBB 0px, transparent 50%), radial-gradient(at 36% 12%, #F2F4E1 0px, transparent 50%) #F2F4E1; /* yellow 2 */
}

/* ====================== */

#research-jpmorgan-chase {
  background: radial-gradient(at 63% 51%, #DADCBB 0px, transparent 50%), radial-gradient(at 68% 97%, #F2F4E1 0px, transparent 50%) #F2F4E1; /* yellow 3 */
}

#research-local-housing {
  background: radial-gradient(at 71% 76%, #D0E9EA 0px, transparent 50%), radial-gradient(at 12% 32%, #EFFAF7 0px, transparent 50%) #EFFAF7; /* green 3 */
}

#research-summer-nutrition {
  background: radial-gradient(at 65% 5%, #E3D0E3 0px, transparent 50%), radial-gradient(at 64% 24%, #F0E6F0 0px, transparent 50%) #F0E6F0; /* magenta 3 */
}

#research-financial-wellbeing {
  background: radial-gradient(at 25% 42%, #C0E1E3 0px, transparent 50%), radial-gradient(at 29% 1%, #DBF0EA 0px, transparent 50%) #DBF0EA; /* green 4 */
}
.result h4 { font-size: var(--result-h4-font-size); line-height: var(--result-h4-line-height); margin: 0 0 var(--space-result-header-bottom) 0; }
.result p { color: var(--color-grey-20); font-size: var(--result-p-font-size); line-height: var(--result-p-line-height); margin: 0 0 var(--space-result-body-bottom) 0; }
.learn-more, .link-list { font-weight: var(--font-weight-700); color: var(--color-grey-10); font-size: var(--result-learn-more-font-size); line-height: var(--result-learn-more-line-height); margin: 0; }
.link-list { list-style: none; padding: 0; display: grid; gap: var(--space-element-gap); }
.link-list li { display: flex; align-items: center; gap: 8px; }

/* Link styles and arrow via ::after */
.learn-more a, .link-list a { color: var(--color-grey-10); text-decoration: none; cursor: pointer; }
.learn-more a:visited, .link-list a:visited { color: var(--color-grey-10); }
.learn-more a:hover, .link-list a:hover { color: var(--color-grey-10); }
.learn-more a:active, .link-list a:active { color: var(--color-grey-10); }
.learn-more a::after, .link-list a::after { content: ""; display: inline-block; width: 17.6px; height: 11.782px; margin-left: 8px; background: no-repeat center/contain url("./assets/arrow-right.svg"); vertical-align: middle; transform: translateX(0); transition: transform 200ms ease; }
.learn-more a:hover::after, .link-list a:hover::after { transform: translateX(var(--size-4)); transition: transform 200ms ease; }

/* Footer */
.site-footer { background: var(--color-grey-90); padding-top: var(--space-footer-top); padding-bottom: var(--space-footer-bottom); }
.footer-contents { display: flex; align-items: center; justify-content: space-between; }
.footer-left { display: flex; align-items: center; gap: 8px; }
.footer-logo { width: var(--object-size-logo-site-footer-max); height: var(--object-size-logo-site-footer-max); transition: width 500ms ease, height 500ms ease; }
.footer-left p { margin: 0; font-size: var(--footer-font-size); line-height: var(--footer-line-height); color: var(--color-grey-10); }
.footer-right a { color: var(--color-grey-35); text-decoration: none; font-size: var(--footer-font-size); line-height: var(--footer-line-height); }

/* View Toggle */
.view-toggle {
  display: flex;
  background: var(--color-grey-90);
  border-radius: 50px;
  padding: 4px;
  margin-bottom: var(--size-32);
  max-width: fit-content;
  position: relative;
}

.toggle-option {
  flex: 1;
  padding: var(--size-16) var(--size-24);
  border: none;
  background: transparent;
  color: var(--color-grey-20);
  font-family: var(--font-family-sofia-sans);
  font-size: var(--size-16);
  font-weight: var(--font-weight-600);
  border-radius: 46px;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  z-index: 2;
  min-height: 44px; /* Mobile-friendly touch target */
}

.toggle-option.active {
  background: var(--color-white-100);
  color: var(--color-grey-20);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toggle-option:hover:not(.active) {
  color: var(--color-grey-10);
}

/* Desktop: smaller toggle */
@media (min-width: 800px) {
  .toggle-option {
    padding: var(--size-8) var(--size-20);
    font-size: var(--size-12);
    min-height: auto;
  }
}

/* Carousel */
.carousel-container { position: relative; }

.carousel-nav-buttons {
  display: flex;
  gap: var(--size-8);
  margin-bottom: var(--size-16);
  width: 104px;
}

.carousel-wrapper { 
  position: relative; 
  display: flex; 
  align-items: center;
  gap: var(--size-16);
}

/* Mobile carousel mode: add padding and background */
.carousel-viewport { 
  overflow: hidden; 
  width: 100%;
  pointer-events: none;
}

.carousel-track { 
  display: flex;
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 0 var(--size-16) 0;
}

.carousel-slide { 
  flex: 0 0 100%;
  pointer-events: auto;
  border-radius: var(--size-16);
}

/* Navigation buttons */
.carousel-btn {
  flex-shrink: 0;
  width: var(--size-48);
  height: var(--size-48);
  border: none;
  background: var(--color-white-100);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-red-43);
  transition: all 400ms ease;
  padding: 0;
  position: relative;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.carousel-btn:hover {
  background: var(--color-red-43);
  color: var(--color-white-100);
  cursor: pointer;
}

.carousel-btn:active {
  transform: scale(0.95);
}

.carousel-btn svg {
  width: var(--size-24);
  height: var(--size-24);
  pointer-events: none;
}

/* Dots navigation */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: var(--size-8);
  margin: var(--size-16) 0;
  width: 104px;
}

.carousel-dot {
  width: var(--size-16);
  height: var(--size-16);
  border-radius: 50%;
  background: var(--color-white-100);
  border: none;
  cursor: pointer;
  transition: all 200ms ease;
  padding: 0;
}

.carousel-dot:hover {
  background: var(--color-grey-35);
}

.carousel-dot.active {
  background: var(--color-red-43);
}

/* Desktop: side cards peek through */
@media (min-width: 800px) {
  /* Carousel mode: position navigation to the right of h3 */
  body.carousel .carousel-container {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto auto;
    column-gap: var(--size-24);
    row-gap: var(--size-8);
    align-items: start;
  }
  
  body.carousel .factor-title {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
    align-self: start;
  }
  
  body.carousel .factor-description {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 0;
    align-self: start;
  }
  
  body.carousel .carousel-nav-buttons {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
    width: 104px;
    justify-self: end;
  }
  
  body.carousel .carousel-dots {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    width: 104px;
    justify-self: end;
    justify-content: center;
  }
  
  body.carousel .carousel-wrapper {
    grid-column: 1 / -1;
    grid-row: 4;
  }
  
  /* Remove mobile padding and background */
  body.carousel .carousel-wrapper {
    padding: 0;
    background-color: transparent;
  }
  
  .carousel-wrapper {
    overflow: hidden;
  }
  
  .carousel-viewport {
    overflow: visible;
  }
  
  .carousel-slide {
    flex: 0 0 70%;
  }
  
  body.carousel .result-image {
    border-radius: var(--size-12) var(--size-12) 0 0;
  }
  
  body.carousel .result {
    margin-bottom: 0;
  }
  
  body.carousel .result-content {
    border-radius: 0 0 var(--size-12) var(--size-12);
  }
  
  body.carousel .factor {
    margin-bottom: var(--size-48);
  }
  
  /* Add visual effect to non-active slides */
  .carousel-slide {
    opacity: 0.3;
    transition: opacity 400ms cubic-bezier(0.3, 0, 0.2, 1);
  }
  
  .carousel-slide.active {
    opacity: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
}

/* List view: hide carousel UI elements */
body.list .carousel-nav-buttons {
  display: none;
}

body.list .carousel-wrapper {
  display: block;
  padding: 0;
}

body.list .carousel-btn {
  display: none;
}

body.list .carousel-dots {
  display: none;
}

body.list .carousel-viewport {
  overflow: visible;
}

body.list .carousel-track {
  display: block;
  transform: none !important;
  transition: none;
}

body.list .carousel-slide {
  flex: none;
  width: 100%;
  opacity: 1;
  margin-bottom: var(--size-24);
}

/* Desktop list mode: image on left, text on right */
@media (min-width: 800px) {
  body.list .result {
    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: stretch;
    overflow: hidden;
  }
  
  body.list .result-image {
    flex: 0 0 40%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    object-fit: cover;
    margin-bottom: 0;
    border-radius: var(--size-12) 0 0 var(--size-12);
  }
  
  body.list .result-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: 0 var(--size-12) var(--size-12) 0;
  }
  
  body.list .result-image {
    padding: var(--size-16);
  }
}

/* Fade transitions for smooth state changes */
.carousel-nav-buttons,
.carousel-btn,
.carousel-dots {
  transition: opacity 400ms ease, visibility 400ms ease;
}

body.list .carousel-nav-buttons,
body.list .carousel-btn,
body.list .carousel-dots {
  opacity: 0;
  visibility: hidden;
}

.carousel-wrapper,
.carousel-track,
.carousel-slide {
  transition: all 400ms ease;
}