/* Landing cover sheet. Shown only when the inline head script adds .intro-on to (first visit per session, no deep link, motion allowed). intro.js runs and removes it. */ .cover{display:none} .intro-on,.intro-on body{overflow:hidden} .intro-on .cover,.intro-leaving .cover{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px;background-color:var(--paper);background-image:linear-gradient(#7f8c801a 1px,transparent 1px),linear-gradient(90deg,#7f8c801a 1px,transparent 1px);background-size:24px 24px;color:var(--ink);cursor:pointer} .intro-sheet{position:relative;display:grid;place-items:center;width:100%;height:100%} /* Sheet border plotted edge by edge. */ .intro-edge{position:absolute;background:var(--ink)} .intro-edge.t,.intro-edge.b{left:0;right:0;height:1.5px;transform:scaleX(0)} .intro-edge.l,.intro-edge.r{top:0;bottom:0;width:1.5px;transform:scaleY(0)} .intro-edge.t{top:0;transform-origin:left} .intro-edge.r{right:0;transform-origin:top} .intro-edge.b{bottom:0;transform-origin:right} .intro-edge.l{left:0;transform-origin:bottom} .intro-on .intro-edge.t{animation:intro-x .45s var(--sm-ease,ease) .05s forwards} .intro-on .intro-edge.r{animation:intro-y .4s var(--sm-ease,ease) .2s forwards} .intro-on .intro-edge.b{animation:intro-x .45s var(--sm-ease,ease) .35s forwards} .intro-on .intro-edge.l{animation:intro-y .4s var(--sm-ease,ease) .5s forwards} .intro-corner{position:absolute;padding:12px 14px;color:var(--soft);font:var(--t-label)/1.2 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;opacity:0} .intro-corner.tl{top:0;left:0} .intro-corner.tr{top:0;right:0;color:var(--rust-text)} .intro-corner.bl{bottom:0;left:0} .intro-corner.br{bottom:0;right:0} .intro-on .intro-corner{animation:intro-fade .5s ease .45s forwards} .intro-on .intro-corner.br{animation-delay:.9s} .intro-main{display:grid;justify-items:center;gap:0;padding:0 16px;text-align:center} .intro-k{margin:0;color:var(--rust-text);font:var(--t-label)/1.3 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;opacity:0} .intro-on .intro-k{animation:intro-fade .6s ease .35s forwards} .intro-name{display:block;overflow:hidden;margin:14px 0 0;padding:0 .06em .08em;font:500 clamp(56px,11vw,150px)/.95 var(--font-display);letter-spacing:-.055em} .intro-name span{display:block;transform:translateY(105%)} .intro-on .intro-name span{animation:intro-rise .9s cubic-bezier(.2,.8,.2,1) .45s forwards} .intro-rule{width:min(420px,62vw);height:2px;margin:18px 0 16px;background:var(--rust);transform:scaleX(0);transform-origin:left} .intro-on .intro-rule{animation:intro-x .6s var(--sm-ease,ease) 1s forwards} .intro-sub{margin:0;color:var(--soft);font:var(--t-note)/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;opacity:0} .intro-on .intro-sub{animation:intro-fade .6s ease 1.2s forwards} /* The career route and its five settings, echoing the map below. */ .intro-route{display:block;width:min(640px,86vw);height:auto;margin-top:34px;overflow:visible} .intro-route path{fill:none;stroke:var(--rust);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1} .intro-on .intro-route path{animation:intro-draw 1.1s cubic-bezier(.6,0,.2,1) 1.3s forwards} .intro-route .pin{transform-box:fill-box;transform-origin:50% 50%;transform:scale(0)} .intro-route circle{fill:var(--paper);stroke:var(--rust);stroke-width:2} .intro-route .pin text{fill:var(--rust-text);font:700 9px/1 var(--font-mono);text-anchor:middle} .intro-route .lbl{fill:var(--soft);font:9px/1 var(--font-mono);letter-spacing:.12em;text-anchor:middle;opacity:0} .intro-on .intro-route .pin{animation:intro-pop .5s cubic-bezier(.3,1.7,.5,1) calc(1.5s + var(--i) * .17s) forwards} .intro-on .intro-route .lbl{animation:intro-fade .4s ease calc(1.65s + var(--i) * .17s) forwards} /* Enter prompt: the cover waits here until the visitor acts. */ .intro-enter{display:inline-flex;align-items:center;gap:10px;margin-top:40px;padding:11px 16px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font:700 var(--t-label)/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;opacity:0} .intro-enter b{color:var(--rust);font-size:15px;line-height:0} .intro-on .intro-enter{animation:intro-fade .6s ease 2.4s forwards,intro-nudge 1.8s ease-in-out 3s infinite} .intro-on .intro-enter b{display:inline-block;animation:intro-arrow 1.8s ease-in-out 3s infinite} @keyframes intro-nudge{0%,100%{box-shadow:0 0 0 0 #c9563400}50%{box-shadow:0 0 0 5px #c9563426}} @keyframes intro-arrow{0%,100%{transform:none}50%{transform:translateY(3px)}} /* Exit: the cover lifts away and the site settles in underneath. */ .intro-leaving .cover{pointer-events:none;opacity:0;transform:translateY(-3%);transition:opacity .8s ease,transform .9s cubic-bezier(.6,0,.2,1)} .intro-on .canvas{opacity:0;transform:translateY(22px) scale(.985)} .intro-leaving .canvas{transition:opacity .8s ease .1s,transform 1s cubic-bezier(.2,.8,.2,1) .1s} @keyframes intro-x{to{transform:scaleX(1)}} @keyframes intro-y{to{transform:scaleY(1)}} @keyframes intro-fade{to{opacity:1}} @keyframes intro-rise{to{transform:none}} @keyframes intro-draw{to{stroke-dashoffset:0}} @keyframes intro-pop{to{transform:none}} @media(max-width:620px){ .intro-on .cover,.intro-leaving .cover{padding:10px} .intro-corner{padding:9px 10px;font-size:10px} .intro-corner.bl{display:none} .intro-sub{font-size:12px} .intro-route{margin-top:26px} .intro-route .lbl,.intro-route .pin text{display:none} } @media print{.cover{display:none!important}.canvas{opacity:1!important;transform:none!important}}