/* ---------- 02 · city ---------- */

/* The grid is bright at the bottom: a soft scrim keeps the copy legible without a box. */
#ch02 .ch-copy { max-width: min(46ch, 88vw); }
#ch02 .ch-copy::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: -18% -34% -20% -40%;
  background: radial-gradient(ellipse at 32% 50%, rgba(5, 7, 14, 0.62) 0%, rgba(5, 7, 14, 0.34) 42%, rgba(5, 7, 14, 0) 72%);
}

/* The instruments of the plunge. */
#ch02 .ch02-hud { position: absolute; inset: 0; pointer-events: none; color: var(--paper); font-variant-numeric: tabular-nums; }
#ch02 .ch02-alt {
  position: absolute; left: 50%; top: clamp(4.8rem, 11vh, 7.5rem); transform: translateX(-50%);
  text-align: center; opacity: 0; min-width: 11ch;
}
#ch02 .ch02-alt-k { display: block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--mute); }
#ch02 .ch02-alt-v {
  display: block; margin-top: 0.15rem;
  font-family: 'Righteous', 'Manrope', sans-serif; font-size: clamp(2.4rem, 5.6vw, 5rem); line-height: 1; letter-spacing: 0.02em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55);
}
#ch02 .ch02-alt-v small { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 0.4em; margin-left: 0.2em; color: var(--mute); }
#ch02 .ch02-alt-bar { display: block; height: 2px; margin-top: 0.7rem; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
#ch02 .ch02-alt-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--sun-1), var(--sun-2)); transform-origin: left; transform: scaleX(0); }

#ch02 .ch02-chips { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: max-content; display: grid; gap: 0.6rem; opacity: 0; }
#ch02 .ch02-chip {
  position: relative; min-width: 10rem; padding: 0.55rem 0.9rem 0.6rem 1rem;
  border-left: 2px solid var(--sun-1); border-radius: var(--r-sm) 0 0 var(--r-sm);
  background: rgba(10, 14, 24, 0.7);
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.8);
}
#ch02 .ch02-chip-h { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; }
#ch02 .ch02-chip-k { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
#ch02 .ch02-chip-v { display: block; margin-top: 0.15rem; font-size: 1.15rem; font-weight: 800; line-height: 1.1; }
#ch02 .ch02-chip-eg {
  font-size: 0.56rem; line-height: 1.4; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.15em 0.55em; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.75);
}

/* The jolts: 6 px and a momentary blur on the sticky frame and both canvases, 360 ms, never on lite (JS gates it). */
@keyframes ch02-jolt {
  0% { transform: translate(0, 0); filter: blur(0); }
  18% { transform: translate(-6px, 4px); filter: blur(3px); }
  42% { transform: translate(5px, -5px); filter: blur(2px); }
  68% { transform: translate(-3px, 2px); filter: blur(1px); }
  100% { transform: translate(0, 0); filter: blur(0); }
}
html[data-chapter="ch02"] .ch02-jolt { animation: ch02-jolt 0.36s cubic-bezier(0.2, 0.7, 0.3, 1) both; }

/* The dark phone falling into the fog (glass layers in ch01.css): the deck
   greys its top, the city's sodium light warms its lower edge. */
html[data-chapter="ch02"] .phone.is-off {
  --off-warm: rgba(255, 150, 70, 0.13);
  --off-cool: rgba(150, 170, 210, 0.08);
  --off-top: #111620;
  --off-mid: #07090e;
  --off-bot: #0a0706;
  --off-rim: rgba(255, 160, 90, 0.26);
}

/* The lock screen's first light spills a cold blue. */
html[data-chapter="ch02"] .phone-glow { background: radial-gradient(closest-side, rgba(170, 200, 255, 0.4), rgba(170, 200, 255, 0)); }

@media (max-width: 900px) {
  /* The scrim reaches past the top and right edges of the screen (the copy
     box is capped at 88vw), so it never ends in a visible line. */
  #ch02 .ch-copy::before {
    inset: -80% -40% -34% -12%;
    background: linear-gradient(180deg, rgba(5, 7, 14, 0.7) 0%, rgba(5, 7, 14, 0.66) 37%, rgba(5, 7, 14, 0.5) 68%, rgba(5, 7, 14, 0.26) 84%, rgba(5, 7, 14, 0) 100%);
  }
  #ch02 .ch02-alt { left: var(--pad-x); right: auto; top: auto; bottom: 7vh; transform: none; text-align: left; min-width: 0; }
  #ch02 .ch02-alt-v { font-size: clamp(1.6rem, 8vw, 2.4rem); }
  #ch02 .ch02-alt-bar { width: 7rem; }
  #ch02 .ch02-chips { top: auto; bottom: 7vh; transform: none; gap: 0.4rem; }
  #ch02 .ch02-chip { min-width: 7.2rem; padding: 0.4rem 0.6rem 0.45rem 0.7rem; }
  #ch02 .ch02-chip-k { font-size: 0.56rem; }
  #ch02 .ch02-chip-v { font-size: 0.98rem; }
  #ch02 .ch02-chip-eg { font-size: 0.5rem; }
  #ch02 .ch02-chip-h { gap: 0.45rem; }
}

/* No invented readings: the instrument chips are gone; the altitude stays. */
#ch02 .ch02-chips { display: none !important; }