/*
 * Compact editorial refinement for the Degree Story system.
 * ICE navy/lime are global brand colors; program colors identify disciplines.
 */

:root {
  --ds-brand-navy: #071923;
  --ds-brand-navy-2: #0f2c3a;
  --ds-brand-lime: #d9ef58;
  --ds-brand-lime-soft: #eff7bd;
}

::selection {
  background: var(--ds-brand-lime);
  color: var(--ds-brand-navy);
}

:focus-visible {
  outline-color: var(--ds-brand-lime);
}

.ds-progress span,
.ds-site-nav .ds-nav-cta,
.ds-button-primary,
.ds-year[open] .ds-year-mark,
.ds-faq[open] summary span {
  background: var(--ds-brand-lime);
  color: var(--ds-brand-navy);
}

.ds-button-primary {
  box-shadow: 0 10px 28px rgb(137 160 27 / 24%);
}

.ds-theme-toggle:hover,
.ds-menu-toggle:hover {
  border-color: var(--ds-brand-lime);
}

.ds-brand strong::after {
  display: inline-block;
  width: .42rem;
  height: .42rem;
  margin-left: .42rem;
  border-radius: 50%;
  background: var(--ds-brand-lime);
  content: "";
  vertical-align: .08rem;
}

.ds-eyebrow {
  padding-left: .75rem;
  border-left: 3px solid var(--ds-program);
  color: var(--ds-ink);
}

.ds-section-number {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--ds-ink);
}

.ds-section-number::before {
  width: 1.4rem;
  height: 2px;
  flex: 0 0 auto;
  background: var(--ds-brand-lime);
  content: "";
}

.ds-hero-media,
.ds-chapter-media,
.ds-practice-media,
.ds-career-media {
  border-top: 3px solid var(--ds-program);
}

.ds-fact-strip {
  border-top: 4px solid var(--ds-program);
}

.ds-page-nav a::after {
  background: var(--ds-brand-lime);
}

.ds-chapter-copy {
  border-top: 3px solid var(--ds-program);
}

.ds-chapter .ds-card-label,
.ds-career-list span {
  color: var(--ds-program);
}

.ds-admissions {
  background: var(--ds-brand-lime);
}

.ds-admissions .ds-section-number::before {
  background: var(--ds-brand-navy);
}

.ds-admissions .ds-button-outline-dark:hover {
  background: rgb(7 25 35 / 8%);
}

[data-ds-theme="dark"] .ds-section-number {
  color: var(--ds-white);
}

/* One restrained documentary treatment across all course photography. */
.ds-media img {
  filter: saturate(.9) contrast(1.07) brightness(.96) sepia(.07) hue-rotate(-4deg);
  transform: scale(1.002);
}

.ds-media::after,
.ds-hero-media::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  height: auto;
  background-image:
    url("/img/degree-photo-grain.svg"),
    linear-gradient(135deg, rgb(7 25 35 / 18%), rgb(217 239 88 / 7%) 58%, rgb(7 25 35 / 13%));
  background-repeat: repeat, no-repeat;
  background-size: 180px 180px, cover;
  content: "";
  mix-blend-mode: soft-light;
  opacity: .34;
  pointer-events: none;
}

.ds-media figcaption {
  position: relative;
  z-index: 2;
}

