.museum-story-map-v214 {
  --map-wine: #9c0051;
  --map-pink: #ef9fc6;
  --map-ink: #1d191b;
  position: relative;
  overflow: hidden;
  padding: clamp(86px, 8vw, 138px) 0;
  color: #fff;
  background:
    radial-gradient(circle at 100% 0%, rgba(156,0,81,.34), transparent 31%),
    linear-gradient(135deg, #171416 0%, #271720 52%, #4b0026 100%);
}

.museum-story-map-v214::before {
  content: "";
  position: absolute;
  width: 680px;
  height: 680px;
  top: -430px;
  right: -270px;
  border: 1px solid rgba(239,159,198,.17);
  border-radius: 50%;
}

.museum-story-map-v214 .wrap { position: relative; z-index: 1; }

.story-map-head {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr);
  gap: clamp(45px, 7vw, 100px);
  align-items: end;
  margin-bottom: clamp(54px, 7vw, 92px);
}

.story-map-head__copy .eyebrow { color: var(--map-pink); }
.story-map-head__copy h2 {
  max-width: 970px;
  margin: 16px 0 25px;
  color: #fff;
  font: 700 clamp(42px, 5vw, 74px)/.99 "Poppins", sans-serif;
  letter-spacing: -.045em;
}
.story-map-head__copy h2 em { color: var(--map-pink); font-style: normal; }
.story-map-head__copy p {
  max-width: 850px;
  margin: 0;
  color: rgba(255,255,255,.73);
  font: 400 clamp(18px, 1.35vw, 22px)/1.55 "Source Sans 3", sans-serif;
}

