/* ======================
 PORTFOLIO ONLY CSS
====================== */


.pf-hero {

background:#0B132B;

background-image:
linear-gradient(rgba(214,216,220,.045) 1px,transparent 1px),
linear-gradient(90deg,rgba(214,216,220,.045) 1px,transparent 1px);

background-size:72px 72px;

}



.pf-container {

max-width:1200px;
margin:0 auto;
padding:0 32px;

}



.pf-hero .pf-container {

padding-top:72px;
padding-bottom:72px;

}



.pf-kicker {

font-family:'Space Mono',monospace;
font-size:12px;
letter-spacing:2px;
text-transform:uppercase;

color:#86A9D6;

}



.pf-title {

font-family:'Space Grotesk',sans-serif;
font-weight:700;

font-size:48px;
line-height:1.05;

letter-spacing:-1.2px;

color:#fff;

margin-top:12px;

}



.pf-description {

max-width:560px;

font-size:18px;

line-height:1.6;

color:#C7CBD2;

margin-top:14px;

}



/* GRID */


.portfolio-section {

padding:40px 0 96px;

}



.portfolio-grid {

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:24px;

}



/* CARD */


.portfolio-card {

background:#fff;

border:1px solid #D6D8DC;

border-radius:18px;

overflow:hidden;

box-shadow:
0 6px 30px rgba(11,19,43,.05);

}



/* DRAWING */


.drawing-sheet {

background:#0B132B;

padding:20px;

position:relative;

overflow:hidden;

}



.drawing-sheet:after {

content:"";

position:absolute;

right:0;
top:0;

width:72px;
height:72px;


background-image:

linear-gradient(rgba(134,169,214,.16) 1px,transparent 1px),
linear-gradient(90deg,rgba(134,169,214,.16) 1px,transparent 1px);


background-size:12px 12px;

}



.drawing-top {

position:relative;
z-index:2;

display:flex;

justify-content:space-between;

}



.drawing-label {

font-family:'Space Mono',monospace;

font-size:9px;

letter-spacing:1.5px;

color:#86A9D6;

}



.drawing-code {

font-family:'Space Mono',monospace;

font-size:17px;

color:white;

margin-top:4px;

}



.drawing-letter {

width:34px;
height:34px;

border:1px solid rgba(134,169,214,.5);

border-radius:7px;

display:flex;
align-items:center;
justify-content:center;

font-family:'Space Mono',monospace;

font-weight:700;

color:#86A9D6;

}



/* BOTTOM */


.drawing-bottom {

position:relative;

z-index:2;

display:flex;

margin-top:16px;

padding-top:12px;

border-top:1px solid rgba(214,216,220,.15);

}



.drawing-bottom div {

flex:1;

}



.drawing-bottom > div:not(:first-child){

border-left:1px solid rgba(214,216,220,.12);

padding-left:14px;

}



.drawing-value {

font-family:'Space Mono',monospace;

font-size:11px;

color:#C7CBD2;

margin-top:3px;

}



/* CONTENT */


.portfolio-content {

padding:22px;

}



.portfolio-category {

font-family:'Space Mono',monospace;

font-size:11px;

letter-spacing:1px;

text-transform:uppercase;


color:#3F6FA8;

background:#EAF1F8;

padding:4px 10px;

border-radius:6px;

}



.portfolio-content h3 {

font-family:'Space Grotesk',sans-serif;

font-size:19px;

font-weight:600;

color:#0B132B;

margin:14px 0 0;

}



.portfolio-content p {

font-size:14px;

line-height:1.55;

color:#6B7280;

margin-top:8px;

}



@media(max-width:700px){

.pf-container {

padding-left:20px;
padding-right:20px;

}


.pf-title {

font-size:36px;

}

}