/* Projects list and project page; builds on product.css (tokens, sections, gallery, actions) */

/* list intro and bar */
.pintro {padding-bottom:40px;}
.pprojects {padding-top:0;}
.pprojects_bar {display:flex;justify-content:flex-end;padding:14px 0;margin-bottom:34px;border-top:1px solid var(--p-ink);border-bottom:1px solid var(--p-line);font-size:0.7rem;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:#707070;}

/* project cards */
.pgrid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 26px;}
.pgrid.has_feature .is_feature {grid-column:span 2;grid-row:span 2;}
.pcard {display:flex;flex-direction:column;color:var(--p-ink);}
.pcard:hover {color:var(--p-ink);}
.pcard_image {display:block;overflow:hidden;background:#ebe8e3;flex:1 1 auto;}
.pcard_image img {display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s;}
.pcard:hover .pcard_image img {transform:scale(1.04);}
.pcard_info {display:flex;align-items:center;gap:16px;margin-top:16px;padding-bottom:14px;border-bottom:1px solid var(--p-line);transition:border-color .25s;}
.pcard:hover .pcard_info {border-color:var(--p-ink);}
.pcard_text {display:flex;flex-direction:column;gap:3px;flex:1 1 auto;min-width:0;}
.pcard_text b {font-size:1.2rem;font-weight:500;letter-spacing:-.3px;line-height:1.25;}
.pcard_text small {font-size:0.8rem;color:var(--p-muted);}
.pcard_year {font-size:0.7rem;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:#707070;white-space:nowrap;}
.pcard_arrow {width:40px;height:40px;flex:0 0 40px;border-radius:50%;border:1px solid var(--p-ink);display:grid;place-items:center;font-size:0.8rem;transition:background .25s,color .25s,transform .25s;}
.pcard:hover .pcard_arrow {background:var(--p-ink);color:#fff;transform:rotate(-45deg);}
.pgrid.has_feature .is_feature .pcard_text b {font-size:1.7rem;letter-spacing:-.6px;}
.pcard:focus {outline:none !important;}
.pcard:focus-visible .pcard_text b {text-decoration:underline;text-underline-offset:5px;}

.pempty {padding:40px 0 20px;border-top:1px solid var(--p-ink);}
.pempty p {font-size:1.1rem;color:var(--p-ink);margin:0 0 18px;}

/* contact band without a photo */
.pband_plain {background:var(--p-ink);min-height:0;}
.pband_plain:after {display:none;}

/* project page */
.pfacts {display:flex;flex-wrap:wrap;gap:12px 40px;margin:22px 0 0;padding:18px 0;border-top:1px solid var(--p-line);border-bottom:1px solid var(--p-line);}
.pfacts div {display:flex;flex-direction:column;gap:4px;}
.pfacts dt {font-size:0.68rem;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:#707070;}
.pfacts dd {margin:0;font-size:1rem;color:var(--p-ink);}

@media (max-width:1100px) {
	.pgrid {grid-template-columns:repeat(2,minmax(0,1fr));}
	.pgrid.has_feature .is_feature {grid-column:span 2;grid-row:auto;}
}
@media (max-width:767px) {
	.pgrid {grid-template-columns:minmax(0,1fr);gap:34px;}
	.pgrid.has_feature .is_feature {grid-column:auto;}
	.pgrid.has_feature .is_feature .pcard_text b {font-size:1.3rem;}
	.pprojects_bar {margin-bottom:24px;}
}
@media (prefers-reduced-motion:reduce) {.pcard_image img,.pcard_arrow,.pcard_info {transition:none;}}

/* project page: intro facts */
.pjintro {padding-bottom:50px;}
.pjintro .astatement_text {max-width:1050px;}
.pjfacts {display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:56px 0 0;border-top:1px solid var(--p-ink);}
.pjfacts div {padding:22px 20px 0 0;display:flex;flex-direction:column;gap:6px;}
.pjfacts div + div {padding-left:20px;border-left:1px solid var(--p-line);}
.pjfacts dt {font-size:0.68rem;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:#707070;}
.pjfacts dd {margin:0;font-size:1.15rem;font-weight:500;letter-spacing:-.2px;color:var(--p-ink);}

/* gallery mosaic: one large photo, the rest in a grid beside it */
.pjgallery {padding-top:0;}
.pjmosaic {display:grid;gap:14px;grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));aspect-ratio:2.2;}
.pjmosaic_item {position:relative;display:block;padding:0;border:0;overflow:hidden;background:#ebe8e3;cursor:zoom-in;}
.pjmosaic_item img {display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:auto;transition:transform .6s;}
.pjmosaic_item:hover img {transform:scale(1.03);}
.pjmosaic_item .p_round {position:absolute;right:14px;bottom:14px;opacity:0;transition:opacity .25s;}
.pjmosaic_item:hover .p_round,.pjmosaic_item:focus-visible .p_round {opacity:1;}
.pjmosaic_item:focus {outline:none !important;}
.pjmosaic_item:first-child {grid-row:span 2;}
.pjmosaic_1 {grid-template-columns:1fr;grid-template-rows:1fr;}
.pjmosaic_1 .pjmosaic_item:first-child,.pjmosaic_2 .pjmosaic_item:first-child {grid-row:auto;}
.pjmosaic_2 {grid-template-columns:2fr 1fr;grid-template-rows:1fr;}
.pjmosaic_3 {grid-template-columns:2fr 1fr;}
.pjmosaic_4 .pjmosaic_item:nth-child(4) {grid-column:span 2;}
.pjmosaic_more {position:absolute;inset:0;display:grid;place-items:center;background:rgba(20,20,20,.55);color:#fff;font-size:0.8rem;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;}

/* story */
.pjstory_grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:50px;border-top:1px solid var(--p-ink);padding-top:30px;}
.pjstory_col {font-size:0.95rem;line-height:1.9;color:var(--p-muted);}
.pjscope ul {list-style:none;margin:0;padding:0;}
.pjscope li {padding:9px 0;border-bottom:1px solid var(--p-line);color:var(--p-ink);font-size:0.92rem;line-height:1.5;}
.pjscope li:first-child {padding-top:0;}
.pjcontent {margin-top:44px;max-width:820px;font-size:0.95rem;line-height:1.9;color:#4e4d4a;}

/* products used */
.pjproducts_grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 22px;}
.pjproduct {display:block;color:var(--p-ink);}
.pjproduct:hover {color:var(--p-ink);}
.pjproduct_image {display:block;overflow:hidden;background:var(--p-paper);}
.pjproduct_image img {display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;transition:transform .5s;}
.pjproduct:hover img {transform:scale(1.04);}
.pjproduct_info {display:flex;flex-direction:column;gap:3px;margin-top:14px;padding-bottom:12px;border-bottom:1px solid var(--p-line);transition:border-color .25s;}
.pjproduct:hover .pjproduct_info {border-color:var(--p-ink);}
.pjproduct_info small {font-size:0.66rem;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:#707070;}
.pjproduct_info b {font-size:1.15rem;font-weight:500;letter-spacing:-.3px;}
.pjproduct_info em {font-style:normal;font-size:0.82rem;color:var(--p-muted);}

/* testimonial */
.pjquote {background:var(--p-ink);}
.pjquote figure {margin:0 auto;max-width:900px;text-align:center;}
.pjquote blockquote {margin:0;font-size:2rem;font-weight:400;letter-spacing:-.6px;line-height:1.45;color:#fff;}
.pjquote blockquote:before {content:'“';display:block;font-size:4rem;line-height:.8;color:#8a8885;margin-bottom:10px;}
.pjquote figcaption {margin-top:28px;font-size:0.72rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#bdbab5;}

/* closing contact */
.pjcta_grid {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:center;}
.pjcta .p_actions {margin-top:0;}

@media (max-width:1100px) {
	.pjproducts_grid {grid-template-columns:repeat(3,minmax(0,1fr));}
	.pjstory_grid {gap:34px;}
	.pjquote blockquote {font-size:1.7rem;}
}
@media (max-width:767px) {
	.pjfacts {grid-template-columns:repeat(2,minmax(0,1fr));margin-top:36px;}
	.pjfacts div,.pjfacts div + div {padding:16px 0;border-left:0;border-bottom:1px solid var(--p-line);}
	.pjfacts div:nth-child(even) {padding-left:16px;border-left:1px solid var(--p-line);}
	.pjmosaic,.pjmosaic_3,.pjmosaic_2 {grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;aspect-ratio:auto;gap:8px;}
	.pjmosaic_item {aspect-ratio:4/3;}
	.pjmosaic_item:first-child {grid-column:span 2;grid-row:auto;aspect-ratio:16/10;}
	.pjmosaic_4 .pjmosaic_item:nth-child(4) {grid-column:span 2;}
	.pjmosaic_item .p_round {display:none;}
	.pjstory_grid {grid-template-columns:minmax(0,1fr);gap:30px;}
	.pjproducts_grid {display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;}
	.pjproduct {flex:0 0 72%;scroll-snap-align:start;}
	.pjquote blockquote {font-size:1.35rem;}
	.pjcta_grid {grid-template-columns:minmax(0,1fr);gap:24px;}
}
@media (prefers-reduced-motion:reduce) {.pjmosaic_item img,.pjproduct_image img {transition:none;}}
/* facts row without rules: spacing alone separates the items */
.pjfacts {border-top:0;gap:24px 40px;}
.pjfacts div,.pjfacts div + div {padding:0;border:0;}
@media (max-width:767px) {.pjfacts {gap:22px 20px;} .pjfacts div,.pjfacts div + div,.pjfacts div:nth-child(even) {padding:0;border:0;}}
/* facts as a spec strip: paper panel, round outlined icons like the action rows */
.pjfacts {background:var(--p-paper);padding:28px 32px;gap:22px 34px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));}
.pjfacts div {display:flex;flex-direction:row;align-items:center;gap:14px;}
.pjfacts_icon {flex:0 0 44px;width:44px;height:44px;border-radius:50%;border:1px solid var(--p-ink);display:grid;place-items:center;font-size:0.85rem;color:var(--p-ink);background:#fff;}
.pjfacts_text {display:flex;flex-direction:column;gap:4px;min-width:0;}
.pjfacts dd {font-size:1.05rem;}
@media (max-width:767px) {
	.pjfacts {padding:22px 18px;gap:18px 14px;}
	.pjfacts_icon {flex-basis:38px;width:38px;height:38px;font-size:0.75rem;}
	.pjfacts dd {font-size:0.95rem;}
}
@media (max-width:767px) {.pjfacts {grid-template-columns:repeat(2,minmax(0,1fr));} .pjfacts div {gap:10px;}}
/* project facts as a dark caption card laid over the lead photo */
.pjintro {padding-bottom:44px;}
.pjstage {position:relative;}
.pjcard {position:absolute;left:24px;bottom:24px;z-index:2;width:calc(50% - 62px);max-width:520px;margin:0;padding:26px 28px;background:rgba(33,37,41,.94);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;pointer-events:none;}
.pjcard div {display:flex;flex-direction:column;gap:5px;min-width:0;}
.pjcard div:first-child {grid-column:1 / -1;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.14);}
.pjcard dt {font-size:0.66rem;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:#a9a6a1;}
.pjcard dd {margin:0;font-size:1rem;font-weight:500;color:#fff;}
.pjcard div:first-child dd {font-size:1.3rem;letter-spacing:-.3px;}
@media (max-width:1100px) {.pjcard {width:calc(66% - 48px);}}
@media (max-width:767px) {
	.pjcard {position:static;width:auto;max-width:none;margin-top:8px;padding:22px 20px;background:var(--p-ink);gap:16px 20px;}
}
@media (min-width:768px) {.pjcard {width:340px;padding:22px 24px;gap:14px 22px;} .pjcard div:first-child {padding-bottom:12px;} .pjcard dd {font-size:0.92rem;} .pjcard div:first-child dd {font-size:1.1rem;}}
/* glass caption card over the photo */
@media (min-width:768px) {
	.pjcard {background:rgba(20,22,25,.32);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 40px rgba(0,0,0,.18);}
	.pjcard dt {color:rgba(255,255,255,.72);}
	.pjcard dd {text-shadow:0 1px 2px rgba(0,0,0,.25);}
	.pjcard div:first-child {border-bottom-color:rgba(255,255,255,.22);}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
	.pjcard {background:rgba(33,37,41,.9);}
}
@media (min-width:768px) {.pjcard {box-shadow:inset 0 1px 0 rgba(255,255,255,.18);}}
@media (min-width:768px) {.pjcard {border:0;box-shadow:none;background:rgba(20,22,25,.2);-webkit-backdrop-filter:blur(10px) saturate(130%);backdrop-filter:blur(10px) saturate(130%);} .pjcard dd {text-shadow:0 1px 3px rgba(0,0,0,.35);} .pjcard dt {text-shadow:0 1px 2px rgba(0,0,0,.3);}}
.pjcard div:first-child {border-bottom:0;padding-bottom:4px;}
/* intro: statement on the left, a quiet label list of the project facts on the right */
.pjintro_grid {display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:80px;align-items:end;}
.pjspec {margin:0;display:flex;flex-direction:column;gap:16px;}
.pjspec div {display:grid;grid-template-columns:90px minmax(0,1fr);align-items:baseline;gap:16px;}
.pjspec dt {font-size:0.66rem;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:#8a8885;}
.pjspec dd {margin:0;font-size:1.05rem;font-weight:500;letter-spacing:-.2px;color:var(--p-ink);}
@media (max-width:1100px) {.pjintro_grid {grid-template-columns:minmax(0,1fr) 260px;gap:44px;}}
@media (max-width:767px) {
	.pjintro_grid {grid-template-columns:minmax(0,1fr);gap:30px;}
	.pjspec {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;}
	.pjspec div {grid-template-columns:minmax(0,1fr);gap:4px;}
}
/* facts row: full width, items side by side, thin black rules only between items */
.pjrow {display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:56px 0 0;}
.pjrow div {display:flex;flex-direction:column;gap:6px;padding:4px 24px;}
.pjrow div:first-child {padding-left:0;}
.pjrow div + div {border-left:1px solid var(--p-ink);}
.pjrow dt {font-size:0.68rem;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:#707070;}
.pjrow dd {margin:0;font-size:1.15rem;font-weight:500;letter-spacing:-.2px;color:var(--p-ink);}
@media (max-width:767px) {
	.pjrow {grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:36px;row-gap:22px;}
	.pjrow div {padding:2px 16px;}
	.pjrow div + div {border-left:0;}
	.pjrow div:nth-child(odd) {padding-left:0;}
	.pjrow div:nth-child(even) {border-left:1px solid var(--p-ink);}
	.pjrow dd {font-size:1rem;}
}
/* list intro: project count beside the heading; one rule above the grid */
.pintro_row {display:flex;align-items:flex-end;justify-content:space-between;gap:30px;}
.pintro_count {flex:0 0 auto;padding-bottom:8px;font-size:0.7rem;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:#707070;white-space:nowrap;}
.pprojects_bar {padding:0;border-bottom:0;}
@media (max-width:767px) {.pintro_row {flex-direction:column;align-items:flex-start;gap:14px;} .pintro_count {padding-bottom:0;}}
/* project cards without the bottom rule */
.pcard_info,.pcard:hover .pcard_info {border-bottom:0;padding-bottom:0;}
.pjproduct_info,.pjproduct:hover .pjproduct_info {border-bottom:0;padding-bottom:0;}