/* =====================================================================
   SPAN · Contact
   The quietest page: four paths converge on one email address and the
   site trace resolves at the terminal node. Email, plus one exit to LinkedIn above it. No form.
   ===================================================================== */
/* the rail on this page is not fixed: it runs down the document and stops at the terminal node */
body::before{display:none}
.page{position:relative}
.rail{position:absolute;left:var(--rail-x);top:0;width:1px;background:var(--rule-2);z-index:1;height:var(--rail-h,100%)}
.head{transition:opacity .3s}
.head.done{opacity:0}
/* ============ opening ============ */
.opening{padding-block:44px 0}
.h1{margin:28px var(--gut) 0 var(--ax1);font-family:var(--f-display);font-weight:600;font-stretch:82%;font-size:clamp(44px,5.4vw,84px);line-height:.95;letter-spacing:-.02em}
.intro{margin:26px var(--gut) 0 var(--ax2);max-width:46ch;font-size:clamp(19px,1.6vw,23px);line-height:1.42;font-weight:380}
/* ============ convergence: intents → one endpoint ============ */
.conv{position:relative;margin:64px var(--gut) 0 var(--ax1);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:0 clamp(80px,9vw,150px);align-items:start}
.conv > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
/* idle edges share the row rules' colour and weight: the paths read as the rules continuing (runs are pixel-snapped in js; 45° bends stay antialiased) */
.conv svg path{fill:none;stroke:var(--rule);stroke-width:1;stroke-linejoin:miter;transition:stroke .3s}
.conv svg path.on{stroke:var(--cobalt);stroke-width:1.5}
.conv svg path.dim{stroke:var(--rule)}
.conv svg path.row{stroke:var(--rule)}
.intents{position:relative;z-index:1;display:grid;gap:0}
.intents .k{color:var(--fg3);margin-bottom:12px}
.it{position:relative;display:grid;grid-template-columns:11px minmax(0,1fr);gap:14px;padding:18px 0 20px;border-top:1px solid var(--rule)}
.it:last-child{border-bottom:1px solid var(--rule)}
.it > .d{margin-top:8px;width:11px;height:11px}
.it button{all:unset;cursor:pointer;display:block;font-family:var(--f-display);font-weight:600;font-stretch:88%;font-size:clamp(19px,1.6vw,23px);line-height:1.15}
.it button:focus-visible{outline:2px solid var(--cobalt);outline-offset:4px}
.it button:hover{color:var(--cobalt)}
.it p{margin-top:6px;font-size:15.5px;line-height:1.45;color:var(--fg2);max-width:44ch}
.it .go{display:inline-flex;gap:8px;margin-top:8px;font-family:var(--f-mono);font-size:10.5px;font-stretch:87.5%;color:var(--fg);border-bottom:1px solid var(--rule-2)}
.it .go:hover{color:var(--cobalt);border-color:var(--cobalt)}
.it.on > .d{background:var(--cobalt);border-color:var(--cobalt)}
.it.on button{color:var(--cobalt)}
.it .xr{position:absolute;right:-1px;top:27px;width:1px;height:1px}
/* desktop: each path's node sits on its row rule, like the exit and junction nodes in the right column */
@media (min-width:901px){.it > .d{position:absolute;left:0;top:-6px;margin:0}.it > div{grid-column:2}}
/* ============ the endpoint ============ */
/* the LinkedIn exit sits above the endpoint: same row anatomy as the address, one step quieter */
.side{position:relative;z-index:1;min-width:0}
.exit{margin-bottom:44px}
.exit .k{display:flex;justify-content:space-between;gap:12px;color:var(--fg3);margin-bottom:12px}
.li-row{position:relative;border-top:1px solid var(--rule);padding:18px 0 0 28px}
.li-row .nd{position:absolute;left:-5.5px;top:-5.5px;width:11px;height:11px;border-radius:50%;border:1px solid var(--fg);background:var(--bg)}
.li-row .lbl{display:block;color:var(--fg3);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase}
.li{display:inline-block;margin-top:6px;font-family:var(--f-display);font-weight:600;font-stretch:84%;font-size:clamp(20px,1.7vw,25px);line-height:1.1;color:var(--fg);border-bottom:1px solid var(--rule-2)}
.li:hover,.li:focus-visible{color:var(--cobalt);border-color:var(--cobalt)}
.li-row:hover .nd{background:var(--cobalt);border-color:var(--cobalt)}
.li-row p{margin-top:8px;font-size:15.5px;line-height:1.45;color:var(--fg2);max-width:44ch}
.endpoint{position:relative;z-index:1}
.endpoint .k{display:flex;justify-content:space-between;gap:12px;color:var(--fg3);margin-bottom:12px}

