/* Extend the portfolio's established palette and type scale. The guide uses
   three short reading paths; their destinations remain the original evidence. */
.hiring-guide{padding-block:64px 60px;border-bottom:1px solid var(--line)}
.hiring-guide .section-heading{margin-bottom:30px}
.hiring-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.hiring-path{min-width:0;border-top:2px solid #8a609f;padding-top:24px;display:flex;flex-direction:column}
.hiring-path:nth-child(2){border-top-color:#6795aa}
.hiring-path-label{font: .8125rem Consolas,monospace;line-height:1.6;letter-spacing:.07em;color:#c0a6d7;margin:0 0 14px}
.hiring-path:nth-child(2) .hiring-path-label{color:#9ed8e8}
.hiring-path h3{font-size:1.45rem;line-height:1.4;letter-spacing:-.025em;margin-bottom:13px}
.hiring-path-intro{font-size:1rem;line-height:1.75;margin-bottom:22px}
.hiring-path-links{list-style:none;counter-reset:route-step;padding:0;margin:0 0 18px}
.hiring-path-links li{border-top:1px solid #363b51;counter-increment:route-step}
.hiring-path-links li:last-child{border-bottom:1px solid #363b51}
.hiring-path-links a{display:grid;grid-template-columns:1.1rem minmax(0,1fr) auto;gap:10px;align-items:center;min-height:54px;padding-block:13px;color:#d8d3e6;font-size:.9375rem;line-height:1.6}
.hiring-path-links a:before{content:counter(route-step,decimal-leading-zero);color:#a99abc;font: .75rem Consolas,monospace}
.hiring-path-links a>span:last-child{color:var(--cyan)}
.hiring-path-links a:hover{color:var(--cyan)}
.hiring-path-links a:focus-visible{outline-offset:3px}
.hiring-path-scope{font-size:.875rem;line-height:1.75;color:#ada9c0;margin:auto 0 0}

/* The row sticks only after the introduction has scrolled away. A solid dark
   background preserves text contrast without relying on backdrop-filter. Keep
   overflow on the row itself so the document never widens with the link list. */
:root{--section-nav-height:4.5rem}
html{scroll-padding-top:calc(var(--section-nav-height) + 1rem)}
.section-nav{position:sticky;top:0;z-index:20;display:block;background:#0c101e;border-bottom:1px solid #56506c;box-shadow:0 8px 22px #03061045}
.section-nav-links{display:flex;align-items:center;gap:6px;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#76618b #0c101e;padding-block:9px}
.section-nav-links>a{display:block;flex:0 0 auto;white-space:nowrap;min-height:44px;padding:10px 15px;border:1px solid transparent;font-size:.875rem;line-height:1.6;color:#c8c4d6}
.section-nav-links>a:hover{color:var(--ink);background:#1a2030}
.section-nav-links>a[aria-current="location"]{color:#f3e9ff;border-color:#a678c4;background:#2a1d39;box-shadow:inset 0 -2px #cf87ff}
.section-nav-links>a:focus-visible{outline-offset:-3px}
/* Native anchors and programmatic diagram focus use the same clearance. The
   script measures real nav height, including changed font size or scrollbars. */
main :where(a,button,summary,input,[tabindex]){scroll-margin-top:calc(var(--section-nav-height) + 1rem)}
@media(max-width:62.5rem){
  .hiring-paths{gap:22px}
  .hiring-path h3{font-size:1.35rem}
  .hiring-path-links a{font-size:.875rem;gap:8px}
}
@media(max-width:48rem){
  .hiring-guide{padding-block:44px 46px}
  .hiring-paths{grid-template-columns:minmax(0,1fr);gap:32px}
  .hiring-path{padding-top:20px}
  .hiring-path-intro{max-width:600px;margin-bottom:18px}
  .hiring-path-links a{font-size:1rem}
  .hiring-path-scope{margin:0;max-width:600px}
  .section-nav{padding-inline:12px}
  .section-nav-links>a{padding-inline:12px}
}
@media(forced-colors:active){
  .section-nav-links>a[aria-current="location"]{outline:2px solid Highlight;outline-offset:-3px}
}
@media print{
  .section-nav{display:none}
  .hiring-path{break-inside:avoid}
}