.story-map-head__guide {
  padding: 30px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 22px;
  background: rgba(255,255,255,.065);
  box-shadow: 0 22px 60px rgba(0,0,0,.2);
}
.story-map-head__guide > span { color: var(--map-pink); font: 700 11px/1.3 "Poppins", sans-serif; letter-spacing: .14em; }
.story-map-head__guide strong { display: block; margin: 12px 0 9px; color: #fff; font: 700 20px/1.25 "Poppins", sans-serif; }
.story-map-head__guide p { margin: 0 0 20px; color: rgba(255,255,255,.65); font: 400 16px/1.48 "Source Sans 3", sans-serif; }
.story-map-head__guide a { color: #fff; font: 700 14px/1.3 "Poppins", sans-serif; text-decoration: none; }
.story-map-head__guide a i { margin-left: 6px; color: var(--map-pink); font-style: normal; }

.story-map-route {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

.story-map-route::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 70px;
  bottom: 70px;
  width: 1px;
  background: linear-gradient(transparent, rgba(239,159,198,.48) 12%, rgba(239,159,198,.48) 88%, transparent);
}

.story-act {
  position: relative;
  display: grid;
  grid-template-columns: 185px minmax(0, 1fr);
  min-height: 400px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 26px;
  background: rgba(255,255,255,.07);
  box-shadow: 0 24px 66px rgba(0,0,0,.22);
}

.story-act:nth-child(even) { transform: translateY(80px); }
.story-act__image { position: relative; min-height: 100%; overflow: hidden; background: #2a2025; }
.story-act__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 45%, rgba(28,20,24,.72)); }
.story-act__image img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.75) contrast(1.05); }
.story-act__number { position: absolute; z-index: 2; left: 20px; top: 18px; color: rgba(255,255,255,.87); font: 700 38px/1 "Poppins", sans-serif; letter-spacing: -.05em; text-shadow: 0 3px 18px rgba(0,0,0,.45); }
.story-act__body { display: flex; flex-direction: column; padding: 30px 30px 28px; }
.story-act__meta { display: flex; justify-content: space-between; gap: 15px; color: var(--map-pink); font: 700 11px/1.3 "Poppins", sans-serif; letter-spacing: .12em; }
.story-act__meta time { color: rgba(255,255,255,.52); letter-spacing: .06em; }
.story-act h3 { margin: 20px 0 13px; color: #fff; font: 700 clamp(25px, 2.1vw, 34px)/1.05 "Poppins", sans-serif; letter-spacing: -.035em; }
.story-act p { margin: 0 0 18px; color: rgba(255,255,255,.69); font: 400 17px/1.48 "Source Sans 3", sans-serif; }
.story-act__lanes { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 22px; }
.story-act__lanes span { padding: 6px 10px; border: 1px solid rgba(239,159,198,.34); border-radius: 99px; color: #f6bed9; background: rgba(156,0,81,.16); font: 700 10px/1.2 "Poppins", sans-serif; letter-spacing: .05em; }
.story-act nav { display: grid; gap: 8px; margin-top: auto; }
.story-act nav a { display: grid; grid-template-columns: 77px 1fr 18px; gap: 8px; align-items: center; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.79); font: 600 13px/1.35 "Source Sans 3", sans-serif; text-decoration: none; }
.story-act nav a b { color: var(--map-pink); font: 700 10px/1.2 "Poppins", sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.story-act nav a i { color: #fff; font-style: normal; text-align: right; }
.story-act nav a:hover { color: #fff; }

.story-act--origins .story-act__image img { object-position: 48% center; }
.story-act--beginnings .story-act__image img { object-position: 43% center; }
.story-act--beginnings { grid-template-columns: minmax(285px, 38%) minmax(0, 1fr); }
.story-act--beginnings .story-act__image--full { display:flex; align-items:center; justify-content:center; padding:16px; background:linear-gradient(145deg,#7d1d26,#2a2025); }
.story-act--beginnings .story-act__image--full::after { background:linear-gradient(90deg,transparent 68%,rgba(28,20,24,.42)); }
.story-act--beginnings .story-act__image--full img { width:100%; height:100%; object-fit:contain; object-position:center; filter:saturate(.92) contrast(1.03); }
.story-act__identity { position:absolute; z-index:3; right:18px; bottom:18px; padding:7px 10px; border:1px solid rgba(255,255,255,.65); border-radius:999px; color:#fff; background:rgba(36,20,25,.86); font:700 11px/1.2 "Poppins",sans-serif; box-shadow:0 8px 24px rgba(0,0,0,.35); }
.story-act__identity i { color:var(--map-pink); font-style:normal; }
.story-act--partnership .story-act__image img { object-position: 47% center; }
.story-act--convergence .story-act__image img { object-position: center; }

.story-map-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 38px;
  margin-top: 112px;
  padding: 30px 34px;
  border: 1px solid rgba(239,159,198,.36);
  border-radius: 22px;
  background: linear-gradient(90deg, rgba(156,0,81,.22), rgba(255,255,255,.055));
}
.story-map-footer div span { display: block; margin-bottom: 8px; color: var(--map-pink); font: 700 11px/1.3 "Poppins", sans-serif; letter-spacing: .14em; }
.story-map-footer div strong { display: block; max-width: 770px; color: #fff; font: 700 clamp(20px, 2vw, 28px)/1.2 "Poppins", sans-serif; }
.story-map-footer a { flex: 0 0 auto; padding: 14px 20px; border: 1px solid rgba(255,255,255,.4); border-radius: 99px; color: #fff; font: 700 13px/1.25 "Poppins", sans-serif; text-decoration: none; }
.story-map-footer a i { margin-left: 5px; color: var(--map-pink); font-style: normal; }

@media (max-width: 1050px) {
  .story-map-head { grid-template-columns: 1fr; }
  .story-map-head__guide { max-width: 620px; }
  .story-map-route { grid-template-columns: 1fr; }
  .story-map-route::before { left: 32px; }
  .story-act:nth-child(even) { transform: none; }
  .story-act { grid-template-columns: 240px 1fr; }
  .story-act--beginnings { grid-template-columns: 300px 1fr; }
  .story-map-footer { margin-top: 42px; }
}

@media (max-width: 720px) {
  .story-act--beginnings { grid-template-columns: 1fr; }
  .story-act--beginnings .story-act__image--full { min-height:520px; }
}

@media (max-width: 700px) {
  .museum-story-map-v214 { padding: 72px 0; }
  .story-map-head__copy h2 { font-size: clamp(38px, 11vw, 52px); }
  .story-map-head__guide { padding: 24px; }
  .story-act { display: block; min-height: 0; }
  .story-act__image { height: 210px; min-height: 0; }
  .story-act__image::after { background: linear-gradient(to bottom, transparent 48%, rgba(28,20,24,.82)); }
  .story-act__body { padding: 25px 23px 27px; }
  .story-act nav a { grid-template-columns: 67px 1fr 16px; }
  .story-map-footer { align-items: flex-start; flex-direction: column; padding: 26px 23px; }
}

@media (prefers-reduced-motion: no-preference) {
  .story-act { animation: map-act-rise .55s ease both; }
  .story-act:nth-child(2) { animation-delay: .08s; }
  .story-act:nth-child(3) { animation-delay: .16s; }
  .story-act:nth-child(4) { animation-delay: .24s; }
  @keyframes map-act-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
  .story-act:nth-child(even) { animation-name: map-act-rise-offset; }
  @keyframes map-act-rise-offset { from { opacity: 0; transform: translateY(98px); } to { opacity: 1; transform: translateY(80px); } }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 1050px) {
  .story-act:nth-child(even) { animation-name: map-act-rise; }
}
