/*
 * SLC V6 - Rail Atlas
 * A lighter steel-blue system with one frosted hero surface and a researched corridor map.
 */

:root {
  --canvas: #edf4f9;
  --surface: #f8fbfd;
  --surface-muted: #dfeaf2;
  --surface-blue: #d3e3ef;
  --steel-950: #061c2f;
  --steel-900: #0a2a43;
  --steel-800: #123d5d;
  --steel-700: #315b76;
  --steel-600: #527188;
  --signal: #0868c9;
  --signal-strong: #0754a4;
  --signal-soft: #2b8bdc;
  --line: rgb(12 61 96 / 0.14);
  --line-strong: rgb(8 104 201 / 0.28);
  --shadow: 0 24px 64px rgb(25 66 96 / 0.13);
  --shadow-blue: 0 26px 68px rgb(7 69 126 / 0.18);
}

/* One measured title scale across the page */

.section-title,
.briefing-intro .section-title,
.sulfur-copy .section-title,
.inquiry-copy .section-title {
  max-width: 16ch;
  font-size: clamp(2.25rem, 3.5vw, 3.95rem);
  line-height: 1.08;
}

html[lang="fa"] .section-title,
html[lang="fa"] .briefing-intro .section-title,
html[lang="fa"] .sulfur-copy .section-title,
html[lang="fa"] .inquiry-copy .section-title {
  line-height: 1.2;
}

.briefing-group h3,
.briefing-group:nth-child(2) h3 {
  font-size: clamp(1.85rem, 2.7vw, 3.1rem);
}

.control-feature h3 {
  font-size: clamp(2.2rem, 3.25vw, 3.65rem);
}

.process-spine > h2 {
  max-width: 17ch;
  font-size: clamp(2.15rem, 3.25vw, 3.65rem);
  line-height: 1.12;
}

html[lang="fa"] .process-spine > h2 {
  line-height: 1.24;
}

/* The top edge belongs to the photograph, not a white navigation slab */

.site-header:not(.is-scrolled) {
  border-bottom-color: rgb(255 255 255 / 0.12);
  background:
    linear-gradient(180deg, rgb(5 25 42 / 0.86), rgb(6 31 51 / 0.6));
  box-shadow: 0 12px 34px rgb(3 17 29 / 0.13);
  backdrop-filter: blur(16px) saturate(126%);
  -webkit-backdrop-filter: blur(16px) saturate(126%);
}

.site-header:not(.is-scrolled) .nav-link {
  color: rgb(235 245 252 / 0.82);
}

.site-header:not(.is-scrolled) .nav-link.is-active {
  color: #ffffff;
}

.site-header:not(.is-scrolled) .brand-name {
  color: #f4f9fc;
}

.site-header:not(.is-scrolled) .language-link,
.site-header:not(.is-scrolled) .menu-button {
  border-color: rgb(255 255 255 / 0.2);
  background: rgb(255 255 255 / 0.09);
  color: #f4f9fc;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12);
}

/* Hero: retain the approved switchyard, remove the white wash */

.hero {
  background: #9fb3c1;
}

.hero-media img {
  filter: saturate(1.12) brightness(1.02) contrast(1.02);
}

.hero-media::after,
[dir="rtl"] .hero-media::after {
  background: transparent;
}

.hero-shade,
[dir="rtl"] .hero-shade {
  background: transparent;
}

.hero-copy {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgb(255 255 255 / 0.68);
  background: rgb(245 250 253 / 0.32);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.86),
    inset 0 -1px 0 rgb(255 255 255 / 0.18),
    0 24px 70px rgb(3 21 35 / 0.2);
  backdrop-filter: blur(10px) saturate(120%) brightness(1.18);
  -webkit-backdrop-filter: blur(10px) saturate(120%) brightness(1.18);
}

.hero-copy::before {
  display: none;
}

.hero-copy::after {
  position: absolute;
  z-index: 0;
  inset: 1px;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: calc(var(--radius-panel) - 1px);
  background: transparent;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.34),
    inset 1px 0 0 rgb(255 255 255 / 0.1);
  content: "";
  pointer-events: none;
}

.hero-copy > * {
  position: relative;
  z-index: 1;
}

.hero h1,
html[lang="fa"] .hero h1 {
  color: #061d31;
}