@media (min-width: 64rem) {
  :root {
    --ds-header-h: 74px;
  }

  h1 {
    font-size: clamp(4.4rem, 6.2vw, 6.6rem);
  }

  h2 {
    font-size: clamp(2.9rem, 4.3vw, 4.55rem);
  }

  h3 {
    font-size: clamp(1.8rem, 2.55vw, 3rem);
  }

  .ds-header {
    padding-block: .5rem;
  }

  .ds-brand img {
    width: 2.65rem;
    height: 2.65rem;
  }

  .ds-section {
    padding-block: clamp(4.25rem, 5.8vw, 6.25rem);
  }

  .ds-section-heading > p:last-child {
    margin-top: 1.2rem;
  }

  .ds-hero {
    min-height: auto;
    padding-top: clamp(2.75rem, 4.5vw, 4.5rem);
  }

  .ds-hero-copy {
    width: min(calc(100% - (var(--ds-page-x) * 2)), 76rem);
    column-gap: 2.75rem;
    padding: 0 0 clamp(2.75rem, 4vw, 4rem);
  }

  .ds-breadcrumbs {
    margin-bottom: clamp(2.25rem, 3.5vw, 3.5rem);
  }

  .ds-hero-deck {
    max-width: 40rem;
    margin-top: 1.35rem;
    font-size: clamp(1.06rem, 1.35vw, 1.3rem);
  }

  .ds-actions {
    margin-top: 1.5rem;
  }

  .ds-hero-media {
    width: min(calc(100% - (var(--ds-page-x) * 2)), 76rem);
    margin-inline: auto;
    border-inline: 1px solid var(--ds-line);
  }

  .ds-hero-media picture {
    height: clamp(25rem, 47vh, 34rem);
  }

  .ds-hero-media figcaption {
    right: 1.25rem;
    bottom: 1.25rem;
    width: min(23rem, 38vw);
  }

  .ds-fact-strip {
    width: min(calc(100% - (var(--ds-page-x) * 2)), 76rem);
    margin-inline: auto;
    padding-inline: 0;
    border-inline: 1px solid var(--ds-line);
  }

  .ds-fact-strip div {
    min-height: 5.85rem;
    padding: 1rem 1.25rem;
  }

  .ds-page-nav a {
    min-height: 3.45rem;
  }

  .ds-fit-grid,
  .ds-curriculum-list {
    margin-top: clamp(2.75rem, 4vw, 4rem);
  }

  .ds-fit-card {
    min-height: 18rem;
    padding: clamp(1.5rem, 2.4vw, 2rem);
  }

  .ds-eligibility-card,
  .ds-cost-card {
    min-height: 20rem;
  }

  .ds-experience-intro {
    padding-bottom: 3.5rem;
  }

  .ds-chapter-list {
    width: min(calc(100% - (var(--ds-page-x) * 2)), 76rem);
    gap: clamp(3.5rem, 5vw, 5rem);
    padding-bottom: clamp(4.5rem, 6vw, 6.5rem);
  }

  .ds-chapter,
  .ds-chapter-media picture {
    min-height: 34rem;
  }

  .ds-chapter {
    grid-template-columns: minmax(0, 1fr) minmax(23rem, .9fr);
  }

  .ds-chapter-reverse {
    grid-template-columns: minmax(23rem, .9fr) minmax(0, 1fr);
  }

  .ds-chapter-copy {
    width: calc(100% + 3rem);
    margin-left: -3rem;
    padding: clamp(2.4rem, 3.6vw, 3.5rem);
  }

  .ds-chapter-reverse .ds-chapter-copy {
    width: calc(100% + 3rem);
    margin-right: -3rem;
  }

  .ds-chapter-copy > p:not(.ds-card-label, .ds-chapter-index) {
    margin-top: 1.15rem;
  }

  .ds-tag-list {
    margin-top: 1.3rem;
  }

  .ds-year summary {
    min-height: 6.5rem;
  }

  .ds-year-body {
    padding-bottom: 2.75rem;
  }

  .ds-semesters {
    margin-top: 1.75rem;
  }

  .ds-practice {
    width: min(calc(100% - (var(--ds-page-x) * 2)), 76rem);
    min-height: 38rem;
    margin-inline: auto;
    border-inline: 1px solid var(--ds-line);
  }

  .ds-practice-copy {
    padding: clamp(3.5rem, 5vw, 5rem);
  }

  .ds-practice-media picture {
    min-height: 38rem;
  }

  .ds-lab-list {
    margin-top: 2rem;
  }

  .ds-careers {
    gap: clamp(3rem, 5vw, 5rem);
    padding-block: clamp(3.75rem, 5vw, 5rem);
  }

  .ds-career-media picture {
    height: clamp(28rem, 39vw, 35rem);
  }

  .ds-career-list {
    margin-top: 2rem;
  }

  .ds-admissions {
    gap: clamp(2.5rem, 4vw, 4rem);
    padding-block: clamp(4rem, 5.5vw, 5.75rem);
  }

  .ds-steps li {
    padding-block: 1rem;
  }

  .ds-questions {
    gap: clamp(3rem, 5vw, 5rem);
  }

  .ds-related {
    padding-block: clamp(3.5rem, 5vw, 5rem);
  }

  .ds-related-links a {
    min-height: 12.5rem;
  }
}

@media (min-width: 88rem) {
  .ds-chapter-list {
    width: min(calc(100% - 3rem), 76rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-media img {
    transform: none;
  }
}