@import url("https://use.typekit.net/ded8mjc.css");
:root {
  --rhodes-red: #c4022b;
  --rhodes-black: #171d15;
  --cool-gray: #e6e7e8;
  --cool-gray-30: #bbbdc0;
  --golden: #e29743;
  --light-golden: #fdd09e;
  --emerald: #00443d;
  --ink: var(--rhodes-black);
  --paper: #ffffff;
  --accent: var(--rhodes-red);
  --trail: var(--cool-gray-30);
  --card: rgba(255, 255, 255, 0.98);
  --serif: "Adobe Garamond Pro", Garamond, Georgia, serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body .journey {
  font-size: 17px;
  line-height: 1.5rem;
}

body .journey circle {
  font-size: 27px;
}

/*
  This intentionally reproduces the surrounding Drupal/layout condition.
  Native position: sticky can fail when any ancestor uses overflow-x: hidden.
*/
.overflow-x-container {
  position: relative;
  overflow-x: hidden;
}

.intro,
.outro {
  display: grid;
  place-content: center;
  padding: 2rem;
}

.intro {
  place-content: center start;
  padding-left: clamp(2rem, 8vw, 9rem);
  color: var(--rhodes-black);
  border-top: 0.6rem solid var(--rhodes-red);
}

.intro::after {
  content: "CENTER FOR CAREER & PROFESSIONAL DEVELOPMENT";
  position: absolute;
  right: 2rem;
  bottom: 1.25rem;
  left: 2rem;
  color: #5a5d59;
  font: 700 0.72rem/1.2;
  letter-spacing: 0.16em;
  display: none;
}

.intro h1 {
  max-width: 10ch;
  margin: 0 0 1rem;
  font: 400 clamp(4rem, 8vw, 7.5rem)/0.78 var(--serif);
  letter-spacing: -0.045em;
}

.intro h1 span,
.intro h1 em {
  display: block;
}

.intro h1 em {
  color: #a90020;
  font-weight: 400;
}

.intro .kicker {
  margin: 0 0 0.75rem;
  color: #920019;
  font: 800 0.9rem/1.2;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.intro .lede {
  max-width: 30rem;
  margin: 1.5rem 0 0;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
}

/* The tall wrapper supplies the scroll distance. */
.journey {
  position: relative;
  height: 600vh;
}

/*
  JavaScript moves the scene through these three states. This avoids relying
  on sticky positioning, so an overflow-hidden ancestor does not break it.
*/
.scene {
  position: absolute;
  top: 0;
  width: 100%;
  right: 0;
  left: 0;
  height: 100vh;
}
@media only screen and (min-width: 1280px) {
  .scene {
    width: 100%;
    left: unset;
    right: unset;
  }
}

.scene.is-fixed {
  position: fixed;
  z-index: 10;
}
@media only screen and (min-width: 1280px) {
  .scene.is-fixed {
    width: 129.25vw;
    max-width: 1200px;
  }
}

.scene.is-ended {
  top: auto;
  bottom: 0;
}

.map {
  inset: 0vh 0vw;
  width: 175vw;
  height: 94vh;
  position: absolute;
  /* inset: 5vh 5vw; */
}
@media only screen and (min-width: 640px) {
  .map {
    inset: 5vh -39vw;
    width: 145vw;
    height: 94vh;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media only screen and (min-width: 960px) {
  .map {
    width: 90vw !important;
  }
}

.trail-base,
.trail-progress {
  fill: none;
  stroke-linecap: round;
  stroke-width: 12;
}

.trail-base {
  stroke: var(--rhodes-black);
  opacity: 1;
}

.trail-progress {
  stroke: var(--accent);
}

.traveler {
  fill: var(--accent);
  stroke: white;
  stroke-width: 4;
  filter: drop-shadow(0 5px 7px rgba(23, 29, 21, 0.28));
}

.pin {
  transition: transform 180ms ease;
  transform-box: fill-box;
  transform-origin: center;
  cursor: pointer;
}

.pin-disc {
  fill: var(--pin-color);
  stroke: white;
  stroke-width: 6;
  filter: drop-shadow(0 4px 5px rgba(23, 29, 21, 0.2));
}

.pin-icon {
  fill: white;
  font: 700 28px/1;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

.pin:hover .pin-disc,
.pin:focus-visible .pin-disc {
  stroke: var(--golden);
  stroke-width: 9;
}

.pin.reached .pin-disc {
  filter: drop-shadow(0 0 8px rgba(196, 2, 43, 0.38));
}

.story-card {
  position: absolute;
  top: var(--card-y);
  width: min(32rem, 38vw);
  padding: clamp(1.1rem, 2vw, 1.65rem) clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid #e3e3e3;
  border-radius: 0.9rem;
  background: var(--card);
  box-shadow: 0 0.75rem 1.6rem rgba(23, 29, 21, 0.16);
  backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(calc(-50% + 24px));
  transition: opacity 240ms ease, transform 240ms ease;
  pointer-events: none;
}

.story-card[data-side=left] {
  left: -40px;
  border-right: 0.85rem solid var(--rhodes-black);
}
@media only screen and (min-width: 640px) {
  .story-card[data-side=left] {
    left: 0;
  }
}

.story-card[data-side=right] {
  right: -20px;
  border-left: 0.85rem solid var(--rhodes-red);
}
@media only screen and (min-width: 640px) {
  .story-card[data-side=right] {
    right: 0;
  }
}

.story-card.active {
  opacity: 1;
  transform: translateY(0);
}
@media only screen and (min-width: 640px) {
  .story-card.active {
    transform: translateY(-50%);
  }
}

.story-card p {
  margin-bottom: 0;
}

.story-card h2 {
  margin: 0;
  color: var(--rhodes-black);
  font: 800 clamp(1.2rem, 2vw, 1.65rem)/1.1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.story-card ul {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
}

.story-card li + li {
  margin-top: 0.35rem;
}

.story-card .eyebrow {
  margin: 0 0 0.4rem;
  color: var(--accent);
  font: 800 clamp(1.1rem, 2vw, 1.45rem)/1;
  letter-spacing: 0;
  text-transform: uppercase;
}

@media (max-width: 700px) {
  .story-card,
  .story-card[data-side=left],
  .story-card[data-side=right] {
    inset: auto 1rem 1rem;
    width: auto;
    border-right: 1px solid #e3e3e3;
    border-left: 0.7rem solid var(--connector-color);
    transform: translateY(24px);
  }
  .story-card.active {
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .story-card, .pin {
    transition: none;
  }
}

/*# sourceMappingURL=career_journey.css.map */