*, *::before, *::after { box-sizing: border-box; }
    :where(.scroll-wrap .slide:not(.slide--footer)) *,
    :where(.scroll-wrap .slide:not(.slide--footer)) *::before,
    :where(.scroll-wrap .slide:not(.slide--footer)) *::after,
    .scroll-wrap { margin: 0; padding: 0; }
    :where(.scroll-wrap .slide:not(.slide--footer)) :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure) {
      margin: 0;
      padding: 0;
    }

    :root {
      --white: var(--undpds-color-white);
      --black: #0a0a0a;
      --undp-blue: var(--undpds-color-blue-600); 
    }

    html, body {
      height: 100%;
      background: var(--black);
      overflow: hidden;
    }

    .scroll-wrap {
      height: 100vh;
      overflow-y: scroll;
      overflow-x: hidden;
      scroll-snap-type: y mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
    }

    .slide { overflow-x: hidden; }

    .slide {
      height: 100vh;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      background: var(--black);
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }

    .frame {
      position: relative;
      overflow: hidden;
      aspect-ratio: var(--ar, 1.5);
      width: min(1600px, calc(100vw - 40px), calc((100vh - 80px) * var(--ar, 1.5)));
      height: auto;
      box-shadow: 0 24px 60px rgba(0,0,0,0.45);
    }

    .frame img {
      display: block;
      position: absolute;
      top: -6%;
      left: 0;
      width: 100%;
      height: 112%;
      object-fit: cover;
      will-change: transform, opacity;
      transition: scale 9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      scale: 1.0;
    }

    .slide.active .frame img { scale: 1.04; }

    .overlay {
      position: absolute;
      inset: 0 0 -1px 0; 
      background: linear-gradient(
        180deg,
        rgba(0,0,0,0.0)  0%,
        rgba(0,0,0,0.0) 40%,
        rgba(0,0,0,0.55) 78%,
        rgba(0,0,0,0.82) 100%
      );
      opacity: 0;
      transition: opacity 0.6s ease;
      pointer-events: none;
    }

    .slide.active .overlay { opacity: 1; }

    .tag {
      position: absolute;
      top: 20px;
      left: 20px;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: rgba(255,255,255,0.14);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.4);
      color: #fff;
      font-family: var(--undpds-font-family-primary);
      font-size: 0.86rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      height: 36px;
      padding: 0 18px 0 14px;
      opacity: 0;
      transform: translateY(-10px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .tag svg {
      width: 13px;
      height: 13px;
      flex-shrink: 0;
      opacity: 0.85;
    }

    .slide.active .tag { opacity: 1; transform: translateY(0); }

    .video-link {
      position: absolute;
      top: 20px;
      right: 20px;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: rgba(0, 110, 181,0.4);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.45);
      color: #fff;
      text-decoration: none;
      font-family: var(--undpds-font-family-primary);
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      height: 36px;
      padding: 0 15px;
      opacity: 0;
      transform: translateY(-10px);
      transition: opacity 0.7s ease, transform 0.7s ease, background 0.3s ease;
    }

    .slide.active .video-link { opacity: 1; transform: translateY(0); }
    .video-link:hover { background: rgba(0, 110, 181,0.75); }

    .video-link__icon {
      display: inline-flex;
      width: 18px; height: 18px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.7);
      align-items: center;
      justify-content: center;
    }
    .video-link__icon svg { width: 8px; height: 8px; fill: #fff; }

    .text-block {
      position: absolute;
      bottom: 40px;
      left: 26px;
      right: 26px;
      color: #fff;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.55s ease, transform 0.55s ease;
      pointer-events: none;
    }

    .slide.active .text-block { opacity: 1; transform: translateY(0); }

    .text-block .headline {
      font-family: var(--undpds-font-family-primary);
      font-weight: 300;
      font-size: clamp(var(--undpds-font-size-14), 1.4vw, var(--undpds-font-size-16)); 
      line-height: 1.45;
      letter-spacing: 0.01em;
      max-width: 620px;
      text-shadow: 0 1px 12px rgba(0,0,0,0.6);
    }

    .index {
      position: absolute;
      bottom: 22px;
      right: 22px;
      font-family: var(--undpds-font-family-primary);
      font-size: 0.8rem;
      font-weight: 300;
      letter-spacing: 0.18em;
      color: rgba(255,255,255,0.4);
      opacity: 0;
      transition: opacity 0.6s ease;
    }
    .slide.active .index { opacity: 1; }

    .scroll-hint { display: none !important; }

    .scroll-btn {
      position: absolute;
      bottom: 28px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 20;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.35);
      border-radius: 50%;
      width: 54px;
      height: 54px;
      cursor: pointer;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      color: rgba(255,255,255,0.55);
      font-family: var(--undpds-font-family-primary);
      font-size: 0.5rem;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      opacity: 0;
      transition: opacity 0.6s ease, color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
      pointer-events: none;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .slide.active .scroll-btn { opacity: 1; pointer-events: auto; }
    .scroll-btn:hover {
      color: rgba(255,255,255,0.9);
      background: rgba(255,255,255,0.15);
      border-color: rgba(255,255,255,0.6);
    }
    .scroll-btn span { margin-left: 0.24em; } 
    .scroll-btn svg { width: 10px; height: 13px; animation: bounce 2.2s ease-in-out infinite; }
    .slide:last-child .scroll-btn { display: none; }

    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(5px); }
    }

    .lang-toggle {
      position: fixed;
      top: 24px;
      right: 26px;
      z-index: 300;
      display: flex;
      align-items: center;
      gap: 4px;
      font-family: var(--undpds-font-family-primary);
      opacity: 0;
      animation: fadeIn 1.2s ease 0.6s forwards;
    }
    .lang-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: rgba(255,255,255,0.55);
      font-family: inherit;
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.16em;
      padding: 4px 6px;
      transition: color 0.3s ease;
    }
    .lang-btn.is-active { color: #fff; }
    .lang-btn:hover { color: #fff; }
    .lang-sep { color: rgba(255,255,255,0.35); font-size: 0.72rem; }

    @keyframes fadeIn { to { opacity: 1; } }

    .slide--intro {
      overflow: hidden;
      flex-direction: column;
      padding: clamp(64px, 9vh, 110px) 24px clamp(96px, 13vh, 150px);
    }

    .intro-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 108%;
      top: -4%;
      object-fit: cover;
      object-position: center;
      will-change: transform, opacity;
    }

    .intro-overlay {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.42) 70%, rgba(0,0,0,0.55) 100%),
        linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.58) 100%);
      z-index: 1;
    }

    @keyframes introUp {
      from { opacity: 0; transform: translateY(26px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .intro-hero {
      position: relative;
      z-index: 2;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      max-width: 1100px;
    }

    .intro-title {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(8px, 1.6vh, 20px);
      color: #fff;
      font-weight: 300;
      line-height: 1;
    }

    .intro-title__mark {
      font-family: var(--undpds-font-family-secondary); 
      font-weight: 700;
      font-size: clamp(3.2rem, 10.4vw, 9rem);
      letter-spacing: 0.02em;
      text-indent: 0.02em;
      text-shadow: 0 6px 40px rgba(0,0,0,0.55);
      opacity: 0;
      animation: introUp 1.3s cubic-bezier(0.16,1,0.3,1) 0.4s both;
    }

    .intro-title__rest {
      font-family: var(--undpds-font-family-primary);
      font-weight: 300;
      font-style: italic;
      font-size: clamp(0.75rem, 2.3vw, 1.8rem);
      letter-spacing: 0.01em;
      color: rgba(255,255,255,0.95);
      text-shadow: 0 2px 24px rgba(0,0,0,0.5);
      opacity: 0;
      animation: introUp 1.3s cubic-bezier(0.16,1,0.3,1) 0.65s both;
    }

    .intro-sub {
      margin-top: clamp(18px, 3vh, 34px);
      font-family: var(--undpds-font-family-primary);
      font-weight: 300;
      font-size: clamp(0.85rem, 1.5vw, 1.12rem);
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.82);
      text-shadow: 0 1px 14px rgba(0,0,0,0.6);
      opacity: 0;
      animation: introUp 1.3s cubic-bezier(0.16,1,0.3,1) 0.9s both;
    }
    .intro-sub::before {
      content: "";
      display: block;
      width: 52px;
      height: 1px;
      background: rgba(255,255,255,0.5);
      margin: 0 auto clamp(16px, 2.4vh, 26px);
    }

    .intro-lang {
      display: inline-flex;
      gap: 10px;
      margin-bottom: clamp(24px, 4vh, 44px);
      opacity: 0;
      animation: introUp 1.3s cubic-bezier(0.16,1,0.3,1) 1.05s both;
    }
    .lang-pill {
      cursor: pointer;
      display: inline-block;
      text-decoration: none;
      font-family: var(--undpds-font-family-primary);
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #fff;
      background: rgba(0, 110, 181,0.4);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.45);
      padding: 9px 20px;
      transition: background 0.3s ease, border-color 0.3s ease;
    }
    .lang-pill:hover { background: rgba(0, 110, 181,0.7); }
    .lang-pill.is-active { background: rgba(0, 110, 181,0.9); border-color: #fff; }

    .intro-logos {
      position: relative;
      z-index: 2;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
      opacity: 0;
      animation: introUp 1.3s cubic-bezier(0.16,1,0.3,1) 1.15s both;
    }
    .logo-undp {
      height: 125px;
      width: auto;
      filter: drop-shadow(0 4px 18px rgba(0,0,0,0.55));
    }
    .logo-rok {
      height: 91px;
      width: auto;
      filter: drop-shadow(0 4px 18px rgba(0,0,0,0.45));
    }

    .slide--section { background: var(--black); }

    .section-content {
      text-align: center;
      padding: 40px;
      max-width: 1000px;
    }

    .section-title {
      font-family: var(--undpds-font-family-primary);
      font-weight: 700;
      font-size: clamp(2.4rem, 6.5vw, 6.2rem);
      line-height: 1.05;
      letter-spacing: -0.01em;
      color: #fff;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.9s ease, transform 0.9s ease;
    }

    .section-sub {
      margin-top: clamp(18px, 3vh, 30px);
      font-family: var(--undpds-font-family-primary);
      font-weight: 300;
      font-size: clamp(0.95rem, 1.7vw, 1.3rem);
      line-height: 1.5;
      letter-spacing: 0.04em;
      color: rgba(255,255,255,0.72);
      max-width: 640px;
      margin-left: auto;
      margin-right: auto;
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.9s ease 0.15s, transform 0.9s ease 0.15s;
    }

    .slide--section.active .section-title,
    .slide--section.active .section-sub {
      opacity: 1;
      transform: translateY(0);
    }

    .slide--context { background: var(--black); }

    .context-inner {
      width: calc(100vw - 104px);
      max-width: 1340px;
      max-height: calc(100% - 48px); 
      display: grid;
      grid-template-columns: 1.8fr 1.05fr; 
      gap: clamp(24px, 2.5vw, 40px);
      align-items: center;
    }

    .context-text { max-width: none; }

    .context-block {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.9s ease, transform 0.9s ease;
    }
    .slide--context.active .context-block { opacity: 1; transform: translateY(0); }
    .slide--context.active .context-block:nth-child(1) { transition-delay: 0.1s; }
    .slide--context.active .context-block:nth-child(2) { transition-delay: 0.35s; }
    .slide--context.active .context-block:nth-child(3) { transition-delay: 0.6s; }
    .slide--context.active .context-block:nth-child(4) { transition-delay: 0.85s; }

    .context-block + .context-block {
      margin-top: clamp(14px, 2.6vh, 26px);
    }

    .context-kicker {
      font-family: var(--undpds-font-family-primary);
      font-weight: 600;
      font-size: var(--undpds-font-size-12); 
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--undpds-color-blue-400);
      margin-bottom: 10px;
    }

    .context-body {
      font-family: var(--undpds-font-family-primary);
      font-weight: 300;
      font-size: clamp(var(--undpds-font-size-14), 1vw, var(--undpds-font-size-16)); 
      line-height: 1.5;
      color: rgba(255,255,255,0.82);
    }

    .context-cta { padding-top: clamp(18px, 3vh, 28px); }
    .context-cta.context-block + .context-block,
    .context-block + .context-cta { border-top: none; }

    .discover-btn {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      font-family: var(--undpds-font-family-primary);
      font-size: 0.82rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #fff;
      text-decoration: none;
      padding: 13px 26px;
      background: var(--undp-blue);
      border: 1px solid var(--undp-blue);
      transition: background 0.3s ease, transform 0.3s ease;
    }
    .discover-btn svg { width: 14px; height: 14px; }
    .discover-btn:hover { background: var(--undpds-color-blue-700); transform: translateY(-2px); }

    .context-map { width: 100%; }

    .world-map {
      width: 100%;
      height: auto;
      max-height: calc(100vh - 220px); 
      display: block;
      margin: 0 auto;
      overflow: hidden;
    }

    .world-map .landmass path {
      fill: rgba(255,255,255,0.07);
      stroke: none;
    }

    .world-map .landmass {
      opacity: 0;
      transition: opacity 1.4s ease;
    }
    .slide--context.active .world-map .landmass { opacity: 1; }

    .world-map #ua { stroke: #4F9DDE; fill: rgba(79,157,222,0.3); }
    .world-map #af { stroke: #E6B450; fill: rgba(230,180,80,0.3); }
    .world-map #cd { stroke: #57BE8E; fill: rgba(87,190,142,0.3); }
    .world-map #mm { stroke: #D2719B; fill: rgba(210,113,155,0.3); }
    .world-map #sy { stroke: #E08259; fill: rgba(224,130,89,0.3); }
    .world-map #ps { stroke: #9D86E0; fill: rgba(157,134,224,0.32); }
    .world-map #ua, .world-map #af, .world-map #cd,
    .world-map #mm, .world-map #sy, .world-map #ps {
      stroke-width: 1.3;
      stroke-linejoin: round;
      paint-order: stroke;
    }

    .world-map .mk, .world-map .map-labels {
      opacity: 0;
      transition: opacity 1.1s ease;
    }
    .slide--context.active .world-map .mk,
    .slide--context.active .world-map .map-labels { opacity: 1; }

    .mk-dot { stroke: #fff; stroke-width: 0.8; vector-effect: non-scaling-stroke; }
    .mk--ua   .mk-dot { fill: #4F9DDE; } .mk--ua   .mk-halo { fill: #4F9DDE; opacity: 0.28; }
    .mk--af   .mk-dot { fill: #E6B450; } .mk--af   .mk-halo { fill: #E6B450; opacity: 0.28; }
    .mk--cd   .mk-dot { fill: #57BE8E; } .mk--cd   .mk-halo { fill: #57BE8E; opacity: 0.28; }
    .mk--mm   .mk-dot { fill: #D2719B; } .mk--mm   .mk-halo { fill: #D2719B; opacity: 0.28; }
    .mk--sy   .mk-dot { fill: #E08259; } .mk--sy   .mk-halo { fill: #E08259; opacity: 0.28; }
    .mk--gaza .mk-dot { fill: #9D86E0; } .mk--gaza .mk-halo { fill: #9D86E0; opacity: 0.28; }

    .slide--context.active .mk-halo {
      transform-box: fill-box;
      transform-origin: center;
      animation: mkPulse 3.4s ease-in-out infinite;
    }
    @keyframes mkPulse {
      0%, 100% { transform: scale(1);   opacity: 0.28; }
      50%      { transform: scale(1.8); opacity: 0.06; }
    }

    .map-label {
      font-family: var(--undpds-font-family-primary);
      font-size: 8px;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      fill: #fff;
      paint-order: stroke;
      stroke: rgba(0,0,0,0.5);
      stroke-width: 2px;
      stroke-linejoin: round;
    }
    .lbl--ua   { fill: #8FBEEA; }
    .lbl--af   { fill: #ECCB82; }
    .lbl--cd   { fill: #86D3AD; }
    .lbl--mm   { fill: #E29CBA; }
    .lbl--sy   { fill: #EAA386; }
    .lbl--gaza { fill: #BBABEC; }

    .map-labels .lead {
      stroke: rgba(255,255,255,0.4);
      stroke-width: 0.5;
      vector-effect: non-scaling-stroke;
    }

    @media (max-width: 1024px)  {
      .context-inner {
        grid-template-columns: 1fr;
        gap: 24px;
        max-height: calc(100% - 24px);
        overflow-y: auto;
      }
      .context-map { max-width: 520px; margin: 0 auto; order: -1; }
      .context-text { max-width: none; }
    }

    @media (max-width: 480px)  {
      .frame {
        height: auto;
        width: calc(100vw - 24px);
        max-width: none;
      }
      .text-block { bottom: 14px; left: 16px; right: 16px; } 
      .tag { top: 12px; left: 12px; font-size: 0.74rem; height: 30px; padding: 0 13px 0 11px; }
      .video-link { top: 12px; right: 12px; font-size: 0.64rem; height: 30px; }
      .index { display: none; } 
      .scroll-btn { bottom: 18px; }
      .lang-toggle { display: none; }

      .intro-hero { max-width: 100%; }
      .intro-title__mark {
        font-size: clamp(2rem, 12.5vw, 3.1rem);
        letter-spacing: 0.02em;
        text-indent: 0.02em;
        max-width: 100%;
      }
      .intro-title__rest { font-size: clamp(0.65rem, 3.25vw, 1rem); }
      .intro-sub { font-size: 0.66rem; letter-spacing: 0.13em; }
      .intro-lang { margin-bottom: 18px; }
      .lang-pill { font-size: 0.66rem; padding: 7px 14px; letter-spacing: 0.12em; }

      .intro-logos { gap: 18px; }
      .logo-undp { height: 67px; }
      .logo-rok { height: 49px; }

      .lang-pill, .scroll-btn, .tag, .video-link {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
      }
      .lang-pill { background: rgba(0, 110, 181,0.82); }
      .lang-pill.is-active { background: rgba(0, 110, 181,0.95); }
      .scroll-btn { background: rgba(15,15,15,0.55); }
      .tag { background: rgba(15,15,15,0.5); }
      .video-link { background: rgba(0, 110, 181,0.85); }
    }

html, body { height: 100%; overflow: hidden; }
body { display: flex; flex-direction: column; }
.country-header { flex-shrink: 0; position: relative; z-index: 400; }
.scroll-wrap { flex: 1 1 auto; min-height: 0; height: auto; }
.slide { height: 100%; }

.frame {
  width: min(1600px, calc(100vw - 40px), calc((100vh - 200px) * var(--ar, 1.5)));
}

.scroll-wrap a { background-image: none; }
.intro-title { text-transform: none; }
.intro-title .intro-title__mark { text-transform: uppercase; }

.slide--footer {
  height: auto;
  min-height: 0;
  display: block;
  scroll-snap-align: end;
  background: var(--black);
}
.slide--footer .footer { width: 100%; }
.slide--footer a { background-image: none; }

:lang(ko),
html[lang="ko"] body {
  font-family: "Noto Sans KR", var(--undpds-font-family-primary);
}

.text-block .cap-meta {
  display: block;
  color: var(--undpds-color-blue-400);
  font-weight: 700;
  margin-bottom: 4px;
}
.context-body + .context-body {
  margin-top: 0.6em;
}

.context-body {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.context-body .photog-name {
  color: var(--undpds-color-blue-400);
  font-weight: 700;
}

html[lang="ko"] .intro-title__rest {
  font-style: normal;
}

html[lang="ko"] .intro-title__mark {
  font-family: var(--undpds-font-family-secondary); 
}

.context-credit {
  margin-top: 0.9em;
  font-size: var(--undpds-font-size-12);
  color: rgba(255,255,255,0.6);
}

.slide--closing { background: var(--black); }

.slide--closing .intro-title__mark,
.slide--closing .intro-sub,
.slide--closing .intro-logos {
  animation: none;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.3s cubic-bezier(0.16, 1, 0.3, 1), transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.slide--closing.active .intro-title__mark,
.slide--closing.active .intro-sub,
.slide--closing.active .intro-logos {
  opacity: 1;
  transform: translateY(0);
}
.slide--closing.active .intro-title__mark { transition-delay: 0.4s; }
.slide--closing.active .intro-sub { transition-delay: 0.65s; }
.slide--closing.active .intro-logos { transition-delay: 0.9s; }

@media (min-width: 1025px) {
  .context-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 clamp(28px, 3vw, 56px);
    align-items: start;
  }
  .context-block + .context-block {
    margin-top: 0;
  }
  .context-cta {
    grid-column: 1 / -1;
  }
}

.cap-toggle {
  display: contents;
}
.cap-chevron,
.cap-fallback {
  display: none;
}

.cap-toggle {
  display: block;
  width: 100%;
  margin: 0 0 4px;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: default;
}
.cap-toggle .cap-meta {
  margin-bottom: 0;
}

@media (max-width: 480px) {
  .text-block {
    pointer-events: auto;
  }
  .cap-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 4px 0;
    color: var(--undpds-color-blue-400);
    font: inherit;
    cursor: pointer;
  }
  .cap-fallback {
    display: inline;
  }
  .cap-chevron {
    display: inline-block;
    width: 11px;
    height: 8px;
    transition: transform 0.3s ease;
  }
  .caption-open .cap-chevron {
    transform: rotate(180deg);
  }
  .cap-text {
    display: none;
  }
  .caption-open .cap-text {
    display: block; 
    margin-top: 4px;
  }
}

@media (max-width: 480px) {
  .frame:has(.caption-open) .overlay {
    background: linear-gradient(
      180deg,
      rgba(0,0,0,0.30) 0%,
      rgba(0,0,0,0.55) 35%,
      rgba(0,0,0,0.78) 70%,
      rgba(0,0,0,0.88) 100%
    );
  }
}

.frame .img--top {
  top: 0;
}

.frame.frame--anchor-top img {
  top: 1.5%;
}