@font-face {
  font-family: "Stance Rajdhani";
  src: url("/assets/fonts/Rajdhani/Rajdhani-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Stance Rajdhani";
  src: url("/assets/fonts/Rajdhani/Rajdhani-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

.stance-story {
  --night: #080b0d;
  --night-soft: #12191c;
  --text-primary: #f3f6f7;
  --text-muted: #aab6b8;
  --line: rgba(243, 246, 247, .2);
  --accent-cyan: #55dce7;
  --accent-teal: #18a8aa;
  min-height: 100dvh;
  overflow: clip;
  background: var(--night);
  color: var(--text-primary);
  font-family: "Stance Rajdhani", "Trebuchet MS", sans-serif;
  letter-spacing: .015em;
  line-height: 1.5;
}
.stance-story *, .stance-story *::before, .stance-story *::after { box-sizing: border-box; }
.stance-story a { color: inherit; text-decoration: none; }
.stance-story button { color: inherit; font: inherit; }
.stance-story a:focus-visible, .stance-story button:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 5px;
}
.story-topbar {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 25px clamp(22px, 5.4vw, 78px);
  color: var(--text-primary);
}
.story-brand { display: inline-flex; align-items: center; gap: 12px; }
.story-brand img { width: 34px; height: 34px; object-fit: contain; }
.story-brand span { font-size: 20px; font-weight: 700; letter-spacing: .045em; }
.story-nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 42px); font-size: 15px; }
.story-nav a:not(.story-nav-cta) { opacity: .84; transition: opacity .2s ease; }
.story-nav a:not(.story-nav-cta):hover { opacity: 1; }
.story-nav-cta, .story-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-height: 48px;
  padding: 0 21px;
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 10px;
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(6px) brightness(.75);
  backdrop-filter: blur(6px) brightness(.75);
  font-size: 15px;
  font-weight: 700;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.story-nav-cta:hover, .story-button:hover {
  transform: translateY(-2px);
  border-color: rgba(85, 220, 231, .65);
  background: rgba(255, 255, 255, .21);
}
.story-nav-cta { min-height: 39px; padding: 0 16px; border-radius: 14px; }
.story-section {
  position: relative;
  --story-hold-ratio: .25;
  min-height: calc(var(--story-pin-height, 100svh) + 128svh + 100svh * var(--story-hold-ratio));
  isolation: isolate;
  --story-progress: 0;
}
.story-section--hero { min-height: 100svh; }
.story-pin {
  position: sticky;
  top: 0;
  display: flex;
  min-height: 100svh;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.story-section--hero .story-pin { min-height: 100svh; }
.story-photo {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}
.story-photo::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(5, 7, 9, .93) 0%, rgba(5, 7, 9, .7) 42%, rgba(5, 7, 9, .08) 100%),
    linear-gradient(0deg, rgba(5, 7, 9, .55), transparent 38%);
}
.story-section--hero .story-photo::after {
  background: linear-gradient(90deg, rgba(5, 7, 9, .84) 0%, rgba(5, 7, 9, .44) 47%, rgba(5, 7, 9, .04) 100%),
    linear-gradient(0deg, rgba(5, 7, 9, .62), transparent 45%);
}
.story-content {
  width: min(1160px, calc(100% - 2 * clamp(24px, 8.5vw, 132px)));
  margin: 0 auto;
  padding: 100px 0 72px;
  opacity: 1;
  transform: translateY(0);
}
.story-enhanced [data-story-item] {
  opacity: clamp(0, calc(var(--story-progress) * var(--story-item-count) - var(--story-item-index)), 1);
}
:root.story-js .stance-story:not(.story-enhanced) [data-story-item] { opacity: 0; }
.story-enhanced .story-section:not(.story-section--hero) .story-side-index {
  opacity: clamp(0, var(--story-progress), 1);
}
.story-enhanced [data-story-item]:focus-within { opacity: 1; }
.story-section--hero .story-content { padding-top: 115px; }
.story-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  color: var(--accent-cyan);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
}
.story-kicker::before { width: 26px; height: 1px; background: currentColor; content: ""; }
.story-title {
  max-width: 800px;
  margin: 0;
  font-size: clamp(54px, 8.8vw, 118px);
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.story-title em {
  color: var(--accent-cyan);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .88em;
  font-weight: 400;
  letter-spacing: -.065em;
  text-transform: none;
}
.story-lede {
  max-width: 450px;
  margin: 28px 0 31px;
  color: rgba(243, 246, 247, .86);
  font-family: "Stance Rajdhani", sans-serif;
  font-weight: 500;
  font-size: clamp(17px, 1.65vw, 21px);
  line-height: 1.55;
}
.story-actions { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; }
.stance-story .story-button--filled {
  border-color: rgba(255, 255, 255, .3);
  background: linear-gradient(135deg, rgba(28, 37, 38, .9), rgba(22, 31, 32, .72));
  color: #fff;
}
.stance-story .story-button--filled:hover {
  filter: brightness(1.18);
  border-color: rgba(85, 220, 231, .65);
}
.story-scroll-note {
  position: absolute;
  right: clamp(24px, 5.4vw, 78px);
  bottom: 35px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(243, 246, 247, .76);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.story-scroll-note::before { width: 42px; height: 1px; background: var(--accent-cyan); content: ""; }
.story-side-index {
  position: absolute;
  right: clamp(24px, 5.4vw, 78px);
  top: 50%;
  color: rgba(243, 246, 247, .78);
  font-size: 12px;
  letter-spacing: .14em;
  writing-mode: vertical-rl;
  text-transform: uppercase;
}
.story-copy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 350px);
  gap: 9vw;
  align-items: end;
}
.story-copy-grid .story-title { max-width: 710px; }
.story-copy-grid .story-lede { margin-bottom: 5px; }
.story-photo-caption {
  position: absolute;
  right: clamp(24px, 5.4vw, 78px);
  bottom: 34px;
  color: rgba(243, 246, 247, .8);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.story-split {
  display: grid;
  grid-template-columns: minmax(250px, .85fr) minmax(300px, 1.15fr);
  gap: clamp(35px, 8vw, 120px);
  align-items: center;
}
.story-split .story-title { font-size: clamp(48px, 6.6vw, 84px); }
.story-map-card {
  position: relative;
  min-height: 385px;
  border: 1px solid rgba(243,246,247,.38);
  background:
    radial-gradient(ellipse at 54% 44%, rgba(85,220,231,.12), transparent 42%),
    linear-gradient(135deg, rgba(13,20,23,.62), rgba(8,12,14,.92));
  box-shadow: 22px 25px 70px rgba(0,0,0,.26);
  overflow: hidden;
}
.story-map-card::before, .story-map-card::after {
  position: absolute;
  content: "";
  inset: -30%;
  opacity: .45;
  background: repeating-linear-gradient(28deg, transparent 0 45px, rgba(85,220,231,.14) 46px, transparent 47px 83px);
  transform: rotate(-12deg);
}
.story-map-card::after { opacity: .3; transform: rotate(47deg) scale(1.15); }
.map-route { position: absolute; z-index: 1; left: 17%; top: 64%; width: 69%; height: 1px; background: var(--accent-cyan); transform: rotate(-29deg); transform-origin: left; }
.map-route::before, .map-route::after {
  position: absolute; top: -4px; width: 8px; height: 8px; border: 1px solid var(--text-primary); border-radius: 50%; background: var(--accent-teal); content: "";
}
.map-route::before { left: 0; }
.map-route::after { right: 0; }
.map-pin {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--accent-cyan);
  border-radius: 50%;
  background: rgba(8,11,13,.94);
  color: var(--accent-cyan);
  font-size: 11px;
}
.map-pin--one { left: 23%; top: 57%; }
.map-pin--two { right: 19%; top: 30%; }
.map-label {
  position: absolute;
  z-index: 3;
  padding: 9px 12px;
  border: 1px solid rgba(243,246,247,.22);
  background: rgba(8,11,13,.9);
  font-size: 12px;
  letter-spacing: .04em;
}
.map-label--one { left: 14%; bottom: 20%; }
.map-label--two { right: 8%; top: 19%; }
.map-card-meta {
  position: absolute;
  z-index: 4;
  right: 18px;
  bottom: 16px;
  left: 18px;
  display: flex;
  justify-content: space-between;
  color: rgba(243,246,247,.72);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.story-gallery {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 7vw, 100px);
  align-items: center;
}
.story-gallery-image {
  position: relative;
  height: min(58vh, 510px);
  min-height: 310px;
  overflow: hidden;
  background: var(--night-soft);
}
.story-gallery-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-gallery-image::after { position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(5,7,9,.72)); content: ""; pointer-events: none; }
.story-gallery-caption { position: absolute; z-index: 1; bottom: 20px; left: 22px; font-family: "Stance Rajdhani", sans-serif; font-size: 18px; font-weight: 500; }
.story-gallery-copy .story-title { font-size: clamp(48px, 6.8vw, 88px); }
.story-gallery-copy .story-lede { max-width: 390px; }
.story-gallery-controls { display: flex; gap: 8px; margin-top: 27px; }
.story-gallery-controls button {
  width: 46px; height: 30px; padding: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; background: rgba(255,255,255,.1); -webkit-backdrop-filter: blur(6px) brightness(.75); backdrop-filter: blur(6px) brightness(.75); cursor: pointer;
}
.story-gallery-controls button:hover { border-color: rgba(85,220,231,.65); background: rgba(255,255,255,.18); }
.story-gallery-controls button::after { content: ""; display: block; height: 4px; background: rgba(243,246,247,.42); }
.story-gallery-controls button[aria-pressed="true"]::after { background: var(--accent-cyan); }
.story-final .story-photo { background-position: center 54%; }
.story-final .story-photo::after { background: linear-gradient(90deg, rgba(5,7,9,.9), rgba(5,7,9,.56) 50%, rgba(5,7,9,.1)), linear-gradient(0deg, rgba(5,7,9,.72), transparent 58%); }
.story-final .story-title { max-width: 680px; font-size: clamp(56px, 8vw, 104px); }
.story-footer {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 36px clamp(24px, 5.4vw, 78px);
  border-top: 1px solid var(--line);
  background: var(--night);
  color: rgba(243,246,247,.7);
  font-size: 12px;
}
.story-footer-links { display: flex; gap: 24px; }
.story-footer-links a { display: inline-flex; align-items: center; gap: 8px; }
.story-footer a:hover { color: var(--text-primary); }
.story-grain {
  position: fixed;
  z-index: 30;
  inset: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
@media (max-width: 760px) {
  .story-topbar { padding: 17px 20px; }
  .story-brand img { width: 29px; height: 29px; }
  .story-brand span { font-size: 18px; }
  .story-nav { gap: 0; }
  .story-nav > a:not(.story-nav-cta) { display: none; }
  .story-nav-cta { min-height: 38px; padding: 0 13px; font-size: 13px; }
  .story-section { min-height: calc(var(--story-pin-height, 100svh) + 64svh + 100svh * var(--story-hold-ratio)); }
  .story-section--hero { min-height: 100svh; }
  .story-pin { min-height: 100svh; }
  .story-content { width: calc(100% - 44px); padding: 88px 0 68px; }
  .story-section--hero .story-content { padding-top: 94px; }
  .story-section--hero .story-photo { background-position: 61% center; }
  .story-photo::after, .story-section--hero .story-photo::after {
    background: linear-gradient(90deg, rgba(5,7,9,.74), rgba(5,7,9,.28)),
      linear-gradient(0deg, rgba(5,7,9,.76), transparent 65%);
  }
  .story-title { font-size: clamp(54px, 16vw, 78px); }
  .story-lede { max-width: 340px; font-size: 18px; }
  .story-scroll-note { right: 22px; bottom: 23px; font-size: 10px; }
  .story-side-index, .story-photo-caption { display: none; }
  .story-copy-grid, .story-split, .story-gallery { grid-template-columns: 1fr; gap: 25px; }
  .story-copy-grid { align-content: center; }
  .story-copy-grid .story-lede { margin-top: 0; }
  .story-split .story-title, .story-gallery-copy .story-title { font-size: clamp(48px, 13vw, 68px); }
  .story-map-card { min-height: 290px; }
  .story-gallery-image { height: 35svh; min-height: 250px; order: 2; }
  .story-gallery-copy { order: 1; }
  .story-gallery-copy .story-lede { margin: 18px 0; }
  .story-footer { padding: 28px 22px; }
  .story-footer-links { gap: 17px; }
}
@media (max-width: 390px) {
  .story-content { width: calc(100% - 36px); }
  .story-title { font-size: 51px; }
  .story-button { min-height: 45px; padding: 0 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .stance-story *, .stance-story *::before, .stance-story *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .story-enhanced [data-story-item],
  :root.story-js .stance-story:not(.story-enhanced) [data-story-item],
  .story-enhanced .story-section:not(.story-section--hero) .story-side-index { opacity: 1; }
}