@import url("https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&display=swap");

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.brand {
  font-family: "Engravers' Old English BT", "Old English Text MT", "UnifrakturCook", serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  white-space: nowrap;
}

.daniel-walker {
  position: absolute;
  z-index: 7;
  left: 4%;
  top: 87.5%;
  width: clamp(52px, 7vw, 96px);
  transform: translate(-50%, -94%);
  transform-origin: 50% 100%;
  pointer-events: none;
  filter: drop-shadow(0 14px 14px rgba(0, 0, 0, 0.65));
  transition: left 0.08s linear, top 0.08s linear, opacity 0.2s ease;
}

.daniel-walker img {
  display: block;
  width: 100%;
  height: auto;
  animation: walker-step 0.72s ease-in-out infinite alternate;
}

@keyframes walker-step {
  from { transform: translateY(0) rotate(-0.45deg); }
  to { transform: translateY(-3px) rotate(0.55deg); }
}

.journey-label {
  transition: opacity 0.28s ease, transform 0.28s ease, border-color 0.28s ease;
}

.journey-label.is-active {
  border-color: #36e477;
  box-shadow: 0 0 20px rgba(54, 228, 119, 0.28);
}

.journey-place.california span {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #dfffea;
}

@media (max-width: 820px) {
  .top .row {
    width: 100%;
    max-width: 100%;
    padding: 14px 18px 12px !important;
    gap: 10px !important;
  }

  .brand { font-size: 1.7rem; }

  .top nav {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 15px !important;
    overflow-x: auto;
    padding: 1px 0 5px;
    scrollbar-width: none;
  }

  .top nav::-webkit-scrollbar { display: none; }
  .top nav a { flex: 0 0 auto; }

  .hero { min-height: 100svh; }
  .hero { grid-template-columns: minmax(0, 1fr) !important; }
  .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden;
    margin: 0 !important;
    padding: 112px 20px 64px !important;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(3rem, 13vw, 4rem) !important;
    line-height: 0.88 !important;
    letter-spacing: -0.055em !important;
    overflow-wrap: normal;
  }

  .hero .dek,
  .hero-copy > p,
  .hero blockquote { width: 100%; max-width: 100%; }

  .journey-block { padding: 68px 0 38px !important; }
  .journey-intro {
    width: calc(100% - 36px) !important;
    margin-bottom: 24px !important;
  }

  .journey-stage {
    width: calc(100% - 20px) !important;
    height: min(760px, 86svh) !important;
    min-height: 650px !important;
    border-radius: 12px !important;
  }

  .journey-photo,
  .journey-photo.mexico,
  .journey-photo.california {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .journey-photo img { width: 100% !important; margin: 0 !important; transform: none !important; }
  .chapter .story-visual { transform: none !important; }
  .upper-story-beat .story-visual img { transform: none !important; }

  .journey-privacy {
    top: 12px !important;
    max-width: calc(100% - 24px) !important;
    padding: 6px 9px !important;
    font-size: 0.54rem !important;
    line-height: 1.28 !important;
  }

  .journey-place {
    top: 72px !important;
    padding: 9px 11px !important;
  }

  .journey-place.california {
    top: auto !important;
    bottom: 20px !important;
  }

  .journey-svg {
    inset: 20% 12% 16% !important;
    width: 76% !important;
    height: 64% !important;
  }

  .daniel-walker { width: clamp(46px, 15vw, 70px); }

  .journey-label {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    font-size: 0.62rem !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 86px !important;
    width: max-content;
    max-width: calc(100% - 32px);
    text-align: center;
    transform: translate(-50%, 8px);
  }

  .journey-label.is-active {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .journey-label.is-past { opacity: 0; }

  .data-lab {
    padding: 70px 0 !important;
    overflow: hidden;
  }

  .data-lab > .shell,
  .population-scale,
  .data-lab .shell {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .scale-frame { padding: 18px !important; }
  .scale-heading { gap: 16px !important; }
  .scale-heading h3 { font-size: clamp(2rem, 10vw, 3.4rem) !important; }
  .scale-value strong {
    font-size: clamp(3.4rem, 18vw, 5rem) !important;
    line-height: 0.9 !important;
    white-space: nowrap;
  }

  .people-field,
  .people-field canvas { min-height: 280px !important; height: 280px !important; }
  .scale-key { grid-template-columns: 1fr !important; }

  .depth-stage {
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
    overflow: visible !important;
    padding: 0 18px 54px;
    perspective: none !important;
  }

  .depth-world {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px;
    transform: none !important;
  }

  .population-plane,
  .big-number { display: none !important; }

  .holo-card,
  .holo-a,
  .holo-b,
  .holo-c {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    transform: none !important;
    padding: 22px !important;
    overflow: hidden;
  }

  .holo-card strong {
    font-size: clamp(3.1rem, 17vw, 4.8rem) !important;
    line-height: 0.88 !important;
    white-space: nowrap;
  }

  .holo-card span {
    max-width: none !important;
    font-size: 1rem;
    line-height: 1.5;
    margin-top: 12px !important;
  }

  .tax-3d { gap: 30px !important; margin-top: 30px !important; }
  .tower-stage {
    height: 350px !important;
    width: 100%;
    gap: 26px !important;
    overflow: hidden;
  }
  .tower-wrap { min-width: 0; flex: 1 1 0; }
  .tower { width: min(80px, 23vw) !important; margin-inline: auto; }
  .tower-label { font-size: 0.78rem; }
  .fact-grid-4d { grid-template-columns: 1fr !important; }
  .fact4d { transform: none !important; }
}

@media (max-width: 430px) {
  .story-main .shell { padding-left: 18px !important; padding-right: 18px !important; }
  .chapter,
  .chapter.reverse { gap: 24px !important; padding-top: 62px !important; padding-bottom: 62px !important; }
  .story-visual,
  .story-visual img { min-height: 290px !important; }
  .podcast-card { padding-left: 18px !important; padding-right: 18px !important; }
  .podcast-card audio { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .daniel-walker,
  .daniel-walker img,
  .journey-label { animation: none !important; transition: none !important; }
}

/* Continuous desert story world */
.desert-world {
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.55s ease;
  overflow: hidden;
}

.desert-world.is-active { opacity: 1; }

.desert-world-image {
  position: absolute;
  inset: -4%;
  background:
    linear-gradient(90deg, rgba(4, 6, 7, 0.7), rgba(4, 6, 7, 0.36) 50%, rgba(4, 6, 7, 0.68)),
    linear-gradient(to bottom, rgba(4, 6, 7, 0.32), rgba(4, 6, 7, 0.76)),
    url("desert-story-backdrop-v2.webp") center / cover no-repeat;
  transform: translate3d(var(--desert-pan-x, 0), var(--desert-pan-y, 0), 0) scale(1.08);
  transition: transform 0.12s linear;
  will-change: transform;
}

.desert-dust-canvas,
.desert-footprints {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.desert-dust-canvas { opacity: 0.68; }

.global-desert-walker {
  position: absolute;
  z-index: 3;
  left: 9%;
  top: 69%;
  width: clamp(52px, 6.4vw, 92px);
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.7));
  transition: opacity 0.25s ease;
  will-change: left, top, transform, opacity;
}

.global-desert-walker img {
  display: block;
  width: 100%;
  height: auto;
  animation: global-walker-step 0.64s ease-in-out infinite alternate;
}

@keyframes global-walker-step {
  from { transform: translateY(0) rotate(-0.7deg); }
  to { transform: translateY(-4px) rotate(0.75deg); }
}

.desert-footprint {
  position: absolute;
  width: 9px;
  height: 20px;
  border-radius: 58% 42% 48% 52%;
  border: 1px solid rgba(242, 212, 164, 0.38);
  background: rgba(39, 25, 15, 0.34);
  box-shadow: inset 0 -5px 0 rgba(232, 201, 151, 0.1), 0 2px 5px rgba(0, 0, 0, 0.25);
  opacity: 0;
  animation: footprint-life 4.4s ease-out forwards;
}

.desert-footprint::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 5px;
  height: 1px;
  background: rgba(245, 222, 183, 0.28);
  box-shadow: 0 4px rgba(245, 222, 183, 0.2), 0 8px rgba(245, 222, 183, 0.14);
}

@keyframes footprint-life {
  0% { opacity: 0; transform: translateY(-5px) scale(0.75) rotate(var(--foot-rotate)); }
  14% { opacity: 0.62; }
  72% { opacity: 0.34; }
  100% { opacity: 0; transform: translateY(14px) scale(1.08) rotate(var(--foot-rotate)); }
}

.desert-destination {
  position: absolute;
  z-index: 4;
  right: 4%;
  bottom: 8%;
  max-width: 250px;
  padding: 12px 14px;
  border: 1px solid rgba(54, 228, 119, 0.55);
  background: rgba(5, 9, 8, 0.78);
  color: #f5fff7;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  backdrop-filter: blur(8px);
}

.desert-destination.is-visible { opacity: 1; transform: none; }
.desert-destination strong { display: block; font: 700 1.15rem/1.05 Georgia, serif; }
.desert-destination span { display: block; margin-top: 5px; color: #c8d8cc; font-size: 0.62rem; line-height: 1.35; letter-spacing: 0.06em; text-transform: uppercase; }

.story-main { isolation: isolate; background: transparent !important; }
.story-main > .intro,
.story-main > .chapter,
.story-main > .legal-contradiction,
.story-main > .reporting-bridge,
.story-main > .current-context,
.story-main > .podcast {
  position: relative;
  z-index: 4;
}

.story-main > .intro,
.story-main > .chapter {
  background: linear-gradient(90deg, rgba(6, 9, 10, 0.91), rgba(6, 9, 10, 0.72) 62%, rgba(6, 9, 10, 0.38));
  border-radius: 12px;
}

.story-main > .reporting-bridge,
.story-main > .current-context {
  background-color: rgba(243, 239, 229, 0.95) !important;
  backdrop-filter: blur(5px);
}

.story-main > .legal-contradiction,
.story-main > .podcast {
  background-color: rgba(7, 12, 13, 0.94) !important;
  backdrop-filter: blur(5px);
}

.data-lab,
.practical,
.methodology,
.finale {
  position: relative;
  z-index: 5;
}

@media (max-width: 820px) {
  .desert-world-image {
    inset: -2%;
    background-position: 36% center;
    transform: translate3d(calc(var(--desert-pan-x, 0) * 0.45), calc(var(--desert-pan-y, 0) * 0.4), 0) scale(1.14);
  }

  .desert-dust-canvas { opacity: 0.5; }
  .global-desert-walker { width: clamp(45px, 14vw, 66px); }
  .desert-destination { right: 12px; bottom: 9%; max-width: 205px; padding: 9px 10px; }
  .desert-destination strong { font-size: 0.95rem; }
  .desert-destination span { font-size: 0.52rem; }

  .story-main > .intro,
  .story-main > .chapter {
    margin-left: 10px;
    margin-right: 10px;
    width: calc(100% - 20px) !important;
    background: rgba(5, 8, 9, 0.84);
    backdrop-filter: blur(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .desert-world-image { transform: scale(1.08) !important; transition: none !important; }
  .desert-dust-canvas,
  .desert-footprints { display: none !important; }
  .global-desert-walker img { animation: none !important; }
}
/* Sourced political context */
.political-voices{position:relative;z-index:5;padding:clamp(72px,9vw,130px) 0;background:rgba(9,12,11,.94);color:#f4f0e7}
.political-voices .shell{max-width:1100px}
.political-voices h2{max-width:900px;font:700 clamp(2.35rem,5vw,4.8rem)/1 Georgia,serif;letter-spacing:-.045em}
.political-voices .voices-intro{max-width:760px;color:#c9c7bf;font:1.05rem/1.7 Georgia,serif}
.political-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:38px}
.political-grid article{padding:clamp(22px,3vw,32px);border:1px solid rgba(54,228,119,.28);border-top:4px solid #36e477;background:rgba(13,18,16,.9);box-shadow:0 18px 50px rgba(0,0,0,.25)}
.political-grid small{display:block;color:#80e8a8;font:800 .72rem/1.3 Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.political-grid h3{margin:.7rem 0 1rem;font:700 clamp(1.35rem,2.4vw,1.85rem)/1.15 Georgia,serif}
.political-grid p{color:#d9d6ce;font:1rem/1.65 Georgia,serif}
.political-grid a{color:#8ff0b4;text-underline-offset:4px}
@media(max-width:700px){.political-grid{grid-template-columns:1fr}.political-voices{padding:70px 0}.political-grid article{padding:22px}}

/* Desert-first reading layout: Daniel walks beside the words, not in a ticker. */
body{background:#b78b58!important;color:#21170f}
.desert-world-image{
  inset:-2%;
  background:
    linear-gradient(to bottom,rgba(244,218,174,.08),rgba(113,72,38,.12)),
    url("desert-story-backdrop-v2.webp") center/cover no-repeat;
  filter:saturate(1.08) contrast(1.04) brightness(1.06)
}
.desert-dust-canvas{z-index:2;opacity:.94;filter:blur(.35px)}
.desert-footprints{position:fixed;z-index:16;pointer-events:none}
.global-desert-walker{
  position:fixed;
  z-index:18;
  width:clamp(88px,8vw,126px);
  filter:drop-shadow(0 10px 8px rgba(39,21,8,.52)) drop-shadow(0 0 2px rgba(255,235,197,.7))
}
.journey-stage,.reading-companion,.daniel-walker{display:none!important}
.journey-block{min-height:0!important;padding:76px 0!important;background:rgba(241,218,179,.74)!important;border:0!important;color:#24180f}
.journey-intro{margin-bottom:0!important}
.journey-intro p{color:#3f2c20!important}
.story-main>.intro,.story-main>.chapter,.story-main>.legal-contradiction,.story-main>.reporting-bridge,.story-main>.current-context,.story-main>.podcast,.political-voices{
  color:#24180f!important;
  background:rgba(246,229,198,.76)!important;
  backdrop-filter:blur(2px);
  border-color:rgba(92,57,30,.25)!important;
  box-shadow:none!important
}
.story-main>.intro,.story-main>.chapter{border-radius:0!important}
.story-main>.intro p,.story-main>.chapter p,.legal-contradiction p,.podcast p,.political-voices .voices-intro{color:#322318!important}
.story-main>.intro h2,.story-main>.chapter h2,.legal-contradiction h2,.podcast h2,.political-voices h2{color:#1c120b!important}
.story-main blockquote{color:#23170f!important}
.intro.upper-story-beat .note,.contradiction-side,.podcast-card,.political-grid article{
  color:#26180f!important;
  background:rgba(255,244,221,.82)!important;
  border-color:rgba(74,112,55,.42)!important
}
.contradiction-side strong,.political-grid h3{color:#20140c!important}
.political-grid p{color:#3a291c!important}
.political-grid a{color:#185c37!important}
.political-grid small{color:#23683f!important}
.desert-destination{z-index:20;background:rgba(251,238,210,.9);color:#1f160e;border-color:rgba(34,112,64,.7)}
.desert-destination span{color:#4a392b}
@media(max-width:820px){
  .desert-world-image{background-position:48% center;filter:saturate(1.08) contrast(1.03) brightness(1.08)}
  .global-desert-walker{width:clamp(74px,22vw,96px)}
  .desert-dust-canvas{opacity:1}
  .story-main>.intro,.story-main>.chapter{margin:0!important;width:100%!important;padding-right:82px!important;background:rgba(248,231,198,.72)!important}
  .journey-intro{width:100%;padding:0 82px 0 20px}
  .legal-contradiction .shell,.podcast-card,.political-voices .shell{padding-right:82px!important}
}
@media(prefers-reduced-motion:reduce){.global-desert-walker{position:absolute;top:38vh!important;right:8px!important;left:auto!important}}
