.ts-project-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.ts-project-poster{container-type:inline-size;min-height:220px;position:relative;isolation:isolate;display:flex;align-items:center;aspect-ratio:1.55;min-width:0;overflow:hidden;background:var(--pc-bg,#ff435e);color:var(--pc-text,#fff);border-radius:5px;box-shadow:0 16px 40px #0002;padding:0}
.ts-project-poster:before{content:'';position:absolute;z-index:-1;inset:-40% 42% -40% -65%;border-radius:50%;background:#ffffff09;box-shadow:35px 0 0 #ffffff06}
.ts-poster-copy{position:relative;z-index:2;box-sizing:border-box;width:56%;padding:8% 0 8% 7%;text-align:left}
.ts-project-poster .ts-poster-copy h3{font-family:Arial,Helvetica,sans-serif;font-size:clamp(16px,5.5cqw,34px);font-weight:800;line-height:1.06;letter-spacing:-.035em;text-transform:uppercase;margin:0 0 5cqw;color:inherit;overflow-wrap:anywhere}
.ts-project-poster .ts-poster-copy p{font-family:Arial,Helvetica,sans-serif;font-size:clamp(12px,2.7cqw,17px);line-height:1.5;margin:0 0 6cqw;color:inherit;overflow-wrap:anywhere}
.ts-poster-button{display:inline-block;max-width:100%;padding:2.2cqw 3.5cqw;background:var(--pc-text,#fff);color:var(--pc-bg,#ff435e);font:700 clamp(11px,2.5cqw,15px)/1.3 Arial,sans-serif;text-decoration:none;overflow-wrap:anywhere;border:0;box-shadow:0 5px 16px #0001}
.ts-poster-button:hover{filter:brightness(.93)}.ts-poster-button:focus-visible,.ts-poster-icons a:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.ts-poster-letter{position:absolute;right:2%;top:50%;transform:translateY(-50%);width:46%;text-align:center;font-family:Arial Black,Arial,Helvetica,sans-serif;font-weight:900;font-size:64cqw;line-height:1;letter-spacing:-.07em;color:var(--pc-text,#fff);background-size:cover;background-repeat:no-repeat;filter:drop-shadow(0 3px 5px #0003);pointer-events:none}
.ts-poster-letter.has-image{color:transparent;-webkit-text-fill-color:transparent;background-clip:text;-webkit-background-clip:text}
.ts-poster-icons{display:flex;flex-wrap:wrap;gap:2.7cqw;margin-top:5cqw}.ts-poster-icons a,.ts-poster-icons>span{display:inline-flex;align-items:center;justify-content:center;min-width:26px;min-height:26px;width:7cqw;height:7cqw;padding:2px;border-radius:50%;background:var(--pc-text,#fff);color:var(--pc-bg,#ff435e);font:700 clamp(12px,3.4cqw,20px)/1 Arial,sans-serif;text-decoration:none}
@media(max-width:900px){.ts-project-card-grid{grid-template-columns:repeat(3,minmax(280px,1fr));overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:18px;gap:16px}.ts-project-poster{scroll-snap-align:start}}
#ts-project-card-editor .ts-pc-preview{max-width:640px;margin:20px 0}#ts-project-card-editor .ts-pc-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}#ts-project-card-editor label{display:grid;gap:6px;font-weight:600}#ts-project-card-editor input[type=text],#ts-project-card-editor input[type=url],#ts-project-card-editor textarea{width:100%;max-width:100%;min-width:0}#ts-project-card-editor .ts-pc-icon-row{display:grid;grid-template-columns:80px 1fr 2fr;gap:12px;border:1px solid #ddd;padding:12px;margin:12px 0}#ts-project-card-editor .ts-pc-icon-row legend{font-weight:600}@media(max-width:600px){#ts-project-card-editor .ts-pc-fields,#ts-project-card-editor .ts-pc-icon-row{grid-template-columns:1fr}}
/* Fit three compact cards to the available page width on every device. */
.ts-project-card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;width:100%;max-width:100%;overflow:visible;padding-bottom:0;scroll-snap-type:none}
.ts-project-card-grid>.ts-project-poster{min-width:0;min-height:0;aspect-ratio:1.55;border-radius:2px;box-shadow:none}
.ts-project-card-grid .ts-poster-copy h3{font-size:clamp(9px,5.5cqw,30px);margin-bottom:3cqw}
.ts-project-card-grid .ts-poster-copy p{font-size:clamp(7px,2.7cqw,15px);margin-bottom:4cqw;line-height:1.35}
.ts-project-card-grid .ts-poster-button{font-size:clamp(7px,2.5cqw,13px);padding:2cqw 3cqw}
.ts-project-card-grid .ts-poster-icons{gap:2cqw;margin-top:3cqw}
.ts-project-card-grid .ts-poster-icons a,.ts-project-card-grid .ts-poster-icons>span{min-width:0;min-height:0;width:7cqw;height:7cqw;font-size:clamp(7px,3.4cqw,18px);padding:1px}
/* Keep size containment on the grid, never on the auto-sized cards. */
.ts-project-card-grid{container-type:inline-size}
.ts-project-card-grid>.ts-project-poster{container-type:normal;width:100%;min-height:120px;aspect-ratio:1.55}
.ts-project-card-grid .ts-poster-copy h3{font-size:clamp(9px,1.83cqw,30px);margin-bottom:1cqw}
.ts-project-card-grid .ts-poster-copy p{font-size:clamp(7px,.9cqw,15px);margin-bottom:1.33cqw}
.ts-project-card-grid .ts-poster-button{font-size:clamp(7px,.83cqw,13px);padding:.67cqw 1cqw}
.ts-project-card-grid .ts-poster-letter{font-size:21.33cqw}
.ts-project-card-grid .ts-poster-icons{gap:.67cqw;margin-top:1cqw}
.ts-project-card-grid .ts-poster-icons a,.ts-project-card-grid .ts-poster-icons>span{width:2.33cqw;height:2.33cqw;font-size:clamp(7px,1.13cqw,18px)}

/* Exact landscape cards, with an automatic transparent empty-image state. */
.ts-project-card-grid>.ts-project-poster{aspect-ratio:16/9;min-height:0;height:auto;display:block}
.ts-project-card-grid>.ts-project-poster:after{content:'';display:block;padding-top:56.25%;pointer-events:none}
.ts-project-card-grid .ts-poster-copy{position:absolute;inset:0 auto 0 0;width:56%;padding:5% 0 5% 6%;overflow:auto;scrollbar-width:thin}
.ts-project-card-grid .ts-poster-letter{font-size:19cqw}
.ts-project-poster.ts-poster-no-image{background:transparent;box-shadow:none}
.ts-project-poster.ts-poster-no-image:before{display:none}
#ts-project-card-editor .ts-project-poster{aspect-ratio:16/9;min-height:0}

/* Empty photo: only the letter is cut out, the rest keeps the card color. */
.ts-poster-cutout{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.ts-project-poster.ts-poster-no-image .ts-poster-cutout{display:block}
.ts-project-poster.ts-poster-no-image .ts-poster-letter{visibility:hidden}
.ts-poster-letter{font-size:39cqw;letter-spacing:0;right:4%;width:42%;overflow:hidden;filter:none}
.ts-project-card-grid .ts-poster-letter{font-size:13cqw}

/* Matte metal cards with one accessible project link and independent icon links. */
.ts-project-card-grid{gap:4px}
.ts-project-poster,.ts-project-card-grid>.ts-project-poster{background-color:var(--pc-bg,#ff435e);background-image:linear-gradient(135deg,#ffffff2e 0%,#ffffff09 38%,#0000001f 70%,#ffffff12 100%);box-shadow:0 10px 20px -7px #0009,0 3px 5px #0005,inset 0 1px 0 #ffffff38,inset 0 -1px 0 #0002;border-radius:4px;transition:box-shadow .2s ease}
.ts-project-poster:before{display:none}
.ts-project-poster.ts-poster-no-image{background:transparent;box-shadow:0 10px 20px -7px #0009,0 3px 5px #0005,inset 0 1px 0 #ffffff38,inset 0 -1px 0 #0002}
.ts-project-poster .ts-poster-link{position:absolute;inset:0;z-index:3;display:block;border:0;background:none;text-decoration:none;border-radius:inherit}
.ts-project-poster .ts-poster-link:focus-visible{outline:3px solid var(--pc-text,#fff);outline-offset:-4px;background:#ffffff0a}
.ts-project-poster .ts-poster-copy{pointer-events:none;overflow:hidden}
.ts-project-poster .ts-poster-icons{position:relative;z-index:4;pointer-events:none}
.ts-project-poster .ts-poster-icons a{pointer-events:auto}
.ts-project-poster .ts-poster-copy{z-index:4}
@media(hover:hover){.ts-project-poster:hover{box-shadow:0 14px 25px -7px #000a,0 4px 7px #0006,inset 0 1px 0 #ffffff50}}
@media(prefers-reduced-motion:reduce){.ts-project-poster{transition:none}}

/* Six columns on desktop; keep all contents proportional to each card. */
@media(min-width:1024px){
 .ts-project-card-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
 .ts-project-card-grid .ts-poster-copy h3{font-size:clamp(9px,.915cqw,30px);margin-bottom:.5cqw}
 .ts-project-card-grid .ts-poster-copy p{font-size:clamp(7px,.45cqw,15px);margin-bottom:.665cqw}
 .ts-project-card-grid .ts-poster-letter{font-size:6.5cqw}
 .ts-project-card-grid .ts-poster-icons{gap:.335cqw;margin-top:.5cqw}
 .ts-project-card-grid .ts-poster-icons a,.ts-project-card-grid .ts-poster-icons>span{width:1.165cqw;height:1.165cqw;font-size:clamp(7px,.565cqw,18px)}
}

/* Dedicated project archive: use the same available width as homepage sections. */
.ts-project-archive{width:auto;max-width:none;margin:0;padding:clamp(24px,5vw,80px)}
.ts-project-archive .ts-project-card-grid{margin-top:32px;margin-bottom:32px}