/* =====================================================================
   SPAN · About
   Standard Span, quieter: opening with portrait, capabilities, engineering log,
   principles, method, compliance bridge, ProtoCode boundary, register, contact.
   ===================================================================== */
/* ============ opening ============ */
.open{padding-block:44px 0}
.op{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 48px;margin-right:var(--gut);align-items:start}

.name{margin:30px 0 0 var(--ax1);font-family:var(--f-display);font-weight:620;font-stretch:75%;font-size:clamp(44px,5.4vw,84px);line-height:.95;letter-spacing:-.02em}
.role{position:relative;margin:20px 0 0 var(--ax1);font-family:var(--f-display);font-weight:450;font-stretch:118%;font-size:clamp(15px,1.15vw,18px);letter-spacing:.01em}
.role::before{content:"";position:absolute;right:calc(100% + 12px);top:50%;width:calc(var(--ax1) - var(--rail-x) - 12px);height:1px;background:var(--fg)}
.role::after{content:"";position:absolute;left:calc(var(--rail-x) - var(--ax1) - 2px);top:calc(50% - 2px);width:5px;height:5px;border-radius:50%;background:var(--fg)}
.role span{color:var(--fg2);margin-left:14px}
.stmt{margin:44px 0 0 var(--ax2);max-width:34ch;font-family:var(--f-read);font-weight:360;font-size:clamp(23px,2.15vw,32px);line-height:1.3;letter-spacing:-.008em}

.portrait{position:relative;margin:30px 0 0;width:clamp(180px,17vw,250px);aspect-ratio:4/5}
/* frame: a plate inside a dashed boundary, with one reached node on its corner (§5.3, §5.6) */
.portrait{padding:10px;background:var(--plate);border:1px dashed var(--fg3)}
.portrait::after{content:"";position:absolute;left:-5px;top:-5px;width:9px;height:9px;border-radius:50%;border:1px solid var(--fg);background:var(--fg)}
.portrait picture{display:block;height:100%;background:#0d0d0e;overflow:hidden}

.facts{margin:56px var(--gut) 0 var(--ax1);border-top:1px solid var(--fg)}
.facts > div{display:grid;grid-template-columns:calc(var(--ax2) - var(--ax1)) minmax(0,62ch);padding:12px 0;border-bottom:1px solid var(--rule)}
.facts dt{color:var(--fg3);padding-top:5px}
.facts dd{margin:0;font-size:17px;line-height:1.5}

@media (max-width:860px){.op{grid-template-columns:minmax(0,1fr)}.portrait{margin:28px 0 0 var(--ax2);width:min(200px,55vw)}}
@media (max-width:719px){.stmt{margin-left:var(--ax1)}.portrait{margin-left:var(--ax1)}.facts > div{grid-template-columns:minmax(0,1fr);gap:2px}}

/* ============ principles: each one must point to evidence ============ */
.prn{margin:44px var(--gut) 0 var(--ax1);counter-reset:p}
.pr{display:grid;grid-template-columns:calc(var(--ax2) - var(--ax1)) minmax(0,1fr);padding:26px 0 28px;border-top:1px solid var(--rule)}
.pr:last-child{border-bottom:1px solid var(--rule)}
.pr .id{display:grid;gap:6px;align-content:start;padding-top:8px}
.pr .id span:first-child{font-family:var(--f-mono);font-size:11px;font-stretch:87.5%}
.pr .id span:last-child{font-family:var(--f-mono);font-size:9.5px;font-stretch:87.5%;color:var(--fg3)}
.pr h3{font-family:var(--f-read);font-weight:400;font-size:clamp(21px,1.8vw,27px);line-height:1.25;letter-spacing:-.006em;max-width:34ch}
.pr .path{margin-top:16px;display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);gap:0 12px;align-items:center;max-width:860px}
.pr .path .lnk{height:1px;background:var(--rule-2);position:relative}
.pr .path .st{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--fg3);white-space:nowrap}
.pr .path .st b{font-family:var(--f-mono);font-size:9.5px;font-stretch:87.5%;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--fg3)}
@media (max-width:860px){.pr .path{grid-template-columns:auto minmax(0,1fr);row-gap:8px}.pr .path .lnk{display:none}.pr .path .st{white-space:normal}}
@media (max-width:719px){.pr{grid-template-columns:minmax(0,1fr);gap:8px}.pr .id{grid-auto-flow:column;justify-content:start;gap:12px;padding:0}}
/* ============ responsibility scope ============ */

.rr{display:grid;grid-template-columns:11px minmax(140px,1fr) minmax(0,1.3fr);gap:12px;align-items:baseline;padding:13px 0;border-top:1px solid var(--rule)}
.rr .d{top:1px}
.rr b{font-family:var(--f-display);font-weight:500;font-size:15.5px}

