/* Home portfolio: existing Jost typography, actual website previews. */
.selected-showcase .section-head { color: var(--accent); }
.showcase-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-top:2.5rem; }
.showcase-heading h2 { font-family:inherit; font-size:clamp(2rem,4.3vw,4.6rem); font-weight:700; line-height:1.1; letter-spacing:-.035em; text-transform:uppercase; margin:0; }
.showcase-heading h2 span { font-weight:300; }
.showcase-heading > p { font-size:clamp(1rem,1.2vw,1.25rem); font-weight:300; line-height:1.55; text-align:right; flex-shrink:0; margin:0 0 .2rem; }
.showcase-grid { display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); gap:1.6rem; margin-top:2.75rem; align-items:start; }
.showcase-project { display:block; min-width:0; color:var(--ink); }
.showcase-feature { grid-row:span 2; }
.showcase-preview { overflow:hidden; border:1px solid #cec9c1; border-radius:3px; background:#e9e6e0; box-shadow:0 10px 30px #00000008; transition:box-shadow .25s ease; }
.showcase-browser { height:clamp(14px,1.7vw,25px); display:flex; gap:5px; align-items:center; padding:0 10px; border-bottom:1px solid #d8d2ca; }
.showcase-browser i { width:5px; height:5px; border-radius:50%; background:#aaa39c; }
.showcase-preview img { display:block; width:100%; height:auto; position:static; object-fit:contain; }
.showcase-feature .showcase-preview img { object-fit:contain; }
.showcase-caption { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-top:.85rem; }
.showcase-caption h3 { font-size:1rem; font-weight:700; margin:0; line-height:1.3; letter-spacing:.02em; }
.showcase-caption p { font-size:.8rem; font-weight:300; margin:.25rem 0 0; line-height:1.5; }
.showcase-caption p span { color:#6b6560; }
.showcase-arrow { width:23px; height:23px; color:var(--accent); flex-shrink:0; transition:transform .2s ease; }
.showcase-arrow svg { display:block; width:100%; height:100%; }
.showcase-project:hover .showcase-preview { box-shadow:0 12px 32px #00000015; }
.showcase-project:hover .showcase-arrow { transform:translate(2px,-2px); }
.showcase-project:focus-visible { outline:2px solid var(--accent); outline-offset:6px; }
.showcase-all { margin-top:2.5rem; color:var(--accent); }
@media(max-width:760px) {
 .showcase-heading { display:block; margin-top:1.8rem; }
 .showcase-heading > p { text-align:left; margin-top:1.2rem; }
 .showcase-grid { grid-template-columns:1fr 1fr; gap:1.5rem 1rem; margin-top:2rem; }
 .showcase-feature { grid-row:auto; grid-column:1/-1; }
 .showcase-caption { align-items:flex-start; gap:.5rem; }
 .showcase-caption p span { display:block; }
 .showcase-arrow { width:17px; height:17px; }
}
@media(max-width:480px) { .showcase-grid { grid-template-columns:1fr; } .showcase-feature { grid-column:auto; } .showcase-caption p span { display:inline; } }
@media(prefers-reduced-motion:reduce) { .showcase-preview,.showcase-arrow { transition:none; } }
/* Align the feature with the combined height of the two supporting projects. */
@media(min-width:761px) {
 .showcase-feature { align-self:stretch; display:flex; flex-direction:column; }
 .showcase-feature .showcase-preview { flex:1; min-height:0; display:flex; flex-direction:column; }
 .showcase-feature .showcase-browser { flex-shrink:0; }
 .showcase-feature .showcase-preview img { flex:1; min-height:0; height:0; object-fit:cover; object-position:center; }
 .showcase-feature .showcase-caption { flex-shrink:0; }
}