/* "Why it matters" hover reveals (reveals.py): step photos, AI tool strip, or chips.
   Mouse: opens on hover, folds away on leave. Touch: tap toggles (why-reveal.js). */
.has-wr > li { position: relative; transition: background .3s; }
.has-wr > li h3 { transition: color .25s; }
.wr { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s cubic-bezier(.2,.7,.2,1), opacity .3s ease; }
.wr-in { min-height: 0; overflow: hidden; }
.wr-in > * { margin-top: 16px; }
@media (hover: hover) and (pointer: fine) {
  .has-wr > li:hover > .wr, .has-wr > li:focus-within > .wr { grid-template-rows: 1fr; opacity: 1; }
  .has-wr > li:hover h3 { color: var(--ink-2, #2F55A8); }
}
.has-wr > li.wr-open > .wr { grid-template-rows: 1fr; opacity: 1; }
/* step photos */
.wr-photos { display: flex; gap: 10px; }
.wr-photos figure { margin: 0; flex: 1 1 0; min-width: 0; max-width: 132px; }
.wr-photos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; box-shadow: 0 0 0 1px var(--border-paper); }
.wr-photos figcaption { margin-top: 6px; font-size: 11.5px; line-height: 1.35; color: var(--text-ink-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* AI tool strip */
.wr-marq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.wr-track { display: flex; width: max-content; animation: wrMarq 32s linear infinite; animation-play-state: paused; }
.has-wr > li:hover .wr-track, .has-wr > li.wr-open .wr-track, .has-wr > li:focus-within .wr-track { animation-play-state: running; }
.wr-dup { display: flex; }
.wr-tool { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; padding: 7px 14px 7px 10px; border: 1px solid var(--border-paper); border-radius: 999px; background: #fff; font-size: 13px; color: var(--ink); white-space: nowrap; }
.wr-tool img { width: 18px; height: 18px; object-fit: contain; }
@keyframes wrMarq { to { transform: translateX(-50%); } }
/* chips */
.wr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wr-chips span { padding: 7px 14px; border-radius: 999px; background: rgba(47,85,168,.07); border: 1px solid rgba(47,85,168,.14); font-size: 13.5px; color: var(--ink-2, #2F55A8); }
@media (prefers-reduced-motion: reduce) { .wr { transition: none; } .wr-track { animation: none; } }
.pg-outs.has-wr > li { cursor: default; }
.pg-outs.has-wr .wr-in > * { margin-top: 14px; }
.pg-outs.has-wr .wr-tool { font-size: 12.5px; padding: 6px 12px 6px 9px; }
/* pc-why-list items are a two-column grid (number | text): the reveal belongs under the text */
.pc-why-list.has-wr > li > .wr { grid-column: 2 / -1; }

/* v2: process line, typographic index, quieter tool strip */
.wr-in > * { margin-top: 18px; }
.wr-proc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.wr-proc li { position: relative; padding: 20px 14px 2px 0; opacity: 0; transform: translateY(4px); transition: opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.wr-proc li::before { content: ""; position: absolute; top: 0; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--paper-hi, #FCF3ED); box-shadow: inset 0 0 0 2px var(--ink-2, #2F55A8); }
.wr-proc li:first-child::before { background: var(--ink-2, #2F55A8); }
.wr-proc li::after { content: ""; position: absolute; top: 4px; left: 15px; right: 6px; height: 1px; background: rgba(47,85,168,.28); }
.wr-proc li:last-child::after { display: none; }
.wr-proc .wr-k { display: block; font: 500 10px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--coral-deep); }
.wr-proc b { display: block; margin-top: 5px; font-weight: 500; font-size: 13.5px; line-height: 1.35; color: var(--ink); }
.has-wr > li:hover .wr-proc li, .has-wr > li:focus-within .wr-proc li, .has-wr > li.wr-open .wr-proc li { opacity: 1; transform: none; }
.wr-proc li:nth-child(2) { transition-delay: .06s; } .wr-proc li:nth-child(3) { transition-delay: .12s; }
.wr-proc li:nth-child(4) { transition-delay: .18s; } .wr-proc li:nth-child(5) { transition-delay: .24s; } .wr-proc li:nth-child(6) { transition-delay: .3s; }

.wr-idx { list-style: none; margin: 0; padding: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; border-top: 1px dashed rgba(11,26,74,.14); }
.wr-idx li { display: inline-flex; align-items: center; font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.wr-idx li + li::before { content: ""; width: 1px; height: 13px; margin: 0 14px; background: rgba(11,26,74,.22); }

.wr-marq { padding: 4px 0; }
.wr-tool { gap: 9px !important; margin-right: 28px !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 13.5px !important; color: var(--text-ink-soft) !important; }
.wr-tool img { width: 20px !important; height: 20px !important; border-radius: 5px; }

@media (max-width: 600px) {
  .wr-proc { grid-template-columns: 1fr; row-gap: 12px; }
  .wr-proc li { padding: 0 0 0 22px; }
  .wr-proc li::before { top: 3px; }
  .wr-proc li::after { top: 16px; bottom: -10px; left: 4px; right: auto; width: 1px; height: auto; }
  .wr-proc b { margin-top: 2px; }
}
@media (prefers-reduced-motion: reduce) { .wr-proc li { transition: none; opacity: 1; transform: none; } }
/* index v3: an even grid, no dangling separators when it wraps */
.wr-idx { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 22px !important; }
.wr-idx li + li::before { content: none !important; }
.wr-idx li::before { content: "" !important; flex: none; width: 5px; height: 5px; margin-right: 10px; border-radius: 50%; background: var(--coral, #E59375); }
.pg-outs .wr-idx { grid-template-columns: 1fr 1fr; }
/* spacing lives on .wr (padding animates with the fold) so nothing is clipped by the 0fr->1fr track */
.wr-in > * { margin-top: 0 !important; }
.wr { padding-top: 0; transition: grid-template-rows .5s cubic-bezier(.2,.7,.2,1), opacity .3s ease, padding-top .5s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) and (pointer: fine) { .has-wr > li:hover > .wr, .has-wr > li:focus-within > .wr { padding-top: 16px; } }
.has-wr > li.wr-open > .wr { padding-top: 16px; }
.wr-idx li::before, .wr-idx li + li::before { content: "" !important; flex: none; width: 5px; height: 5px; margin: 0 10px 0 0 !important; border-radius: 50%; background: var(--coral, #E59375); }
/* index v4: one line, items sized to their text; cards (bootcamp) keep a two-column grid */
.wr-idx { display: flex !important; flex-wrap: wrap; gap: 8px 26px !important; white-space: nowrap; }
.wr-idx li { flex: none; }
.pg-outs .wr-idx { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px 16px !important; white-space: normal; }
@media (max-width: 600px) { .wr-idx { flex-wrap: wrap; row-gap: 8px !important; white-space: normal; } }
/* logos reveal */
.wr-logos { display: flex; align-items: center; gap: 22px; }
.wr-logos img { height: 28px; width: auto; filter: grayscale(1); opacity: .8; }
.wr-logos img[src*="schwarzman"] { height: 22px; }
/* Sample workshops (conferences): title always visible, idea opens on hover */
.cf-ideas > li { cursor: default; }
.cf-ideas > li b { transition: color .25s; }
.cf-ideas > li > .wr { padding-top: 0 !important; }
@media (hover: hover) and (pointer: fine) { .cf-ideas > li:hover > .wr { padding-top: 6px !important; } .cf-ideas > li:hover b { color: var(--ink-2, #2F55A8); } }
.cf-ideas > li.wr-open > .wr { padding-top: 6px !important; }
.cf-ideas > li b::after { content: "+"; margin-left: 8px; font-weight: 400; color: var(--coral-deep); transition: transform .3s; display: inline-block; }
.cf-ideas > li:hover b::after, .cf-ideas > li.wr-open b::after { transform: rotate(45deg); }
.cf-ideas > li b { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cf-ideas > li b::after { flex: none; margin-left: 0; }