@media (max-width:719px){.rr{grid-template-columns:11px minmax(0,1fr)}}
/* ============ engineering log ============ */
.log{margin:40px var(--gut) 0 var(--ax1);border-top:1px solid var(--fg)}
.lg{position:relative;display:grid;grid-template-columns:calc(var(--ax2) - var(--ax1)) minmax(200px,1fr) minmax(0,1.4fr) minmax(0,1fr);gap:0 24px;padding:20px 0 22px;border-bottom:1px solid var(--rule);align-items:baseline}
.lg .per{font-family:var(--f-mono);font-size:11px;font-stretch:87.5%;color:var(--fg2)}
.lg .ro b{display:block;font-family:var(--f-display);font-weight:600;font-size:17px;line-height:1.2}
.lg .ro span{display:block;font-family:var(--f-display);font-weight:450;font-stretch:118%;font-size:13.5px;color:var(--fg2);margin-top:3px}
.lg .rs{font-size:16px;line-height:1.45}
.lg .cx{font-family:var(--f-mono);font-size:10.5px;font-stretch:87.5%;color:var(--fg3);line-height:1.6}
.lg.cur::after{content:"";position:absolute;left:calc(100% + 0px);right:calc(-1 * var(--gut));top:30px;height:1px;background:var(--fg)}
.lg.cur .per::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--fg);margin-right:8px;vertical-align:0}
.loghd{display:grid;grid-template-columns:calc(var(--ax2) - var(--ax1)) minmax(200px,1fr) minmax(0,1.4fr) minmax(0,1fr);gap:0 24px;margin:40px var(--gut) 0 var(--ax1);padding-bottom:8px}
.loghd span{font-family:var(--f-mono);font-size:9.5px;font-stretch:87.5%;letter-spacing:.06em;text-transform:uppercase;color:var(--fg3)}
.loghd + .log{margin-top:0}
@media (max-width:900px){.loghd{display:none}.lg{grid-template-columns:minmax(0,1fr);gap:6px}.lg.cur::after{display:none}}
/* ============ ProtoCode boundary ============ */
.pcb{margin:44px var(--gut) 0 var(--ax1);display:grid;grid-template-columns:minmax(0,1fr) 0 minmax(0,1fr);gap:0;border-top:1px solid var(--fg)}
.pcb .z{padding:24px 84px 0 0;min-width:0}
.pcb .z2{padding:24px 0 0 84px}
.pcb .z h3{display:flex;align-items:center;gap:12px;font-family:var(--f-display);font-weight:600;font-stretch:80%;font-size:26px;line-height:1.1}
.pcb .z2 h3{font-stretch:118%;font-weight:500;font-size:22px}
.pcb .z > p{margin-top:6px;font-size:15px;color:var(--fg2)}
.pcb dl{margin:18px 0 0}
.pcb dl div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--rule)}
.pcb 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}
.pcb dd{margin:0;font-size:15.5px;line-height:1.45}
.pcb .bnd{position:relative;border-left:1px dashed var(--fg)}
.pcb .bnd .sh2{position:absolute;left:0;top:120px;transform:translateX(-50%);background:var(--bg);padding:10px 0;width:110px;text-align:center}
.pcb .bnd .sh2 .d{display:block;margin:0 auto 6px;background:var(--fg)}
.pcb .bnd .sh2 b{display:block;font-family:var(--f-display);font-weight:500;font-size:13.5px}
.pcb .bnd .sh2 small{display:block;font-family:var(--f-mono);font-size:9px;font-stretch:87.5%;color:var(--fg3)}
@media (max-width:860px){.pcb{grid-template-columns:minmax(0,1fr)}.pcb .z,.pcb .z2{padding:20px 0 0}.pcb .bnd{border-left:0;border-top:1px dashed var(--fg);margin-top:26px;height:0}.pcb .bnd .sh2{position:relative;left:auto;top:-1px;transform:translateY(-50%);display:flex;gap:10px;align-items:center;width:max-content;text-align:left;padding:0 12px 0 0}.pcb .bnd .sh2 .d{margin:0}.pcb dl div{grid-template-columns:minmax(0,1fr);gap:2px}}
/* ============ compliance bridge ============ */
.cb{position:relative;margin:40px var(--gut) 0 var(--ax2);display:flex;justify-content:space-between;max-width:900px}
.cb::before{content:"";position:absolute;left:4px;right:4px;top:4px;height:1px;background:var(--fg)}
.cb > *{position:relative;display:grid;gap:12px;justify-items:start;font-family:var(--f-display);font-weight:500;font-size:14.5px;line-height:1.2;max-width:130px}
.cb > *:last-child{justify-items:end;text-align:right}
.cb a .d{background:var(--cobalt);border-color:var(--cobalt)}
.cb a{color:var(--cobalt)}
.cb a:hover b{text-decoration:underline;text-underline-offset:3px}
@media (max-width:719px){.cb{flex-direction:column;gap:16px;margin-left:var(--ax1)}.cb::before{left:4px;right:auto;top:6px;bottom:6px;width:1px;height:auto}.cb > *,.cb > *:last-child{grid-template-columns:9px auto;justify-items:start;text-align:left;max-width:none;align-items:center}}
/* ============ register: facts you can check ============ */
.reg{margin:36px var(--gut) 0 var(--ax1)}
.reg-h,.reg-r{display:grid;grid-template-columns:calc(var(--ax2) - var(--ax1)) minmax(200px,1fr) minmax(0,1.2fr) minmax(0,1.2fr);gap:0 22px;align-items:baseline}
.reg-h{padding-bottom:10px;border-bottom:1px solid var(--fg)}
.reg-h span{font-family:var(--f-mono);font-size:9.5px;font-stretch:87.5%;letter-spacing:.06em;text-transform:uppercase;color:var(--fg3)}
.reg-r{padding:13px 0;border-bottom:1px solid var(--rule)}
.reg-r .nm{font-family:var(--f-display);font-weight:600;font-size:15.5px}
.reg-r .st{display:flex;align-items:center;gap:10px;font-size:15.5px}
.reg-r .vf{font-size:14.5px;color:var(--fg2)}
@media (max-width:900px){.reg-h{display:none}.reg-r{grid-template-columns:minmax(0,1fr);gap:4px}.reg-r > span:first-child:empty{display:none}}

