/* from v7 03-hero.css:1 */
/* ===================== v5 HERO: headline + Trace timeline (from explore/timeline-A, calmed) ===================== */
/* hero shell (same as v3) */ .hero{position:relative;min-height:100svh;display:flex;flex-direction:column;padding:26px 0 clamp(30px,3.4vw,52px);overflow-x:clip;overflow-y:visible;padding-bottom:clamp(40px,4.4vw,72px)} /* clip sideways only, so a tooltip below the last row is never cut off */
.hero-in{flex:1;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:auto auto 1fr auto;column-gap:clamp(16px,2vw,32px);width:100%;z-index:2}
.hero-meta{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;color:var(--mute);padding-bottom:18px;border-bottom:1px solid var(--hair)}
.hero-meta .hero-name{color:var(--paper)}
.hero-h1{grid-column:1/-1;grid-row:2;font-size:var(--fd-hero);line-height:.92;margin:clamp(24px,3vw,48px) 0 0;letter-spacing:var(--ls-d);position:relative;z-index:2;pointer-events:none}
.hl{display:block;overflow:hidden;padding:.02em 0 .1em;margin:-.02em 0 -.1em}
.hl>span{display:inline-block}
.hero-h1 .hc{display:inline-block;transform:translateY(-.11em);margin-left:.02em}
.hero-accent{color:var(--blue)}
.hero-tagline{grid-column:1/3;grid-row:4;align-self:end;font-size:var(--fs-2xl);line-height:1.2;letter-spacing:var(--ls-text);max-width:15ch;padding-bottom:6px;color:var(--paper)}
.tl{grid-column:3/7;grid-row:4;align-self:end;position:relative;z-index:3;outline:none} /* above the headline (z 2), so the trace tooltip is never tucked under it */
@media (max-width:899.98px){
  .hero{min-height:auto;padding-top:20px}
  .hero-meta{flex-direction:column;gap:2px;font-size:var(--fs-micro)}
  .hero-h1{font-size:var(--fd-hero);line-height:.96;margin-top:34px}
  .hero-tagline{grid-column:1/-1;grid-row:3;font-size:var(--fs-2xl);max-width:20ch;margin:28px 0 0;justify-self:start}
  .tl{grid-column:1/-1;grid-row:4;margin-top:28px}
}