.trace{position:absolute;left:0;top:0;height:var(--trace-h,80%);width:1px;border-left:1px dashed var(--rule-2)}
.trace .done{position:absolute;left:-1px;top:0;width:1px;background:var(--fg);height:var(--p,0%);transition:height .5s var(--ease)}

.send{position:relative;padding:28px 0 0 28px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.send .nd{position:absolute;left:-5.5px;top:40px;width:11px;height:11px;border-radius:50%;border:1px solid var(--fg);background:var(--bg)}
.btn{display:inline-flex;align-items:center;gap:12px;padding:11px 18px 11px 14px;border:1px solid var(--fg);border-radius:2px;background:var(--bg);color:var(--fg);font-family:var(--f-display);font-weight:600;font-size:16px;cursor:pointer}
.btn .d{background:var(--fg);width:8px;height:8px}
.btn:hover,.btn:focus-visible{border-color:var(--cobalt);color:var(--cobalt)}
.btn:hover .d{background:var(--cobalt);border-color:var(--cobalt)}

.status{margin:12px 0 0 28px;min-height:1.4em;font-family:var(--f-mono);font-size:10.5px;font-stretch:87.5%;color:var(--fg2)}

@media (max-width:900px){/* phone and small tablet: one vertical trace; paths hang from it and the endpoint continues on the same line */
.conv{grid-template-columns:minmax(0,1fr);margin-left:var(--ax1)}
.conv > svg{display:none}
.intents{border-left:1px solid var(--fg);padding-left:22px}
.intents .k{margin-left:0}
.it{grid-template-columns:minmax(0,1fr);border-top:0;padding:4px 0 22px}
.it:last-child{border-bottom:0}
.it > .d{position:absolute;left:-27.5px;top:10px;margin:0}
.side{padding-top:34px}
.side::before{content:"";position:absolute;left:0;top:0;width:1px;height:34px;background:var(--fg)}
.exit{border-left:1px solid var(--fg);padding:0 0 34px 22px;margin:0}
.li-row{border-top:0;padding-left:0}
.li-row .nd{left:-27.5px;top:4px}
.endpoint{padding-top:34px}
.endpoint::before{content:"";position:absolute;left:0;top:0;width:1px;height:64px;background:var(--fg)}
.endpoint .k{padding-left:22px;height:18px;margin-bottom:12px;align-items:center}
.mailbox{border-top:0}
.mailbox .jn{left:-5.5px;top:-5.5px}}
@media (max-width:719px){.intro{margin-left:var(--ax1)}

.send,.addr-row,.helps{padding-left:22px}
.status{margin-left:22px}
.it p{font-size:15px}}
/* ============ context: who you'd work with, where, profiles ============ */
.ctx{margin:var(--pad) var(--gut) 0 var(--ax1);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px}
.ctx > div{min-width:0}
.ctx h2{font-family:var(--f-mono);font-size:9.5px;font-stretch:87.5%;letter-spacing:.06em;text-transform:uppercase;color:var(--fg3);font-weight:400;padding-bottom:10px;border-bottom:1px solid var(--fg)}
.who{position:relative;display:grid;gap:0}
.who .p{display:grid;grid-template-columns:11px minmax(0,1fr);gap:12px;padding:14px 0}
.who .p .d{margin-top:5px}
.who .p b{display:block;font-family:var(--f-display);font-weight:600;font-size:16px}
.who .p small{display:block;font-size:14.5px;color:var(--fg2);margin-top:3px}
.who .bd{border-top:1px dashed var(--fg3);position:relative}
.who .bd span{position:absolute;right:0;top:-8px;background:var(--bg);padding-left:8px;font-family:var(--f-mono);font-size:9px;font-stretch:87.5%;color:var(--fg3)}

.kv{margin:0;display:grid}
.kv div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--rule)}
.kv dt{font-family:var(--f-mono);font-size:9.5px;font-stretch:87.5%;letter-spacing:.06em;text-transform:uppercase;color:var(--fg3);padding-top:3px}
.kv dd{margin:0;font-size:15.5px}
.kv dd a{font-family:var(--f-display);font-weight:500;border-bottom:1px solid var(--rule-2)}
.kv dd a:hover{color:var(--cobalt);border-color:var(--cobalt)}
@media (max-width:1000px){.ctx{grid-template-columns:minmax(0,1fr);row-gap:44px}}

