/* Reset & Base matching About page */
      body {
          background-color: black;
          color: white;
          overflow-x: hidden;
          font-family: sans-serif;
          margin: 0;
      }

      *, *::before, *::after { box-sizing: border-box; }

      /* Typography */
      .font-agipo { font-family: 'Agipo Bold Condensed', sans-serif; font-weight: 700; }
      
      .hero-title {
        font-family: 'Agipo Bold Condensed', sans-serif;
        font-size: 15vw; /* Large impact like About page */
        line-height: 0.85;
        text-transform: uppercase;
        letter-spacing: -0.02em;
        margin: 0;
      }
      @media (min-width: 768px) { .hero-title { font-size: 12vw; } }

      .hero-desc {
        font-size: 1.125rem;
        line-height: 1.6;
        opacity: 0.8;
        max-width: 600px;
        font-weight: 300;
        margin-top: 0.5rem;
      }
      @media (min-width: 768px) { .hero-desc { font-size: 1.35rem; } }

      /* Layout Utilities */
      .container {
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
        padding-left: 20px;
        padding-right: 20px;
      }
      @media (min-width: 768px) {
        .container { padding-left: 40px; padding-right: 40px; }
      }
      
      .section-padding { padding-top: 120px; padding-bottom: 80px; }
      @media (min-width: 768px) { .section-padding { padding-top: 160px; padding-bottom: 120px; } }

      /* Ensure custom elements behave as blocks */
      site-header, vault-header, vault-filter-bar, vault-grid, vault-cta { display: block; }

      /* Vault Hero Specifics */
      .vault-hero { 
        padding-top: 20px; 
        padding-bottom: 0px; 
      }
      @media (min-width: 768px) { 
        .vault-hero { padding-top: 40px; padding-bottom: 10px; } 
      }

      /* Filter Bar - Clean Design */
      .vault-filter-section { 
        padding-bottom: 0.5rem; 
        border-bottom: 1px solid rgba(255,255,255,0.1); 
        margin-bottom: 1.5rem;
      }
      
      .vault-filter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
      .vault-filter-label { 
        font-family: 'Agipo Bold Condensed', sans-serif;
        font-size: 1.5rem; 
        text-transform: uppercase; 
        color: white; 
        margin: 0; 
      }

      .vault-filter-list { display: flex; flex-wrap: wrap; gap: 0.75rem; }
      
      .vault-filter-btn { 
        padding: 0.6rem 1.25rem; 
        border-radius: 9999px; 
        border: 1px solid rgba(255,255,255,0.2); 
        font-size: 0.875rem; 
        text-transform: uppercase; 
        letter-spacing: 0.05em; 
        font-weight: 600; 
        color: white; 
        background: transparent; 
        transition: all 0.2s; 
        cursor: pointer; 
      }
      .vault-filter-btn:hover { 
        background-color: white; 
        color: black; 
        border-color: white; 
      }
      .vault-filter-btn.active { 
        background-color: #DEFC52; 
        color: black; 
        border-color: #DEFC52; 
      }

      /* Grid */
      .vault-grid { 
        display: grid; 
        grid-template-columns: 1fr; 
        gap: 1.5rem; 
        padding-bottom: 8rem;
      }
      @media (min-width: 768px) { .vault-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
      @media (min-width: 1024px) { .vault-grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }

      /* Card - Redesigned to match About page */
      .vault-card {
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 16px;
        padding: 32px;
        background: rgba(255, 255, 255, 0.03);
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
        height: 100%;
        position: relative;
        text-decoration: none;
      }
      .vault-card:hover {
        border-color: #fff;
        background: rgba(255, 255, 255, 0.08);
        transform: translateY(-4px);
      }

      .vault-card__header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 1.5rem;
      }

      .vault-card__badge {
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.2);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: rgba(255,255,255,0.7);
      }

      .vault-card__title {
        font-family: 'Agipo Bold Condensed', sans-serif;
        font-size: 2rem;
        text-transform: uppercase;
        margin: 0 0 1rem 0;
        line-height: 1;
        color: white;
      }

      .vault-card__desc {
        font-size: 1rem;
        line-height: 1.5;
        opacity: 0.7;
        margin: 0 0 1.5rem 0;
        flex-grow: 1;
      }

      .vault-card__tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: auto;
      }

      .vault-card__tag {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 4px 8px;
        background: rgba(255,255,255,0.1);
        border-radius: 4px;
        color: rgba(255,255,255,0.8);
      }

      .vault-card__featured { 
        position: absolute; 
        top: 1.5rem; 
        right: 1.5rem; 
        display: inline-flex; 
        align-items: center; 
        padding: 4px 10px; 
        border-radius: 999px; 
        background-color: #DEFC52; 
        font-size: 10px; 
        font-weight: 700; 
        text-transform: uppercase; 
        letter-spacing: 0.1em; 
        color: black; 
      }
      
      /* Hide elements not needed */
      .vault-card__visual, .vault-card__meta { display: none; }

      /* Cards hidden by the category filter */
      vault-card[hidden] { display: none; }

      /* CTA Section - matches About page pattern, in the vault's lime accent */
      .vault-cta-section {
        background-color: #DEFC52;
        color: #000;
        text-align: center;
        padding: 100px 20px;
      }

      .vault-cta-title {
        font-family: 'Agipo Bold Condensed', sans-serif;
        font-size: 3rem;
        line-height: 0.9;
        margin: 0 0 24px 0;
        text-transform: uppercase;
      }
      @media (min-width: 768px) { .vault-cta-title { font-size: 5rem; } }

      .vault-cta-desc {
        font-size: 1.125rem;
        line-height: 1.6;
        max-width: 560px;
        margin: 0 auto 40px auto;
        opacity: 0.8;
      }

      .vault-cta-btn {
        display: inline-block;
        background: #000;
        color: #fff;
        padding: 18px 40px;
        border-radius: 999px;
        font-size: 1.125rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-decoration: none;
        border: 2px solid #000;
        transition: all 0.3s ease;
      }
      .vault-cta-btn:hover {
        background: transparent;
        color: #000;
        transform: scale(1.05);
      }

/* --- Category hub pages (generated by scripts/build-vault.mjs) --- */

/* Filter controls are anchors now (crawlable links to each hub), so they need
   the button reset that <button> gave for free. */
a.vault-filter-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.vault-eyebrow {
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 0.75rem 0;
}
.vault-eyebrow a { color: inherit; text-decoration: none; }
.vault-eyebrow a:hover { color: #DEFC52; }

.vault-count {
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 1.25rem 0 0 0;
}

/* Hub heroes carry a sentence of intro, so the huge homepage scale is too big. */
.template-vault-hub .hero-title { font-size: 11vw; }
@media (min-width: 768px) { .template-vault-hub .hero-title { font-size: 7rem; } }