/* the career trace: one quiet header line, four spans, an axis every six years, a subtle now marker */
.tr{--y0:2004;--y1:2026;--nw:160px;--dcol:40px;--rh:30px;position:relative;border:1px solid var(--line);background:var(--ink)}
.tr-cap{margin:0;border-bottom:1px solid var(--hair);color:var(--mute);font-size:var(--fs-micro);padding:11px 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-cap b{color:var(--text-2);font-weight:var(--tw-label);margin-right:6px}
.tr-ruler,.tr-row{display:grid;grid-template-columns:var(--nw) 1fr var(--dcol);align-items:center}
.tr-ruler{height:24px;color:var(--mute);font-size:var(--fs-micro);padding:0 14px}
.tr-axis{grid-column:2;position:relative;height:100%;margin:0 12px}
.tr-axis span{position:absolute;top:0;left:calc((var(--y) - 2004)/22*100%);padding:6px 0 0 5px;white-space:nowrap;border-left:1px solid var(--hair);bottom:0}
.tr-rows{position:relative;font-size:var(--fs-micro);letter-spacing:var(--ls-data);text-transform:none;margin:0;padding:0 0 6px;list-style:none}
.tr-row{width:100%;height:var(--rh);padding:0 14px;text-align:left;position:relative}
.tr-n{color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-tk{position:relative;height:100%;margin:0 12px}
.tr-bar{position:absolute;top:50%;height:12px;margin-top:-6px;left:calc((var(--a) - var(--y0))/(var(--y1) - var(--y0))*100%);width:calc((var(--b) - var(--a))/(var(--y1) - var(--y0))*100%);min-width:3px;background:var(--blue)}
.tr-lb{position:absolute;left:7px;top:50%;transform:translateY(-50%);white-space:nowrap;color:var(--on-blue);font-size:var(--fs-micro);line-height:1}
.tr-lb.tr-out{left:calc((var(--b) - var(--y0))/(var(--y1) - var(--y0))*100% + 8px);color:var(--mute)}
.tr-du{text-align:right;color:var(--mute)}
/* now: the current span is solid blue; the others are quiet until the handoff gives them colour */
.hx-on .tr-row:not(.is-now) .tr-bar{background:color-mix(in srgb,var(--blue) calc(var(--hx) * 100%),var(--wash))}
/* bar labels sit on blue (paper in both themes); on the quiet bars before the handoff they take the foreground */
.hx-on .tr-row:not(.is-now) .tr-lb:not(.tr-out){color:color-mix(in srgb,var(--on-blue) calc(var(--hx) * 100%),var(--paper))}
/* the now marker: a hairline at the right edge of time, a small muted tag */
.tr-cur{position:absolute;top:var(--ct,63px);bottom:6px;left:calc(14px + var(--nw) + 12px + (100% - 28px - var(--nw) - var(--dcol) - 24px));width:1px;pointer-events:none}
.tr-cur::before{content:"";position:absolute;inset:0;background:var(--dim)} /* the line is a pseudo so the now label never sits on a filled box */
.tr-cur-t{position:absolute;top:-18px;right:4px;color:var(--mute);font-size:var(--fs-micro);white-space:nowrap;line-height:1.3}
/* tooltip */
.tr-tip{position:absolute;z-index:6;min-width:230px;max-width:290px;background:var(--paper);color:var(--ink);padding:12px 14px 12px;font-size:var(--fs-micro);letter-spacing:var(--ls-data);text-transform:none;box-shadow:0 24px 60px -20px var(--shadow);pointer-events:none}
.tr-tip h3{font-family:var(--d);font-variation-settings:"wdth" var(--dw),"wght" var(--dwg);text-transform:uppercase;font-size:var(--fd-xs);line-height:.95;letter-spacing:var(--ls-d);margin:0 0 8px}
.tr-tip dl{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;margin:0}
.tr-tip dt{color:var(--ink-mute)}.tr-tip dd{margin:0}
.tr-tip::after{content:"";position:absolute;left:var(--ax,24px);top:100%;border:7px solid transparent;border-top-color:var(--paper)}
.tr-tip.below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--paper)}
@media (max-width:1180px) and (min-width:900px){.tr{--nw:140px}}
@media (max-width:899.98px){
  .tr{--nw:clamp(92px,30vw,138px);--dcol:30px;--rh:34px}
  .tr-n{white-space:normal;line-height:1.25}
  .tr-cap{white-space:normal;line-height:1.6}
  .tr-axis span:last-child{display:none} /* leave room for the now tag */
}
@media (width < 480px){
  .tr-lb{display:none} /* phones: the bars carry no labels; tap a row for its attributes */
}
@media (width < 360px){
  .tr-axis span:nth-child(n+2){display:none} /* too narrow for more than the start year */
}
@media (width < 400px){
  .tr-ruler,.tr-row{padding:0 10px}
  .tr-tk{margin:0 8px}.tr-axis{margin:0 8px}
  .tr-cur{left:calc(10px + var(--nw) + 8px + (100% - 20px - var(--nw) - var(--dcol) - 16px))}
  .tr-tip{min-width:0;width:calc(100% - 20px);left:10px!important;max-width:none}
}
.static-mode .tr,.static-mode .tr *{transition:none!important}
.static-mode .hero-h1 .hl>span{transform:none!important}
.static-mode .tr{opacity:1!important;transform:none!important}

/* hero handoff, scrubbed (hero-handoff.js sets --hx 0 to 1 over the first part of the scroll):
   at rest the headline leads and the trace is quiet, grey, with only the current span in blue;
   as you scroll the headline eases back and the trace comes forward and takes its colour.
   Without .hx-on (no JS, reduced motion, static capture) the trace simply shows in full colour. */
.hx-on .hero-h1{opacity:calc(1 - .35 * var(--hx));transform:scale(calc(1 - .03 * var(--hx)));transform-origin:0 100%}
/* the trace stays at full opacity: at .9 its small muted labels fell under AA (3.9:1 in light). The quiet start comes from the grey bars */