/* ---------------------------------------------------------- hero */
.pr-route-caption { bottom: 4%; }
.pr-route-caption span { font-size: 16px; color: var(--kz-soft); }

/* Hero variants: the particle route by default, the live board with ?hero=board. */
.pr-board { display: none; }
body[data-hero="board"] .pr-board { display: block; }
body[data-hero="board"] .pr-route-stage { display: none; }

/* ---------------------------------------------------------- live project board */
.pr-board { justify-self: end; width: 100%; max-width: 640px; padding: 18px; border: 1px solid var(--kz-border-strong); border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 40%), var(--kz-panel-strong); box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(92,147,255,.04), 0 0 80px rgba(47,109,255,.08); }
.pr-board-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 14px; }
.pr-board-top strong { display: block; margin-top: 6px; color: var(--kz-strong); font: 600 17px/1.1 "Space Grotesk", sans-serif; letter-spacing: -.02em; }
.pr-board-live { display: inline-flex; align-items: center; gap: 8px; color: var(--kz-faint); font: 500 10px/1 "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.pr-board-live i { width: 7px; height: 7px; border-radius: 50%; background: #57cfa9; box-shadow: 0 0 0 3px rgba(87,207,169,.16), 0 0 10px #57cfa9; animation: pr-live 2s ease-in-out infinite; }
@keyframes pr-live { 50% { opacity: .4; } }
.pr-board-week { padding: 7px 11px; border: 1px solid var(--kz-border-strong); border-radius: 99px; color: var(--kz-soft); font: 500 11px/1 "IBM Plex Mono", monospace; white-space: nowrap; }
.pr-board-progress { height: 4px; margin: 0 4px 16px; overflow: hidden; border-radius: 4px; background: var(--kz-border); }
.pr-board-progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #5c93ff, #49c7cf, #57cfa9, #d0ab62); box-shadow: 0 0 12px rgba(92,147,255,.6); transition: width .9s cubic-bezier(.16,1,.3,1); }
.pr-board-columns { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; min-height: 330px; }
.pr-col { --accent: #5c93ff; display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 9px 7px; border-radius: 14px; background: rgba(255,255,255,.02); }
.pr-col header { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 2px 3px 6px; border-bottom: 1px solid var(--kz-border); }
.pr-col header span { overflow: hidden; color: var(--kz-soft); font: 600 11px/1.2 "Manrope", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.pr-col header b { flex: none; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font: 500 10px/1 "IBM Plex Mono", monospace; }
.pr-col header::before { content: ""; flex: none; width: 6px; height: 6px; margin-right: 2px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.pr-task { --accent: #5c93ff; position: relative; padding: 9px 9px 9px 11px; border: 1px solid var(--kz-border); border-radius: 10px; background: #0d1220; transition: border-color .5s ease, box-shadow .5s ease, opacity .5s ease; }
.pr-task::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--accent); transition: background .5s ease; }
.pr-task p { margin: 0; color: var(--kz-text); font-size: 11.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.pr-task small { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; color: var(--kz-faint); font: 500 9.5px/1 "IBM Plex Mono", monospace; }
.pr-task small i { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #0d1220); opacity: .8; }
.pr-task.is-moving { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 10px 26px color-mix(in srgb, var(--accent) 22%, transparent); z-index: 2; }
.pr-task.is-leaving { opacity: 0; }
.pr-task.is-new { animation: pr-task-in .6s cubic-bezier(.16,1,.3,1); }
@keyframes pr-task-in { from { opacity: 0; transform: translateY(-8px) scale(.96); } }
.pr-board-feed { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 6px 2px; border-top: 1px solid var(--kz-border); }
.pr-board-feed span { flex: none; color: var(--kz-faint); font: 500 10px/1 "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.pr-board-feed p { margin: 0; overflow: hidden; color: var(--kz-soft); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; transition: opacity .3s ease; }
.pr-board-feed p.is-swapping { opacity: 0; }

/* ---------------------------------------------------------- five stages (expanding panels) */
.pr-stages { position: relative; padding: clamp(96px, 13vh, 150px) 0 clamp(40px, 6vh, 72px); scroll-margin-top: 40px; }
.pr-stages-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.pr-stages-hint { color: var(--kz-faint); font: 500 11px/1 "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.pr-progress { display: none; }
.pr-track-window { width: min(calc(100% - 48px), var(--max-width)); margin: clamp(32px, 5vh, 48px) auto 0; }
/* --open-w: inner width of the open panel. Each panel's 48px padding + 2px border sits outside
   the flex share, so the open one gets 5.8/9.8 of (row - 4 gaps - 5 × 50px). */
.pr-track { --open-w: calc((min(100vw - 48px, 1240px) - 298px) * .59 - 4px); display: flex; gap: 12px; height: clamp(440px, 62vh, 540px); margin: 0; padding: 0; list-style: none; }
.pr-card { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; padding: 26px 24px 28px; border: 1px solid var(--kz-border); border-radius: 26px; background: radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%), #0a0e19; cursor: pointer; outline: none; transition: flex-grow .8s cubic-bezier(.16,1,.3,1), border-color .5s ease, background .5s ease; }
.pr-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .5; transition: opacity .5s ease; }
.pr-card:hover, .pr-card:focus-visible { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.pr-card.active { flex-grow: 5.8; cursor: default; border-color: color-mix(in srgb, var(--accent) 42%, transparent); background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), #0a0e19; }
.pr-card.active::before { opacity: 1; }
.pr-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pr-card-num { color: color-mix(in srgb, var(--accent) 14%, transparent); font: 600 clamp(44px, 4.2vw, 60px)/.8 "Space Grotesk", sans-serif; letter-spacing: -.05em; -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 80%, transparent); transition: color .5s ease; }
.pr-card:not(.active) .pr-card-num { color: transparent; }
/* Vertical name on collapsed strips. */
.pr-card-label { position: absolute; left: 50%; bottom: 28px; color: var(--kz-soft); font: 600 22px/1 "Space Grotesk", sans-serif; letter-spacing: -.02em; white-space: nowrap; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); transition: opacity .35s ease, color .3s ease; }
.pr-card:hover .pr-card-label { color: var(--kz-strong); }
.pr-card.active .pr-card-label { opacity: 0; }
/* Detail content keeps a fixed width so it never reflows while the panel grows. */
.pr-card-time, .pr-card h3, .pr-card > p, .pr-card dl { transition: opacity .25s ease, transform .25s ease; }
.pr-card:not(.active) .pr-card-time, .pr-card:not(.active) h3, .pr-card:not(.active) > p, .pr-card:not(.active) dl { opacity: 0; transform: translateY(10px); pointer-events: none; }
.pr-card.active .pr-card-time, .pr-card.active h3, .pr-card.active > p, .pr-card.active dl { transition: opacity .5s ease .35s, transform .5s ease .35s; }
.pr-card-time { padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 99px; color: var(--accent); font: 500 11px/1 "IBM Plex Mono", monospace; letter-spacing: .06em; white-space: nowrap; }
.pr-card h3 { width: var(--open-w); margin: auto 0 0; color: var(--kz-strong); font-size: clamp(44px, 5vw, 76px); line-height: .95; letter-spacing: -.055em; }
.pr-card > p { width: min(540px, var(--open-w)); margin: 16px 0 0; color: var(--kz-muted); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; }
.pr-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; width: var(--open-w); margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--kz-border); }
.pr-card dl div { display: grid; gap: 6px; align-content: start; }
.pr-card dt { color: var(--accent); font: 500 10px/1 "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.pr-card dd { margin: 0; color: var(--kz-text); font-size: 15px; line-height: 1.5; }
.pr-note { margin-top: 20px; }

/* ---------------------------------------------------------- rhythm */
.pr-rhythm-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.pr-rhythm-grid::before { content: ""; position: absolute; left: 28px; right: 28px; top: 34px; height: 1px; background: linear-gradient(90deg, #5c93ff, #49c7cf, #57cfa9); opacity: .4; }
.pr-beat { position: relative; padding: 26px 28px 30px; border: 1px solid var(--kz-border); border-radius: 22px; background: var(--kz-panel-strong); }
.pr-beat-day { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 0 10px 0 0; background: var(--kz-panel-strong); color: var(--accent); font: 500 11px/1 "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.pr-beat-day::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 12px var(--accent); }
.pr-beat h3 { margin: 26px 0 0; color: var(--kz-strong); font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.035em; }
.pr-beat p { margin: 10px 0 0; color: var(--kz-muted); font-size: 15px; line-height: 1.6; }
.pr-rhythm-grid .pr-beat:nth-child(2) { transition-delay: .08s; }
.pr-rhythm-grid .pr-beat:nth-child(3) { transition-delay: .16s; }

@media (max-width: 960px) {
  .pr-board { justify-self: stretch; max-width: none; }
  .pr-rhythm-grid { grid-template-columns: 1fr; }
  .pr-rhythm-grid::before { display: none; }
}

/* Phones: the panels become a vertical accordion. */
@media (max-width: 760px) {
  .pr-board { padding: 14px; }
  .pr-board-columns { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .pr-col { flex: 0 0 132px; scroll-snap-align: start; }
  .pr-track-window { width: auto; margin: 28px 16px 0; }
  .pr-track { flex-direction: column; height: auto; gap: 10px; }
  .pr-card { flex: none; max-height: 78px; padding: 20px; transition: max-height .7s cubic-bezier(.16,1,.3,1), border-color .5s ease, background .5s ease; }
  .pr-card.active { max-height: 640px; }
  .pr-card-num { font-size: 36px; }
  .pr-card-label { left: 84px; top: 25px; bottom: auto; font-size: 20px; writing-mode: horizontal-tb; transform: none; }
  .pr-card h3 { width: auto; margin-top: 22px; font-size: 40px; }
  .pr-card > p, .pr-card dl { width: auto; }
  .pr-card dl { grid-template-columns: 1fr; gap: 14px; }
}