/* T-Portfolio Elements – shared base */
.tpe-project{--tpe-gap:48px;--tpe-text-width:45%;display:grid;grid-template-columns:minmax(0,var(--tpe-text-width)) minmax(0,calc(100% - var(--tpe-text-width)));gap:var(--tpe-gap);align-items:center;width:100%;box-sizing:border-box}
.tpe-project *{box-sizing:border-box}
.tpe-project__eyebrow{margin:0 0 24px;letter-spacing:.35em;text-transform:uppercase;font-size:13px;color:#999}
.tpe-project__title{margin:0 0 20px;font-size:34px;line-height:1.25;font-weight:700}
.tpe-project__description{margin:0 0 28px;line-height:1.55;color:#777}
.tpe-project__description>:first-child{margin-top:0}.tpe-project__description>:last-child{margin-bottom:0}
.tpe-project__button{appearance:none;border:0;border-radius:3px;padding:14px 32px;background:#151515;color:#fff;font-weight:600;cursor:pointer}
.tpe-project__media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch}
.tpe-project__media--1{grid-template-columns:1fr}
.tpe-project__teaser{display:block;border:0;padding:0;margin:0;background:none;width:100%;cursor:pointer;overflow:hidden}
.tpe-project__teaser img{display:block;width:100%;height:100%;object-fit:cover}
.tpe-ratio-portrait .tpe-project__teaser{aspect-ratio:4/5}.tpe-ratio-square .tpe-project__teaser{aspect-ratio:1/1}.tpe-ratio-landscape .tpe-project__teaser{aspect-ratio:4/3}.tpe-ratio-natural .tpe-project__teaser{aspect-ratio:auto}.tpe-ratio-natural .tpe-project__teaser img{height:auto}
.tpe-project__placeholder{display:grid;place-items:center;min-height:260px;border:1px dashed #bbb;color:#888;font-size:14px;background:#fafafa}
.tpe-nav{--tpe-nav-gap:28px;display:flex;gap:var(--tpe-nav-gap);align-items:center;overflow-x:auto;white-space:nowrap;scrollbar-width:none;padding:12px 0}
.tpe-nav::-webkit-scrollbar{display:none}.tpe-nav__link{text-decoration:none;color:inherit;text-transform:uppercase;letter-spacing:.08em}
.tpe-nav--sticky{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(8px)}
html{scroll-behavior:smooth}

/* One teaser image gets its own landscape treatment. Two-image projects keep the selected ratio above. */
.tpe-project__media--1 .tpe-project__teaser{aspect-ratio:4/3}
.tpe-single-wide .tpe-project__media--1 .tpe-project__teaser{aspect-ratio:16/9}
.tpe-single-natural .tpe-project__media--1 .tpe-project__teaser{aspect-ratio:auto}
.tpe-single-natural .tpe-project__media--1 .tpe-project__teaser img{height:auto}