/* The Mountains of Pakistan: 3D journey page */
.mt-page { background: #0a120d; }
.mt-canvas { position: fixed; inset: 0; z-index: 0; }
.mt-canvas canvas { display: block; width: 100%; height: 100%; }
.mt-fallback { position: absolute; inset: 0; background: radial-gradient(120% 70% at 70% 20%, #2c4a3e, transparent 60%), radial-gradient(80% 60% at 20% 90%, #4a3424, transparent 60%), linear-gradient(180deg, #0f1c17, #0a120d); }
.mt-canvas.is-live .mt-fallback { display: none; }
.mt-canvas::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(130% 90% at 50% 50%, transparent 55%, rgba(5,9,7,.75)); }
.mt-labels { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.mt-label { position: absolute; left: 0; top: 0; padding: 5px 10px; font: 500 .62rem/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--ivory); white-space: nowrap;
  background: rgba(10,18,13,.55); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); transition: opacity .4s; will-change: transform; }
.mt-label.is-active { background: color-mix(in srgb, var(--c) 30%, rgba(10,18,13,.8)); border-color: var(--c); }
.mt-story { position: relative; z-index: 2; }
.mt-intro { min-height: 100vh; display: grid; align-content: center; gap: 22px; padding: calc(var(--header-h, 80px) + 40px) var(--gutter) 80px; max-width: var(--maxw); margin: 0 auto; text-shadow: 0 2px 30px rgba(0,0,0,.6); }
.mt-intro .display { margin: 0; font-size: min(var(--fs-display), 11.5vw); }
.mt-intro .lead { max-width: 46ch; }
.mt-scroll { display: inline-flex; align-items: center; gap: 12px; font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--text-soft); }
.mt-scroll i { width: 1px; height: 42px; background: linear-gradient(var(--gold), transparent); animation: mt-cue 2.2s ease-in-out infinite; }
@keyframes mt-cue { 50% { transform: translateY(8px); opacity: .4; } }
.mt-station { min-height: 120vh; display: flex; align-items: center; padding: 10vh var(--gutter); max-width: var(--maxw); margin: 0 auto; }
.mt-card { position: relative; width: min(440px, 100%); padding: clamp(22px, 3vw, 34px); display: grid; gap: 14px; background: rgba(10,18,13,.72); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--line); border-top: 2px solid var(--c, var(--gold)); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.mt-card p { margin: 0; color: var(--text-soft); line-height: 1.65; }
.mt-card .h2 { margin: 0; }
.mt-card .eyebrow { color: color-mix(in srgb, var(--c, var(--gold)) 65%, var(--gold-lt)); }
.mt-num { position: absolute; right: 22px; top: 16px; font: 400 2.4rem/1 var(--f-display); color: color-mix(in srgb, var(--c, var(--gold)) 75%, #fff); opacity: .85; }
.mt-minerals { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.mt-minerals li { padding: 5px 10px; font-size: .74rem; border: 1px solid color-mix(in srgb, var(--c, var(--gold)) 45%, transparent); color: var(--text); }
.mt-coords { font-size: .74rem !important; letter-spacing: .12em; color: var(--text-dim) !important; }
.mt-coords span { margin-left: 6px; font-style: italic; letter-spacing: 0; }
.mt-prologue .mt-card, .mt-deep .mt-card { width: min(560px, 100%); }
.mt-station:nth-of-type(even) { justify-content: flex-end; }
.mt-deep { justify-content: center !important; min-height: 160vh; }
.mt-deep .mt-card { --c: #b48cff; }
.mt-dots { position: fixed; right: 18px; top: 50%; z-index: 3; transform: translateY(-50%); display: grid; gap: 9px; }
.mt-dots a { position: relative; display: block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--c); background: transparent; transition: background .3s, transform .3s; }
.mt-dots a[aria-current], .mt-dots a:hover, .mt-dots a:focus-visible { background: var(--c); transform: scale(1.25); }
.mt-dots span { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ivory); opacity: 0; pointer-events: none; transition: opacity .3s; background: rgba(10,18,13,.8); padding: 4px 8px; }
.mt-dots a:hover span, .mt-dots a:focus-visible span, .mt-dots a[aria-current] span { opacity: 1; }
.mt-page .site-footer { position: relative; z-index: 2; background: var(--midnight); }
@media (max-width: 760px) {
  .mt-station { min-height: 110vh; align-items: flex-end; padding: 0 12px 14vh; justify-content: center !important; }
  .mt-card { width: 100%; padding: 20px; }
  .mt-dots { display: none; }
  .mt-dots a { width: 8px; height: 8px; }
  .mt-dots a span { display: none; }
  .mt-label { font-size: .56rem; padding: 4px 7px; }
}
@media (prefers-reduced-motion: reduce) { .mt-scroll i { animation: none; } }
.mt-card { min-width: 0; }
.mt-card .row { flex-wrap: wrap; }
.mt-card .btn { max-width: 100%; white-space: normal; text-align: center; }