.mailbox{position:relative;border-top:1px solid var(--fg);padding-top:6px}
.mailbox .jn{position:absolute;left:-5.5px;top:-5.5px;width:11px;height:11px;border-radius:50%;border:1px solid var(--fg);background:var(--bg);transition:background .3s,border-color .3s}
.mailbox.has-intent .jn{background:var(--cobalt);border-color:var(--cobalt)}
.mailbox .trace .done{transition:none}
.mailbox.sent .trace{border-left:1px solid var(--fg)}
.addr-row{position:relative;padding:22px 0 0 28px}
.addr-row .nd,.helps .nd{position:absolute;left:-4.5px;width:9px;height:9px;border-radius:50%;border:1px solid var(--fg);background:var(--fg)}
.addr-row .nd{top:52px}
.addr-row .lbl{display:block;color:var(--fg3);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase}
.addr{display:inline-block;margin-top:8px;font-family:var(--f-display);font-weight:650;font-stretch:84%;font-size:clamp(28px,2.9vw,42px);line-height:1.05;letter-spacing:-.01em;color:var(--fg);overflow-wrap:anywhere;border-bottom:1px solid var(--rule-2);user-select:all}
.addr:hover,.addr:focus-visible{color:var(--cobalt);border-color:var(--cobalt)}
.subj{display:block;margin-top:12px;color:var(--fg3);font-size:10.5px}
.subj b{color:var(--fg2);font-weight:400}
.mailbox.has-intent .subj b{color:var(--cobalt)}
.mailbox .send{padding-top:26px}
.mailbox .send .nd{top:38px}
.btn{text-decoration:none}
.copy{background:none;border:0;padding:0;font-family:var(--f-display);font-weight:500;font-size:15px;color:var(--fg);border-bottom:1px solid var(--rule-2);cursor:pointer}
.copy:hover,.copy:focus-visible{color:var(--cobalt);border-color:var(--cobalt)}
.helps{position:relative;padding:22px 0 0 28px}
.helps .nd{top:28px;background:var(--bg);border-color:var(--fg3)}
.mailbox.sent .helps .nd{background:var(--fg);border-color:var(--fg)}
.helps h3{font-family:var(--f-mono);font-size:9.5px;font-stretch:87.5%;letter-spacing:.06em;text-transform:uppercase;color:var(--fg3);font-weight:400}
.helps ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:0;max-width:52ch;border-top:1px solid var(--rule)}
.helps li{padding:9px 0;border-bottom:1px solid var(--rule);font-size:15.5px;line-height:1.45;color:var(--fg2)}