.atelier-showcase{background:var(--at-surface);padding:64px 0;color:var(--at-ink)}.atelier-showcase[hidden]{display:none}.showcase-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}.showcase-heading small{color:var(--at-red);font-size:10px;letter-spacing:.14em}.showcase-heading h2{font-family:OKDisplay,Arial,sans-serif;font-size:56px;line-height:1;text-transform:uppercase;letter-spacing:0;margin:12px 0 0}.showcase-controls{display:flex;align-items:center;gap:12px}.showcase-controls button{width:44px;height:44px;border:1px solid var(--at-line);background:transparent;color:var(--at-ink);font-size:20px;cursor:pointer}.showcase-controls button:hover{background:var(--at-ink);color:var(--at-bg)}.showcase-controls button:disabled{opacity:.35;cursor:default}.showcase-counter{font-size:12px;font-variant-numeric:tabular-nums;min-width:42px;text-align:center}.showcase-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--at-line) transparent;overscroll-behavior-x:contain;scroll-behavior:smooth}.showcase-slide{flex:0 0 100%;min-width:0;display:grid;grid-template-columns:1.6fr 1fr;scroll-snap-align:start;padding:0;background:var(--at-bg);border:0;position:relative}.showcase-media{min-width:0;position:relative;background:#ececea;overflow:hidden}.showcase-media img{width:100%;height:440px;object-fit:contain;display:block;transition:transform 1s cubic-bezier(.2,.7,.2,1)}.showcase-media:hover img{transform:scale(1.035)}.showcase-media>span{position:absolute;top:22px;left:24px;font-size:10px;letter-spacing:.1em;background:#ffffffed;color:#222;padding:8px 12px}.showcase-copy{padding:44px;align-self:center}.showcase-copy>small{font-size:11px;letter-spacing:.12em;color:var(--at-muted)}.showcase-copy h3{font-family:OKDisplay,Arial,sans-serif;font-size:clamp(32px,3vw,48px);line-height:1.04;letter-spacing:0;text-transform:uppercase;margin:14px 0 24px;overflow-wrap:anywhere}.showcase-price{font-size:28px;font-weight:600;letter-spacing:-.03em;margin-bottom:5px}.showcase-tax{font-size:11px;color:var(--at-muted);display:block;margin-bottom:28px}.showcase-open{display:inline-flex;align-items:center;gap:32px;border:1px solid var(--at-line);background:transparent;color:var(--at-ink);font-size:12px;padding:15px 20px;cursor:pointer}.showcase-open:hover{background:var(--at-red);border-color:var(--at-red);color:#fff}.showcase-note{font-size:11px;color:var(--at-muted);margin:16px 0 0}.showcase-controls button:focus-visible,.showcase-open:focus-visible,.showcase-track:focus-visible{outline:3px solid var(--at-red);outline-offset:3px}
@media(max-width:700px){.atelier-showcase{padding:40px 0}.showcase-heading h2{font-size:42px}.showcase-heading{gap:16px}.showcase-controls{gap:6px}.showcase-controls button{width:36px;height:36px}.showcase-counter{min-width:34px;font-size:11px}.showcase-slide{grid-template-columns:1fr}.showcase-media img{height:270px}.showcase-copy{padding:28px}.showcase-copy h3{font-size:34px;margin-bottom:18px}.showcase-media>span{left:16px;top:16px}.showcase-price{font-size:25px}.showcase-tax{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){.showcase-track{scroll-behavior:auto}.showcase-media img{transition:none}.showcase-media:hover img{transform:none}}
/* Let the photograph define its own height instead of letterboxing it. */
.showcase-slide{align-items:center}
.showcase-media{align-self:center;background:transparent}
.showcase-media img{height:auto;min-height:0;aspect-ratio:auto;width:100%;object-fit:contain}
@media(hover:hover){.showcase-media:hover img{transform:none}}
@media(max-width:700px){.showcase-media img{height:auto;min-height:0;width:100%}}