/* ── EXPERIENCE v4: promotion staircase. Three square steps rise left to right (the current role is the yellow top
   step); hand-marker "promoted" notes sit on the risers; the selected step's achievements list underneath. ── */
.experience { justify-content: center; background: var(--paper-2); }
.sx { width: 100%; max-width: 1180px; margin: 0 auto; }
.sx-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 3rem; flex-wrap: wrap; margin-bottom: clamp(1rem, 3vh, 2rem); }
.sx-head .exp-title { margin-top: .4rem; font-size: clamp(1.8rem, 3.6vw, 3rem); }
.sx-cta { display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; }
.sx-cta .exp-edu { text-align: right; }

.stairs { position: relative; display: flex; align-items: flex-end; height: clamp(190px, 34vh, 330px); border-bottom: 2px solid var(--ink); }
.stp { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: .3rem; text-align: left; font: inherit; cursor: pointer;
  padding: clamp(.7rem, 1.4vw, 1.1rem); background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); border-bottom: 0; border-radius: 0;
  transform-origin: bottom; transition: background .3s var(--e), color .3s; }
.stp + .stp { margin-left: -1.5px; }            /* steps share their risers: one staircase silhouette */
.st1 { height: 40%; } .st2 { height: 70%; } .st3 { height: 100%; }
.stp-d { font: 500 .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.stp-r { font: 800 clamp(1.05rem, 2vw, 1.75rem) var(--disp); letter-spacing: -.025em; line-height: 1.02; }
.stp:hover:not(.on) { background: #fff; }
.stp.on { background: var(--yellow); }
.stp.on .stp-d { color: var(--ink); }
.stp:focus-visible { outline: 3px solid var(--ink); outline-offset: -6px; }
/* hand-marker notes on the risers */
.prom { position: absolute; font: 400 clamp(.85rem, 1.25vw, 1.1rem) 'Permanent Marker', var(--disp); color: var(--yellow-lo); white-space: nowrap; pointer-events: none; transform: rotate(-7deg); }
.p1 { left: calc(33.33% - 6rem); bottom: calc(40% + .6rem); }
.p2 { left: calc(66.66% - 9rem); bottom: calc(70% + .6rem); }

.sx-det { display: grid; margin-top: clamp(.9rem, 2.6vh, 1.6rem); }
.sx-pane { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .35s var(--e), transform .45s var(--spring), visibility 0s linear .35s; }
.sx-pane.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sx-meta { font: .74rem var(--mono); color: var(--muted); margin-bottom: .6rem; } .sx-meta b { font-weight: 500; color: var(--ink); }
.sx-pane ul { list-style: none; columns: 2; column-gap: clamp(1.5rem, 4vw, 3.5rem); }
.sx-pane li { break-inside: avoid; position: relative; padding-left: 1.05rem; margin-bottom: .45rem; font-size: clamp(.86rem, .98vw, .98rem); line-height: 1.42; }
.sx-pane li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: var(--ink); } /* square bullets */

@media (max-height: 760px) and (min-width: 901px) { .sx-head .exp-title { font-size: clamp(1.6rem, 3vw, 2.4rem); } .sx-head { margin-bottom: .8rem; } .stairs { height: clamp(160px, 27vh, 240px); } .sx-pane li { margin-bottom: .3rem; font-size: .86rem; } }
@media (max-width: 800px) {
  .sx-cta { align-items: flex-start; } .sx-cta .exp-edu { text-align: left; } .stairs { height: 200px; } .stp-r { font-size: .98rem; } .stp { padding: .55rem; }
  .prom { display: none; } .sx-pane ul { columns: 1; }
}
@media (prefers-reduced-motion: reduce) { .stp, .sx-pane { transition: none; } }