/* Grade 6 to 12 journey timeline (homepage + program pages). */
:root { --pp-ease: cubic-bezier(.2,.7,.2,1); }
.pp-jr { min-width: 860px; }
.pp-jr-line { position: relative; list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); }
.pp-jr-line::before { content: ""; position: absolute; left: calc(100% / 14); right: calc(100% / 14); top: 50%; height: 3px; background: var(--ink); transform: translateY(-50%); }
.pp-jr-line li { position: relative; display: grid; place-items: center; }
.pp-jr-line li span { position: relative; z-index: 1; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--paper-hi, #FFFFFF); border: 2px solid var(--ink); font: 500 24px/1 var(--font-display); color: var(--ink); transition: transform .35s var(--pp-ease), background .3s, color .3s; }
.pp-jr-line li.is-lit span { background: var(--ink); color: #FFFFFF; box-shadow: none; }
.pp-jr-line li em { position: absolute; top: -26px; font: normal 600 9.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: #0B1A4A; background: var(--coral, #E59375); padding: 4px 7px; border-radius: 4px; white-space: nowrap; }
.pp-jr-line li:hover span { transform: scale(1.1); }
.pp-jr-card { position: relative; display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; margin-top: 10px; border-radius: 12px; background: var(--paper-hi, #FFFFFF); border: 1.5px solid var(--ink); text-decoration: none; color: inherit; outline: none; transition: transform .3s var(--pp-ease), box-shadow .3s, background .3s; }
.pp-jr-card::before, .pp-jr-card::after { content: ""; position: absolute; top: -12px; width: 2px; height: 12px; background: var(--ink); }
.pp-jr-card::before { left: 20px; } .pp-jr-card::after { right: 20px; }
.pp-jr-card.is-family { border-style: dashed; background: transparent; }
.pp-jr-card:hover, .pp-jr-card:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(11,26,74,.38); }
.pp-jr-card.is-current { background: var(--ink, #0B1A4A); color: #FFFFFF; box-shadow: 0 18px 40px -22px rgba(11,26,74,.38); }
@media (prefers-reduced-motion: no-preference) {
  .pp-jr-line li span { animation: pp-node-in .6s var(--pp-ease) both; }
  .pp-jr-line li:nth-child(2) span { animation-delay: .06s } .pp-jr-line li:nth-child(3) span { animation-delay: .12s } .pp-jr-line li:nth-child(4) span { animation-delay: .18s } .pp-jr-line li:nth-child(5) span { animation-delay: .24s } .pp-jr-line li:nth-child(6) span { animation-delay: .3s } .pp-jr-line li:nth-child(7) span { animation-delay: .36s }
}
@keyframes pp-node-in { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* ===== Journey v3: slim axis, photo bars, hover links range ===== */

.pp-jr-line { margin-bottom: 18px; }
.pp-jr-line::before { height: 2px; background: var(--border-paper); }
.pp-jr-line li span { width: 38px; height: 38px; font-size: 17px; background: var(--paper-hi, #FFFFFF) !important; color: var(--ink) !important; border: 1.5px solid var(--ink); box-shadow: none !important; transition: background .25s, color .25s, transform .25s; }
.pp-jr-line li.on span { background: var(--ink) !important; color: #FFFFFF !important; transform: scale(1.12); box-shadow: none !important; }
.pp-jr-card { margin-top: 0; padding: 10px 14px 10px 10px; grid-template-columns: 64px 1fr auto; border-width: 1px; border-color: var(--border-paper); background: var(--paper-hi, #FFFFFF); position: relative; overflow: hidden; }
.pp-jr-card::before, .pp-jr-card::after { display: none; }
.pp-jr-card { border-left: 5px solid var(--acc); }
.pp-jr-card.is-family { border-style: dashed; border-left-style: solid; background: transparent; }
.pp-jr-card:hover, .pp-jr-card:focus-visible { border-color: var(--ink); border-left-color: var(--acc); box-shadow: 0 18px 40px -22px rgba(11,26,74,.38); transform: translateY(-3px); }
.pp-jr.dim .pp-jr-card:not(.hot) { opacity: .45; }
.pp-jr-card { transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, opacity .3s, border-color .2s; }