/* v73: the home page's experiments section — three versions for Dan to pick from (home-xp-a/b/c.html); only the picked one survives */
.sec-xp .xp-top{align-items:end}
.sec-xp .xp-top .blocks p{max-width:36em}
.xp-pic{display:block;border:1px solid #454545;border-radius:12px;overflow:hidden;background:var(--page);transition:border-color var(--motion-base) var(--ease-out),transform var(--motion-base) var(--ease-out)}
.xp-pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.xp-name{display:block;font-size:14px;color:var(--sub)}
.xp-q{display:block;margin-top:6px;font-size:var(--fs-h3);line-height:1.3;letter-spacing:-.01em;font-weight:600;color:var(--ink);text-wrap:balance}
.xp-line{display:block;margin-top:6px;font-size:15.5px;line-height:1.5;color:var(--sub);max-width:34em}
.xp-go{display:inline-flex;align-items:center;gap:6px;margin-top:12px;color:var(--teal);font-size:14px;font-weight:500}
.xp-go::after{content:"→"}
@media (hover:hover) and (pointer:fine){
  .sec-xp a:hover .xp-pic{border-color:rgba(33,173,143,.55);transform:translateY(-3px)}
  .sec-xp a:hover .xp-go{color:var(--teal-hover)}
}

/* A — three across */
.xpa{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px clamp(20px,2.4vw,36px);margin-top:clamp(36px,5vh,56px);list-style:none;padding:0}
.xpa a{display:block}
.xpa .xp-pic{aspect-ratio:16/10;margin-bottom:16px}

/* B — one large, two beside */
.xpb{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3vw,48px);margin-top:clamp(36px,5vh,56px)}
.xpb a{display:block}
.xpb-big .xp-pic{aspect-ratio:16/9;margin-bottom:18px}
.xpb-big .xp-q{font-size:clamp(22px,1.9vw,28px)}
.xpb-side{display:grid;gap:clamp(24px,3vw,40px);align-content:start}
.xpb-side a{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px;align-items:start}
.xpb-side .xp-pic{aspect-ratio:4/3}
.xpb-side .xp-q{margin-top:4px}

/* C — the questions, one picture that follows them */
.xpc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);align-items:start}
.xpc-list{list-style:none;padding:0;margin-top:clamp(28px,4vh,40px);border-top:1px solid var(--hair)}
.xpc-list a{display:block;padding:18px 0;border-bottom:1px solid var(--hair);transition:background-color var(--motion-base) var(--ease-out)}
.xpc-list .xp-q{font-size:clamp(19px,1.5vw,22px);color:var(--sub);transition:color var(--motion-base) var(--ease-out)}
.xpc-list a[aria-current="true"] .xp-q,.xpc-list a:focus-visible .xp-q{color:var(--ink)}
.xpc-list .xp-line,.xpc-list .xp-go{display:none}
.xpc-list a[aria-current="true"] .xp-line,.xpc-list a[aria-current="true"] .xp-go{display:block}
.xpc-list a[aria-current="true"] .xp-go{display:inline-flex}
.xpc-list .xpc-inline{display:none}
.xpc-stage{position:sticky;top:calc(var(--hdr) + 24px);aspect-ratio:16/11}
.xpc-stage .xp-pic{position:absolute;inset:0;opacity:0;transition:opacity var(--motion-medium,240ms) var(--ease-out)}
.xpc-stage .xp-pic.on{opacity:1}

@media (max-width:899px){
  .xpa{grid-template-columns:minmax(0,1fr)}
  .xpb{grid-template-columns:minmax(0,1fr)}
  .xpb-side a{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:14px}
  .xpc{grid-template-columns:minmax(0,1fr)}
  .xpc-stage{display:none}
  .xpc-list .xp-line,.xpc-list a .xp-go{display:block}
  .xpc-list a .xp-go{display:inline-flex}
  .xpc-list .xp-q{color:var(--ink)}
  .xpc-list .xpc-inline{display:block;aspect-ratio:16/10;margin-bottom:14px}
}

/* B: the two side cards — picture in the first column, the words stacked in the second */
.xpb-side a{grid-template-rows:auto auto auto 1fr;row-gap:0}
.xpb-side a .xp-pic{grid-column:1;grid-row:1 / span 4}
.xpb-side a > span:not(.xp-pic){grid-column:2}
.xpb-side .xp-go{align-self:start}

/* the idea-portfolio picture: the run's own counts drawn at card size (a shrunken screenshot is unreadable) */
.ipc{display:flex;flex-direction:column;justify-content:center;gap:10px;width:100%;height:100%;padding:clamp(14px,1.6vw,24px);background:var(--page)}
.ipc-t{font-size:14px;font-weight:600;color:var(--ink)}
.ipc-k{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--sub)}
.ipc-k i{width:9px;height:9px;border-radius:2px}.ipc-k i.b{margin-left:10px}
.ipc i.a{background:#6b6b6b}.ipc i.b{background:var(--teal)}
.ipc-r{display:grid;gap:3px}
.ipc-n{font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ipc-bar{display:flex;align-items:center;gap:6px;height:9px}
.ipc-bar i{display:block;height:9px;border-radius:2px;min-width:2px}
.ipc-bar em{font-style:normal;font-size:11.5px;line-height:1;color:var(--sub);font-variant-numeric:tabular-nums}
.xpb-side .ipc{gap:6px;padding:12px}.xpb-side .ipc-r:nth-of-type(n+5){display:none}.xpb-side .ipc-k{display:none}
.xpa .ipc{gap:4px;padding:12px 20px}.xpa .ipc-k{margin-bottom:2px}