/* ============ contact: the open span connects ============ */
.ct{position:relative;margin:40px 0 0;min-height:290px}
.ct svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ct svg path{fill:none;stroke:var(--fg);stroke-width:1;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset .9s var(--ease)}
.ct.drawn svg path{stroke-dashoffset:0}
.ct .eps{position:relative;margin-left:calc(var(--ax2) + 12%);padding-top:6px;display:grid;gap:30px}
.ct .ep{display:grid;grid-template-columns:11px minmax(0,1fr);gap:16px;align-items:start;max-width:520px}
.ct .ep .d{margin-top:9px;width:11px;height:11px}
.ct .ep b{display:block;font-family:var(--f-display);font-weight:600;font-stretch:82%;font-size:clamp(24px,2.2vw,32px);line-height:1.1}
.ct .ep span{display:block;margin-top:4px;font-size:15px;color:var(--fg2)}
.ct .ep a:hover b{color:var(--cobalt)}
.ct .ep a:hover + span,.ct .ep:hover .d{border-color:var(--cobalt)}

@media (max-width:719px){.ct{min-height:0}.ct svg{display:none}.ct .eps{margin:0 var(--gut) 0 var(--ax1);padding-top:30px;border-left:1px solid var(--fg);padding-left:18px;margin-left:calc(var(--ax1) + 4px)}.ct .ep{grid-template-columns:11px minmax(0,1fr)}.ct .ep .d{margin-left:-24px}}

.rr .tx{font-size:15px;line-height:1.5;color:var(--fg2)}
.caps{margin:28px var(--gut) 0 var(--ax1);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px}
@media (max-width:1240px) and (min-width:1001px){.caps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}}
.caps h3{font-family:var(--f-display);font-weight:600;font-stretch:88%;font-size:22px;padding:14px 0 10px;border-bottom:1px solid var(--fg)}
.caps .rr{grid-template-columns:11px minmax(0,1fr)}
.caps .rr .tx{grid-column:2}
@media (max-width:1000px){.caps{grid-template-columns:minmax(0,1fr);row-gap:28px}}
.prn .pr h3{max-width:40ch}
.cbn{margin:26px var(--gut) 0 var(--ax2);max-width:62ch;font-size:17px;line-height:1.6}
.cbn small{display:block;margin-top:8px;font-family:var(--f-mono);font-size:10px;font-stretch:87.5%;color:var(--fg3)}
@media (max-width:719px){.cbn{margin-left:var(--ax1)}}

.portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.reg .vf a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--fg3)}
.reg .vf a:hover{color:var(--cobalt)}
/* v4: how I build */
.flow{list-style:none;padding:0}
.flow > li{max-width:150px;align-content:start}
.flow small{font-family:var(--f-mono);font-size:9.5px;font-stretch:87.5%;font-weight:400;line-height:1.45;color:var(--fg3);margin-top:-6px}
.flow .end .d{background:var(--cobalt);border-color:var(--cobalt)}
.flow .end b{color:var(--cobalt)}
@media (max-width:719px){.flow > li{max-width:none}.flow small{grid-column:2;margin-top:-10px}}