/* ================================================================
   MOD: THE VAULT — merch showcase carousel
   Requires: core.css tokens + mods/css/portfolio-carousel.css
   (reuses its .carousel-viewport / .carousel-track / .carousel-card /
   .carousel-caption / .carousel-nav classes — this file only styles
   the section wrapper itself). Requires: mods/js/vault-carousel.js.

   This is the same rolodex-carousel pattern as Portfolio, reused for
   a second, independent instance on the page (per the "reuse and
   extend" rule in the build standards) rather than a parallel
   component. The two carousels never share IDs, so both can run on
   the same page without colliding.

   HTML needed: <section class="vault" id="vault">
     <div class="container"><header class="vault-header reveal">...</header></div>
     <div class="carousel-viewport" id="vaultViewport">
       <div class="carousel-track" id="vaultTrack" role="list">
         <div class="carousel-card" role="listitem" tabindex="0" aria-label="...">
           <div class="carousel-card-media" style="background: ...;">
             <img src="..." alt="..." loading="lazy" />
           </div>
           <div class="carousel-caption">
             <span class="carousel-caption-label">...</span>
             <span class="carousel-caption-title">...</span>
             <span class="carousel-caption-price">...</span>
           </div>
         </div>
         <!-- carousel-card--portrait / --square modifiers work here too -->
       </div>
       <div class="carousel-nav">
         <button class="carousel-btn" id="vaultPrev">&#8592;</button>
         <div class="carousel-dots" id="vaultDots"></div>
         <button class="carousel-btn" id="vaultNext">&#8594;</button>
       </div>
     </div>
   </section>

   NOTE: Vault items are NOT links (no checkout/payment flow on this
   site) so cards are plain divs with tabindex="0" instead of <a>
   tags — vault-carousel.js is written to match (no href-follow-
   through logic).
================================================================ */

.vault { background: var(--color-bg-alt); padding: var(--section-pad); scroll-margin-top: 32px; }
.vault-header { margin-bottom: 48px; }