.stage { position: fixed; inset: 0; z-index: 0; background: #05080b; }
#proc-map, #photos { position: absolute; inset: 0; }
#proc-map { opacity: 0; transition: opacity 1.2s var(--ease); }
#proc-map.on { opacity: 1; }
.photo { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.12); transition: opacity 1.3s var(--ease), transform 9s linear; filter: saturate(.85) contrast(1.05) brightness(.82); }
.photo.on { opacity: 1; transform: scale(1.0); }
.stage-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(5,7,9,.88) 0%, rgba(5,7,9,.55) 38%, rgba(5,7,9,.05) 70%), linear-gradient(to top, rgba(5,7,9,.6), transparent 30%); }
.proc main { position: relative; z-index: 2; }
.proc-intro { min-height: 92vh; display: flex; align-items: flex-end; padding: 0 0 14vh; }
.proc-intro h1 { font: 400 clamp(48px, 8vw, 104px)/.95 var(--f-display); margin: 14px 0 18px; max-width: 900px; letter-spacing: -.01em; }
.proc-intro h1 em { color: var(--accent-2); }
.proc-intro .lede { font: 300 19px/1.55 var(--f-sans); color: var(--ink-2); max-width: 620px; margin: 0; }
.chapter { min-height: 120vh; display: flex; align-items: center; padding: 0 clamp(16px, 6vw, 96px); }
.ch-card { max-width: 480px; }
.ch-num { font: 500 12px var(--f-mono); letter-spacing: .2em; color: var(--accent-2); }
.ch-card h2 { font: 400 clamp(42px, 5.4vw, 68px)/1 var(--f-display); margin: 10px 0 16px; }
.ch-card p { font-size: 16.5px; line-height: 1.65; color: var(--ink-2); margin: 0 0 14px; }
.ch-card p b { color: var(--ink); font-weight: 600; }
.figs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 18px 0 12px; }
.figs div { background: rgba(10,14,18,.86); padding: 14px; }
.figs strong { display: block; font: 300 30px/1.05 var(--f-sans); letter-spacing: -.02em; }
.figs span { display: block; font-size: 12px; color: var(--ink-2); margin-top: 6px; line-height: 1.35; }
.figs em { font-style: normal; font: 600 9px var(--f-mono); color: var(--accent-2); letter-spacing: .1em; }
.ch-card .ch-credit { font: 11px/1.5 var(--f-mono); color: var(--ink-3); margin-top: 10px; }
.ch-credit a { color: var(--ink-2); }
.ch-card.live { border-left: 2px solid var(--live); padding-left: 18px; }
.proc-end { background: var(--bg); padding: 110px 0 80px; border-top: 1px solid var(--line); }
.sec-title { font: 400 clamp(40px, 6vw, 72px)/1 var(--f-display); margin: 0 0 14px; }
.proc-end .lede { font-size: 18px; color: var(--ink-2); max-width: 560px; }
.cta { display: inline-flex; margin-top: 10px; padding: 11px 16px; border-radius: 999px; border: 1px solid var(--accent); text-decoration: none; font-size: 14px; }
.credits { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; font: 12px/1.5 var(--f-mono); color: var(--ink-3); }
.credits a { color: var(--ink-2); }
.site-foot { position: relative; z-index: 2; background: var(--bg); }
@media (max-width: 760px) {
  .chapter { align-items: flex-end; padding: 0 12px 10vh; min-height: 130vh; }
  .ch-card { background: rgba(5,7,9,.82); padding: 18px; border-radius: 14px; border: 1px solid var(--line); }
  .stage-shade { background: linear-gradient(to top, rgba(5,7,9,.85), rgba(5,7,9,.2) 60%); }
  .figs strong { font-size: 24px; }
}
.ch-card .ch-origin { font: 600 11.5px/1.4 var(--f-sans); color: #ffb37a; margin: 12px 0 0; }
.ch-card .ch-origin.mx { color: #93e8d5; }