/* =====================================================================
   Blueprint – engineers & architects. Drafting grid, crop marks,
   dimension lines, title-block labels. Dark blueprint by default.
   ===================================================================== */
.th-blueprint{--ln:color-mix(in srgb,var(--tx) 14%,transparent);--ln2:color-mix(in srgb,var(--tx) 5%,transparent)}
body.th-blueprint{background-image:linear-gradient(var(--ln) 1px,transparent 1px),linear-gradient(90deg,var(--ln) 1px,transparent 1px),linear-gradient(var(--ln2) 1px,transparent 1px),linear-gradient(90deg,var(--ln2) 1px,transparent 1px);background-size:100px 100px,100px 100px,20px 20px,20px 20px}
.th-blueprint h1,.th-blueprint h2,.th-blueprint h3{font-weight:800;letter-spacing:-.01em}
.th-blueprint .b-title{text-transform:uppercase;font-size:clamp(28px,3.4vw,48px);letter-spacing:.01em;padding-bottom:26px;position:relative;display:block}
html[dir=rtl] .th-blueprint .b-title{text-transform:none}
.th-blueprint .b-title::after{content:"";position:absolute;inset-inline-start:0;bottom:0;width:min(360px,70%);height:14px;border-inline:2px solid var(--a);background:linear-gradient(var(--a),var(--a)) center/100% 2px no-repeat}
.th-blueprint .b-intro.center .b-title::after{inset-inline-start:50%;transform:translateX(-50%)}
.th-blueprint main{counter-reset:sec}
.th-blueprint .b-sec{counter-increment:sec}
.th-blueprint .b-sec .b-title::before{content:"SEC. " counter(sec,decimal-leading-zero) " —";display:block;font:600 13px var(--mono);color:var(--a);letter-spacing:.14em;margin-bottom:12px}
html[dir=rtl] .th-blueprint .b-sec .b-title::before{content:"قسم " counter(sec,decimal-leading-zero) " —";letter-spacing:0}
.th-blueprint .s-header{background:color-mix(in srgb,var(--bg) 88%,transparent);border-bottom:1px solid var(--ln);backdrop-filter:blur(10px)}
.th-blueprint .s-logo span{font:800 20px var(--hf);text-transform:uppercase;letter-spacing:.04em}
.th-blueprint .s-nav a{font-family:var(--mono);font-size:13.5px;text-transform:uppercase}
.th-blueprint .s-btn{border-radius:2px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;background:var(--a);border-color:var(--a);color:#111}
.th-blueprint .s-btn-ghost{background:transparent;color:var(--tx);border-color:var(--tx)}
.th-blueprint .s-btn-ghost:hover{background:var(--tx);color:var(--bg)}
html[dir=rtl] .th-blueprint .s-btn,html[dir=rtl] .th-blueprint .s-nav a{text-transform:none;letter-spacing:0}

/* crop marks around images */
.th-blueprint .pr-photo,.th-blueprint .pj-img,.th-blueprint .ce-img,.th-blueprint .it-img{position:relative;overflow:visible;border-radius:0}
.th-blueprint .pr-photo::before,.th-blueprint .pj-img::before{content:"";position:absolute;inset:-14px;pointer-events:none;z-index:3;background:linear-gradient(var(--a),var(--a)) 0 0/26px 2px,linear-gradient(var(--a),var(--a)) 0 0/2px 26px,linear-gradient(var(--a),var(--a)) 100% 0/26px 2px,linear-gradient(var(--a),var(--a)) 100% 0/2px 26px,linear-gradient(var(--a),var(--a)) 0 100%/26px 2px,linear-gradient(var(--a),var(--a)) 0 100%/2px 26px,linear-gradient(var(--a),var(--a)) 100% 100%/26px 2px,linear-gradient(var(--a),var(--a)) 100% 100%/2px 26px;background-repeat:no-repeat}
.th-blueprint .pj-img img,.th-blueprint .pr-photo img{border-radius:0}

/* hero */
.th-blueprint .b-profile.has-video .pr-shade{background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 96%,transparent) 30%,color-mix(in srgb,var(--bg) 70%,transparent))}
.th-blueprint .pr-badge{border-radius:2px;font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;background:transparent;border:1.5px solid var(--a);color:var(--a)}
.th-blueprint .pr-badge i{background:var(--a);box-shadow:none;animation:none;border-radius:0}
.th-blueprint .pr-name{text-transform:uppercase;font-size:clamp(40px,6vw,84px);letter-spacing:-.02em}
html[dir=rtl] .th-blueprint .pr-name{text-transform:none}
.th-blueprint .pr-roles{font-family:var(--mono);color:var(--a);font-size:clamp(15px,1.5vw,19px);text-transform:uppercase}
.th-blueprint .pr-photo{aspect-ratio:1;background:linear-gradient(180deg,color-mix(in srgb,var(--p) 30%,var(--sf)),var(--sf));border:2px solid var(--tx)}
.th-blueprint .pr-photo img{object-position:bottom}
.th-blueprint .pr-ring{background:var(--a);fill:#111;font-family:var(--mono);font-size:12px;border-radius:50%}
.th-blueprint .pr-deco{display:none}
.th-blueprint .pr-stats{border-top:2px solid var(--tx);gap:0}
.th-blueprint .pr-stats>div{border-inline-end:1px dashed var(--ln);padding-inline:18px}
.th-blueprint .pr-stats b{font-family:var(--mono);color:var(--a)}
.th-blueprint .pr-stats span{font-family:var(--mono);font-size:12.5px;text-transform:uppercase}
.th-blueprint .pr-social a{border-radius:2px}

/* projects as drawing sheets */
.th-blueprint .pj-rows .pj{border-top:1px solid var(--ln);padding-top:40px}
.th-blueprint .pj-rows .pj-img{box-shadow:none;border:1px solid var(--ln)}
.th-blueprint .pj-cat{font-family:var(--mono);color:var(--a);font-weight:600}
.th-blueprint .pj-metric{font-family:var(--mono);background:transparent;border:1.5px solid var(--a);color:var(--a);border-radius:2px}
.th-blueprint .pj-tags span{font-family:var(--mono);border-radius:2px}

/* skills: thin measured bars */
.th-blueprint .sk-group{border:1px solid var(--ln);padding:22px;background:color-mix(in srgb,var(--bg) 70%,transparent)}
.th-blueprint .sk-group h3{font-family:var(--mono);color:var(--a)}
.th-blueprint .sk-bar{height:12px;border-radius:0;background:repeating-linear-gradient(90deg,var(--ln) 0 1px,transparent 1px 10%);border:1px solid var(--ln)}
.th-blueprint .sk-bar i{border-radius:0;background:var(--p)}
.th-blueprint .sk-top span{font-family:var(--mono);color:var(--a)}

/* timeline, steps, certs, quotes */
.th-blueprint .tl::before{background:repeating-linear-gradient(var(--tx) 0 6px,transparent 6px 12px);width:2px;opacity:.5}
.th-blueprint .tl-dot{border-radius:0;transform:rotate(45deg);border-color:var(--a);background:var(--bg);box-shadow:none}
.th-blueprint .tl-card{background:transparent;border:1px solid var(--ln);border-radius:0}
.th-blueprint .tl-period{font-family:var(--mono);color:var(--a)}
.th-blueprint .ps{background:transparent;border:1px solid var(--ln);border-radius:0}
.th-blueprint .ps-n{-webkit-text-stroke:1.5px var(--a);font-family:var(--mono)}
.th-blueprint .ce{border:1px solid var(--ln);border-radius:0;background:transparent}
.th-blueprint .qt{border-radius:0;background:transparent;border:1px solid var(--ln);border-inline-start:4px solid var(--a)}
.th-blueprint .qt-ini{border-radius:0;background:var(--a);color:#111}
.th-blueprint .b-contact .card-like{border-radius:0;border:1px solid var(--ln);background:var(--sf)}
.th-blueprint .s-form input,.th-blueprint .s-form textarea{border-radius:0}