.hero-lead {
  color: #244e69;
}

.hero .button-quiet {
  border-color: rgb(6 76 137 / 0.22);
  background: rgb(248 252 255 / 0.52);
}

.launch-panel {
  background:
    linear-gradient(135deg, rgb(248 252 254 / 0.96), rgb(226 237 245 / 0.95));
}

/* 2010 now supports a compact operational story instead of occupying a full chapter */

.operation-band {
  min-height: auto;
  padding-block: clamp(4.8rem, 7vw, 7rem);
  background:
    radial-gradient(circle at 78% 14%, rgb(43 139 220 / 0.24), transparent 30rem),
    linear-gradient(112deg, var(--steel-950), var(--steel-900) 56%, #0a4e85);
}

.operation-band::before {
  inset: -18% auto -18% 30%;
  width: 2px;
  background: rgb(255 255 255 / 0.14);
  box-shadow:
    2.2rem 0 0 rgb(255 255 255 / 0.045),
    4.4rem 0 0 rgb(255 255 255 / 0.025);
}

[dir="rtl"] .operation-band::before {
  inset: -18% 30% -18% auto;
}

.operation-band::after {
  opacity: 0.7;
}

.operation-layout {
  display: grid;
  min-height: auto;
  grid-template-columns: minmax(15rem, 0.56fr) minmax(0, 1.44fr);
  align-items: start;
  gap: clamp(2.5rem, 7vw, 7rem);
}

.operation-year {
  align-self: start;
  padding-top: 0.3rem;
}

.operation-year strong {
  display: block;
  margin-top: 0.25rem;
  font-size: clamp(4.8rem, 8.5vw, 8.2rem);
  line-height: 0.86;
}

.operation-year small {
  display: block;
  max-width: 26rem;
  margin-top: 1.35rem;
  color: rgb(220 235 245 / 0.7);
  font-size: 0.88rem;
  line-height: 1.9;
}

.operation-statement h2 {
  max-width: 17ch;
  color: #f7fbfe;
  font-size: clamp(2.4rem, 3.9vw, 4.3rem);
  line-height: 1.08;
}

html[lang="fa"] .operation-statement h2 {
  line-height: 1.24;
}

.operation-statement > p {
  max-width: 45rem;
  margin-top: 1.35rem;
}

.operation-proof {
  display: grid;
  margin-top: clamp(2.2rem, 4vw, 3.6rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgb(255 255 255 / 0.18);
}

.operation-proof li {
  min-height: 9.5rem;
  padding: 1.35rem 1.2rem 0 0;
}

[dir="rtl"] .operation-proof li {
  padding: 1.35rem 0 0 1.2rem;
}

.operation-proof li + li {
  border-inline-start: 1px solid rgb(255 255 255 / 0.13);
  padding-inline-start: 1.2rem;
}

.operation-proof strong,
.operation-proof span {
  display: block;
}

.operation-proof strong {
  color: #ffffff;
  font-size: 1rem;
}

.operation-proof span {
  margin-top: 0.75rem;
  color: rgb(220 235 245 / 0.72);
  font-size: 0.82rem;
  line-height: 1.8;
}

/* Faster briefing rhythm: cards remain readable while the next card arrives */

.briefing-groups {
  gap: 4.5vh;
  padding-bottom: 2vh;
}

.briefing-group {
  min-height: 19rem;
}

/* Geographic corridor console */

.corridor-section {
  background:
    radial-gradient(circle at 50% 32%, rgb(37 125 194 / 0.09), transparent 34rem),
    #e8f1f7;
}

.corridor-section::before {
  display: none;
}

.corridor-heading {
  max-width: 52rem;
}

.corridor-console {
  grid-template-columns: minmax(18rem, 0.4fr) minmax(0, 1fr);
  min-height: 41rem;
  overflow: hidden;
  border-color: rgb(7 76 132 / 0.2);
  background: #dce9f2;
  box-shadow: 0 30px 76px rgb(19 62 94 / 0.15);
}

.route-selector {
  display: flex;
  padding: clamp(1.4rem, 2.5vw, 2.25rem);
  flex-direction: column;
  gap: 0.7rem;
  border-color: rgb(255 255 255 / 0.11);
  background:
    radial-gradient(circle at 20% 0%, rgb(43 139 220 / 0.24), transparent 18rem),
    linear-gradient(155deg, #0b304c, #0a253b);
}

.route-selector-copy {
  margin-bottom: 1.1rem;
}

.route-selector-copy strong {
  display: block;
  color: #f7fbfe;
  font-family: "IRANYekanX", "Segoe UI", sans-serif;
  font-size: clamp(1.55rem, 2.2vw, 2.25rem);
  line-height: 1.25;
}

.route-selector-copy p {
  max-width: 28rem;
  margin-top: 0.75rem;
  color: rgb(218 235 247 / 0.67);
  font-size: 0.82rem;
  line-height: 1.8;
}

.route-option {
  position: relative;
  min-height: 6.2rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: rgb(255 255 255 / 0.055);
  color: rgb(226 239 248 / 0.7);
}

.route-option::before {
  width: 3px;
  background: var(--signal-soft);
}

.route-option.is-active,
[dir="rtl"] .route-option.is-active {
  border-color: rgb(255 255 255 / 0.36);
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.97), rgb(224 238 248 / 0.94));
  box-shadow: 0 16px 38px rgb(1 16 28 / 0.22);
  color: var(--steel-950);
}

.route-option span {
  font-family: "IRANYekanX", "Segoe UI", sans-serif;
  font-size: 1rem;
}

.route-option small {
  margin-top: 0.45rem;
  color: inherit;
  opacity: 0.68;
}

.route-readout {
  margin-top: auto;
  padding-top: 1.3rem;
  border-top: 1px solid rgb(255 255 255 / 0.13);
}

.route-readout > span {
  color: rgb(166 207 236 / 0.72);
  font-size: 0.7rem;
}

.route-readout p {
  display: none;
  margin-top: 0.65rem;
  color: rgb(239 247 252 / 0.84);
  font-size: 0.79rem;
  line-height: 1.9;
}

.corridor-console[data-route="afghanistan"] [data-route-readout="afghanistan"],
.corridor-console[data-route="central-asia"] [data-route-readout="central-asia"] {
  display: block;
}

.route-map {
  display: grid;
  min-height: 41rem;
  padding: clamp(1rem, 2vw, 1.8rem);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  background:
    radial-gradient(circle at 73% 34%, rgb(8 104 201 / 0.11), transparent 18rem),
    linear-gradient(145deg, #edf5fa, #dce9f2);
}

.route-map::before {
  inset: 10% 11%;
  width: auto;
  border: 1px solid rgb(8 104 201 / 0.08);
  border-radius: 50%;
  background: transparent;
  aspect-ratio: auto;
}

.route-map svg {
  width: 100%;
  max-height: 35rem;
  overflow: visible;
}

.iran-outline {
  fill: url(#iran-map-fill);
  stroke: rgb(21 75 111 / 0.34);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.map-country-label {
  fill: rgb(10 57 88 / 0.14);
  font-family: "Arial Narrow", "Segoe UI", sans-serif;
  font-size: 4.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.map-rail {
  fill: none;
  stroke: rgb(18 71 108 / 0.2);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.map-route {
  fill: none;
  stroke: var(--signal);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.map-node {
  opacity: 0.26;
  transition: opacity 180ms ease;
}

.corridor-console[data-route="afghanistan"] [data-route-node~="afghanistan"],
.corridor-console[data-route="central-asia"] [data-route-node~="central-asia"] {
  opacity: 1;
}

.map-node circle {
  fill: #f8fbfd;
  stroke: var(--signal);
  stroke-width: 2.25;
  vector-effect: non-scaling-stroke;
}

.map-node .node-halo {
  fill: rgb(8 104 201 / 0.12);
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
}

.map-node-external circle:not(.node-halo) {
  fill: var(--signal);
  stroke: #ffffff;
}

.map-node text {
  fill: #173f59;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.map-cargo {
  fill: #ffffff;
  stroke: var(--signal);
  stroke-width: 3;
  filter: drop-shadow(0 4px 6px rgb(7 62 108 / 0.28));
  vector-effect: non-scaling-stroke;
}

@keyframes map-node-pulse {
  0%,
  100% {
    opacity: 0.24;
    transform: scale(0.78);
  }

  50% {
    opacity: 0.58;
    transform: scale(1.18);
  }
}

.corridor-console[data-route="afghanistan"]
  .map-node-external[data-route-node~="afghanistan"]
  .node-halo,
.corridor-console[data-route="central-asia"]
  .map-node-external[data-route-node~="central-asia"]
  .node-halo {
  animation: map-node-pulse 1.8s ease-in-out infinite;
}

.route-map figcaption {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: 46rem;
  padding: 0.9rem 1rem 0;
  border-top: 1px solid rgb(14 64 101 / 0.12);
  color: #46677d;
  font-size: 0.72rem;
  line-height: 1.8;
}

/* Keep the strong control composition, but return its heading to the shared scale */

.control-section .section-heading .section-title {
  max-width: 13ch;
  font-size: clamp(2.25rem, 3.5vw, 3.95rem);
}

.inquiry-copy .section-title {
  max-width: 15ch;
}

.motion-ready .operation-proof li,
.motion-ready .iran-outline,
.motion-ready .map-node {
  will-change: transform, opacity;
}

@media (hover: hover) and (pointer: fine) {
  .site-header:not(.is-scrolled) .language-link:hover,
  .site-header:not(.is-scrolled) .menu-button:hover {
    border-color: rgb(255 255 255 / 0.36);
    background: rgb(255 255 255 / 0.16);
    color: #ffffff;
  }

  .route-option:hover {
    border-color: rgb(255 255 255 / 0.25);
    background: rgb(255 255 255 / 0.1);
    color: #ffffff;
  }

  .route-option.is-active:hover {
    background: #f8fbfd;
    color: var(--steel-950);
  }
}

@media (max-width: 64rem) {
  .operation-layout {
    grid-template-columns: minmax(12rem, 0.48fr) minmax(0, 1.52fr);
    gap: 3rem;
  }

  .operation-proof {
    grid-template-columns: minmax(0, 1fr);
  }

  .operation-proof li {
    min-height: auto;
    padding-block: 1.1rem;
  }

  .operation-proof li + li {
    border-inline-start: 0;
    border-top: 1px solid rgb(255 255 255 / 0.13);
    padding-inline-start: 0;
  }

  .corridor-console {
    grid-template-columns: minmax(16rem, 0.42fr) minmax(0, 1fr);
  }

  .route-map,
  .corridor-console {
    min-height: 35rem;
  }
}

@media (max-width: 47.99rem) {
  .section-title,
  .briefing-intro .section-title,
  .sulfur-copy .section-title,
  .inquiry-copy .section-title,
  .control-section .section-heading .section-title {
    font-size: clamp(2.05rem, 9vw, 3rem);
  }

  .site-header:not(.is-scrolled) {
    background: rgb(5 27 45 / 0.78);
  }

  .hero-shade,
  [dir="rtl"] .hero-shade {
    background: transparent;
  }

  .hero-copy {
    border-color: rgb(255 255 255 / 0.64);
    background: rgb(245 250 253 / 0.38);
    backdrop-filter: blur(9px) saturate(118%) brightness(1.16);
    -webkit-backdrop-filter: blur(9px) saturate(118%) brightness(1.16);
  }

  .operation-band {
    padding-block: 4.2rem;
  }

  .operation-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.6rem;
  }

  .operation-year strong {
    font-size: clamp(4.2rem, 24vw, 6.4rem);
  }

  .operation-statement h2 {
    font-size: clamp(2.1rem, 9.5vw, 3.2rem);
  }

  .briefing-groups {
    gap: 1rem;
  }

  .corridor-console {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
  }

  .route-selector {
    min-height: auto;
  }

  .route-readout {
    margin-top: 1rem;
  }

  .route-map {
    min-height: 25rem;
    padding: 0.8rem;
  }

  .route-map::before {
    inset: 10% 5%;
  }

  .route-map svg {
    max-height: 25rem;
  }

  .map-country-label {
    font-size: 4rem;
  }

  .map-node text {
    font-size: 12px;
  }

  .route-map figcaption {
    padding-inline: 0.35rem;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .hero-copy {
    background: rgb(229 240 247 / 0.96);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-node,
  .route-option {
    transition: none;
  }

  .motion-ready .operation-proof li,
  .motion-ready .iran-outline,
  .motion-ready .map-node {
    will-change: auto;
  }

  .map-node .node-halo {
    animation: none !important;
  }
}