/* One calm, pinned stage replaces six repeated full-screen project sections. */
.project-showcase { position: relative; min-height: 100svh; background: var(--black); }
.project-showcase-stage { position: relative; height: 100svh; overflow: hidden; display: flex; align-items: flex-end; padding: clamp(24px, 5vw, 72px); isolation: isolate; }
.showcase-background { position: absolute; inset: 0; z-index: -3; background: center / cover no-repeat; background-color: var(--black); transition: opacity .32s ease; }
.showcase-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(17,17,18,.82) 0%, rgba(17,17,18,.48) 40%, rgba(17,17,18,.08) 76%); }
.project-showcase-stage.is-changing .showcase-background { opacity: .72; }
.showcase-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; width: 100%; }
.showcase-title { max-width: 8.5ch; margin: 0; color: var(--ink); font-size: clamp(50px, 8vw, 128px); font-weight: 700; letter-spacing: -.065em; line-height: .88; text-shadow: 0 2px 18px rgba(0,0,0,.28); }
.showcase-type { margin: 1.1rem 0 0; color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.showcase-open { appearance: none; min-width: 10.5rem; min-height: 3.1rem; border: 1px solid var(--ink); background: var(--black); color: var(--ink); padding: .75rem 1rem; cursor: pointer; font: 700 11px Inter, Arial, sans-serif; letter-spacing: .08em; transition: background .2s, color .2s, transform .2s; }
.showcase-open:hover, .showcase-open:focus-visible { background: var(--ink); color: var(--black); transform: translateY(-2px); outline: none; }
.showcase-label { margin: 0 0 1rem; color: var(--acid); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.showcase-nav { position: absolute; z-index: 2; top: 50%; right: clamp(24px, 4vw, 68px); transform: translateY(-50%); display: grid; justify-items: end; gap: .48rem; }
.showcase-nav button { appearance: none; padding: .05rem 0; border: 0; border-bottom: 1px solid transparent; background: transparent; color: rgba(239,237,231,.6); cursor: pointer; font: 600 12px Inter, Arial, sans-serif; letter-spacing: .06em; text-align: right; transition: color .2s, border-color .2s; }
.showcase-nav button[aria-current="true"] { color: var(--acid); border-color: var(--acid); }
.showcase-controls { position: absolute; z-index: 2; top: 50%; left: clamp(22px, 3vw, 58px); right: clamp(22px, 3vw, 58px); transform: translateY(-50%); display: flex; justify-content: space-between; pointer-events: none; }
.showcase-controls button { pointer-events: auto; appearance: none; width: 62px; height: 62px; border: 1px solid var(--ink); background: rgba(17,17,18,.78); color: var(--ink); cursor: pointer; font-size: 27px; transition: background .2s, color .2s, transform .2s; }
.showcase-controls button:hover, .showcase-controls button:focus-visible { background: var(--ink); color: var(--black); transform: scale(1.06); outline: none; }
@media (max-width: 700px) { .project-showcase { min-height: 100svh; } .project-showcase-stage { padding: 28px 22px; } .showcase-content { grid-template-columns: 1fr; gap: 1.35rem; } .showcase-title { font-size: 16vw; line-height: .9; } .showcase-type { font-size: 12px; max-width: 18ch; } .showcase-open { justify-self: start; } .showcase-controls { left: 14px; right: 14px; } .showcase-controls button { width: 52px; height: 52px; font-size: 22px; } }