/* ==========================================================================
   sections.css — full-bleed bands, the "drip" edge between sections,
   stats, process steps and experience
   ========================================================================== */
.band {
  position: relative;
  padding-block: var(--sec);
  color: var(--white); background: var(--ink);
}
.band.blue { background: var(--blue); }

/* Drip edge: the PREVIOUS section's colour hangs into this one. It belongs to
   the section underneath in the DOM order but is painted by the one on top,
   so it travels with the incoming section while stacking. */
.has-drip { padding-top: calc(var(--sec) + var(--drip-h) * .6); }
.has-drip::before {
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0;
  height: var(--drip-h);
  background: var(--prev-bg, var(--paper));
  -webkit-mask: var(--drip-mask) 50% 0 / calc(var(--drip-h) * 5.1429) var(--drip-h) repeat-x;
          mask: var(--drip-mask) 50% 0 / calc(var(--drip-h) * 5.1429) var(--drip-h) repeat-x;
  transform-origin: 50% 0;
  scale: 1 calc(.72 + var(--enter, 1) * .28);       /* drops stretch as the section slides in */
  pointer-events: none;
}

.kicker { margin: 0 0 24px; opacity: .65; }
.huge {
  font: 900 clamp(36px, 7.5vw, 104px)/.95 var(--wide); letter-spacing: -.04em;
  text-transform: uppercase; text-wrap: balance; max-width: 14ch;
}

/* stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 48px; margin-top: 72px; }
.stat b {
  display: block; font: 900 clamp(64px, 8.5vw, 120px)/.85 var(--wide); letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: transparent; -webkit-text-stroke: 2px var(--white);
  transition: color .5s var(--ease);
}
.stat:hover b { color: var(--white); }
.stat > span { display: block; margin-top: 16px; max-width: 24ch; opacity: .85; }

/* process */
.steps { list-style: none; margin: 72px 0 0; padding: 0; counter-reset: step; }
.steps li {
  position: relative; counter-increment: step;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 12px 48px; align-items: baseline;
  padding-block: 32px;
}
.steps li::before {                 /* divider that draws itself in */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: rgba(255, 255, 255, .35); transform-origin: 0 50%;
  transition: scale 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 120ms + 150ms);
}
html.js .steps:not(.is-in) li::before { scale: 0 1; }
.steps h4 {
  display: flex; align-items: baseline; gap: .4em;
  font: 900 clamp(28px, 5vw, 64px)/.95 var(--wide); letter-spacing: -.04em; text-transform: uppercase;
  transition: translate .5s var(--ease);
}
.steps h4::before { content: counter(step, decimal-leading-zero); font: 400 12px/1 var(--mono); letter-spacing: .08em; opacity: .6; }
.steps li:hover h4 { translate: 12px 0; }
.steps p { max-width: 42ch; opacity: .9; }
@media (max-width: 640px) { .steps li { grid-template-columns: 1fr; } }

/* experience */
.exp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 72px; margin-top: 72px; }
@media (max-width: 900px) { .exp { grid-template-columns: 1fr; gap: 56px; } }
.meta { opacity: .6; }
.role h4 { font: 700 clamp(22px, 2.4vw, 28px)/1.2 var(--wide); letter-spacing: -.02em; margin: 10px 0; }
.role ul { padding-left: 18px; margin: 20px 0 0; display: grid; gap: 12px; opacity: .9; }
.role li::marker { color: var(--blue); }
.edu { margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .3); }
.edu p { margin-top: 10px; opacity: .9; }
.kit { display: grid; gap: 28px; }
.kit > div { display: flex; flex-wrap: wrap; gap: 8px; }
.kit .mono { width: 100%; opacity: .6; }
.kit span:not(.mono):not(.mono *) {
  background: rgba(255, 255, 255, .1); border-radius: var(--r-btn); padding: 7px 14px; font-size: 15px;
  transition: background-color .3s var(--ease), color .3s var(--ease), translate .35s var(--ease-spring);
}
.kit span:not(.mono):not(.mono *):hover { background: var(--white); color: var(--ink); translate: 0 -3px; }