/* Shared geometry; each section keeps its own reading rhythm. */
.hero h1>span{text-decoration:underline;text-decoration-color:var(--strong-line);text-decoration-thickness:1px;text-underline-offset:.14em;text-decoration-skip-ink:auto}
.portrait-frame:before,.portrait-frame:after{width:58px;height:58px;border-color:var(--strong-line);opacity:.7}
.hero.is-in-view .portrait-frame:before{animation:portrait-corner-in .9s cubic-bezier(.16,1,.3,1) both;transform-origin:left top}
.hero.is-in-view .portrait-frame:after{animation:portrait-corner-in .9s .12s cubic-bezier(.16,1,.3,1) both;transform-origin:right bottom}
@keyframes portrait-corner-in{from{opacity:.15;transform:scale(.65)}to{opacity:.7;transform:scale(1)}}

/* About: the background facts carry a precise rule and the priorities a quiet marker. */
.about-heading h2{font-size:clamp(32px,3.2vw,46px)}
.about-profile>div{position:relative}
.about-profile>div:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;background:var(--fg);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.about-profile>div:hover:after{transform:scaleX(1)}
.about-fact-icon{width:20px;height:20px}
.about-priorities span{display:inline-flex;align-items:center;gap:8px}
.about-priorities span:before{content:'';width:10px;height:1px;background:var(--strong-line);flex:none}
.about-flow-step{font-weight:550}

/* Process: the sequence remains compact; linework describes progression. */
.method-node span{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--strong-line);border-radius:50%;color:var(--fg);font-size:11px}
.method-step:after{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--strong-line);transform-origin:left}
.method-step.is-in-view:not(.is-document-hidden):after{animation:method-rule-in .85s cubic-bezier(.16,1,.3,1) both}
.method-step.is-in-view:not(.is-document-hidden) .method-node svg>*{animation:capability-trace .9s cubic-bezier(.16,1,.3,1) both}
@keyframes method-rule-in{from{transform:scaleX(.1);opacity:.2}to{transform:scaleX(1);opacity:1}}
.method-output{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-body);font-size:11px;border:0;color:var(--muted)}
.method-output:before{content:'';width:14px;height:1px;background:var(--strong-line);flex:none}

/* The bridge occupies only the gap between a capability and its evidence. */
.capability-row{--cap-gap:clamp(32px,6vw,84px);column-gap:var(--cap-gap)}
.capability-row:after{content:'';position:absolute;top:50%;left:calc((100% - var(--cap-gap)) * .54545 + 12px);width:calc(var(--cap-gap) - 24px);height:1px;background:var(--strong-line);opacity:.6;transition:opacity .2s}
.capability-row:hover:after,.capability-row:focus-within:after{opacity:1}
.capability-evidence-label{display:flex;align-items:center;gap:8px}
.capability-evidence-label:before{content:'';width:4px;height:4px;border:1px solid var(--strong-line);transform:rotate(45deg);flex:none}

/* Reserved credentials are represented by an empty document, never an earned badge. */
.certifications-title{display:flex;align-items:center;gap:18px;min-width:0}
.cert-outline{width:30px;height:36px;flex:none;color:var(--muted)}
.cert-outline path{stroke-dasharray:1}
.certifications-section.is-in-view:not(.is-document-hidden) .cert-outline path{animation:credential-trace .9s cubic-bezier(.16,1,.3,1) both}
@keyframes credential-trace{from{stroke-dashoffset:1;opacity:.3}to{stroke-dashoffset:0;opacity:1}}
.certifications-note{display:flex;align-items:center;gap:12px}
.certifications-note:before{content:'';width:6px;height:6px;border:1px solid var(--strong-line);border-radius:50%;flex:none}

/* The tools ribbon has a clear stage without changing its accessible inventory. */
.stack-heading h2{display:inline-block;position:relative}
.stack-heading h2:before,.stack-heading h2:after{content:'';position:absolute;top:50%;width:44px;height:1px;background:var(--strong-line)}
.stack-heading h2:before{right:calc(100% + 18px)}
.stack-heading h2:after{left:calc(100% + 18px)}
.stack-marquee{border-block:1px solid var(--line);padding-block:8px}
.stack-foundations strong{display:inline-flex;align-items:center;gap:8px}
.stack-foundations strong:before{content:'';width:4px;height:4px;border:1px solid var(--strong-line);flex:none}

html[data-motion=paused] :is(.portrait-frame,.method-node,.cert-outline)>*,html[data-motion=paused] .method-step:after{animation:none!important}
.hero.is-document-hidden .portrait-frame:before,.hero.is-document-hidden .portrait-frame:after{animation:none}
@media(max-width:760px){.portrait-frame:before,.portrait-frame:after{width:42px;height:42px}.about-heading h2{font-size:clamp(30px,7vw,36px)}.method-node span{width:30px;height:30px}.capability-row:after{display:none}.certifications-title{gap:12px}.cert-outline{width:26px;height:32px}.certifications-section h2{font-size:28px}.stack-heading h2:before,.stack-heading h2:after{width:20px}.stack-heading h2:before{right:calc(100% + 12px)}.stack-heading h2:after{left:calc(100% + 12px)}}
@media(prefers-reduced-motion:reduce){.portrait-frame:before,.portrait-frame:after,.method-step:after,.method-node svg>*,.cert-outline path{animation:none!important}.about-profile>div:after{transition:none}}
@media print{.portrait-frame:before,.portrait-frame:after,.method-step:after,.method-node svg>*,.cert-outline path{animation:none!important}}

/* Workflow connectors sit only at section boundaries, never behind the copy. */
.section-divider{height:36px;gap:12px}
.section-connector{width:112px;height:36px;flex:none;overflow:visible;stroke-linecap:round;stroke-linejoin:round}
.section-divider[data-route=reverse] .section-connector{transform:scaleY(-1)}
.section-connector-track{opacity:.6}
.section-connector-nodes{fill:var(--reading-surface,var(--bg))}
.section-connector-signal{stroke:var(--fg);stroke-width:1.5;stroke-dasharray:.2 1;stroke-dashoffset:1.2;opacity:0}
.section-divider.is-in-view:not(.is-document-hidden) .section-connector-signal{animation:section-signal-pass 1.4s .1s cubic-bezier(.45,0,.2,1) both}
@keyframes section-signal-pass{0%{stroke-dashoffset:1.2;opacity:0}15%{opacity:.9}80%{opacity:.9}100%{stroke-dashoffset:-.2;opacity:0}}
html[data-motion=paused] .section-connector-signal,.section-divider.is-document-hidden .section-connector-signal{animation:none!important;opacity:0}
@media(max-width:760px){.section-divider{height:30px;gap:8px}.section-connector{width:88px;height:30px}}
@media(prefers-reduced-motion:reduce){.section-connector-signal{animation:none!important;opacity:0}}
@media print{.section-connector-signal{display:none}}