/* ═══════════════════════════════════════════════
   VERSECITY — Project Vault (Archived / Discontinued)
   Matches main site: white luxury · deep navy
   ═══════════════════════════════════════════════ */
:root {
    --white:        #FFFFFF;
    --off-white:    #F8F8F6;
    --paper:        #F2F1EE;
    --navy:         #0D1F3C;
    --navy-mid:     #1A3460;
    --navy-light:   rgba(13,31,60,0.08);
    --navy-faint:   rgba(13,31,60,0.04);
    --ink:          #0A0A0A;
    --ink-mid:      #3A3A3A;
    --muted:        #8A8A88;
    --border:       rgba(13,31,60,0.10);
    --border-soft:  rgba(13,31,60,0.06);
    --red:          #A03030;
    --red-bg:       rgba(160,48,48,0.08);
    --amber:        #A06010;
    --amber-bg:     rgba(160,96,16,0.08);
    --gold:         #B8962E;
    --gold-light:   rgba(184,150,46,0.10);

    --font-display: 'Cormorant Garamond', serif;
    --font-body:    'Outfit', sans-serif;
    --font-mono:    'DM Mono', monospace;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
    font-family: var(--font-body);
    background: var(--white);
    color: var(--ink);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

body::after {
    content:''; position:fixed; inset:0;
    pointer-events:none; z-index:9999; opacity:0.018;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── HEADER ── */
.site-header {
    position: sticky; top:0; width:100%; z-index:500;
    background: var(--white);
    border-bottom: 1px solid var(--border);
}
.site-header-inner {
    max-width:1200px; margin:0 auto;
    padding:0 2.5rem; height:62px;
    display:grid; grid-template-columns:1fr auto 1fr;
    align-items:center;
}

/* Left — back link */
.header-left { display:flex; align-items:center; }
.back-link {
    display:inline-flex; align-items:center; gap:10px;
    text-decoration:none; color:var(--muted);
    transition: color 0.2s;
}
.back-link:hover { color:var(--navy); }
.back-link:hover .back-arrow { background:var(--navy); color:white; }
.back-arrow {
    width:28px; height:28px; border-radius:50%;
    border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-size:0.65rem; color:var(--muted);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    flex-shrink:0;
}
.back-text {
    font-family: var(--font-mono); font-size:0.7rem;
    letter-spacing:0.5px; font-weight:500;
}

/* Center — page title */
.header-center { display:flex; justify-content:center; align-items:center; }
.header-title {
    font-family: var(--font-display); font-size:1.1rem;
    font-weight:700; color:var(--ink); letter-spacing:-0.3px;
}

/* Right — archive tag */
.header-right { display:flex; justify-content:flex-end; align-items:center; }
.header-tag {
    font-family: var(--font-mono); font-size:0.62rem;
    letter-spacing:2px; text-transform:uppercase;
    color:var(--navy); background:var(--navy-faint);
    border:1px solid var(--border); padding:0.3rem 0.85rem;
    border-radius:2px;
}

@media (max-width:600px) {
    .header-center, .header-right { display:none; }
    .site-header-inner { grid-template-columns:1fr; }
}

/* ── VAULT HERO ── */
.vault-hero {
    padding: 4rem 2.5rem 3rem;
    background: var(--off-white);
    border-bottom: 1px solid var(--border);
}
.vault-hero-inner {
    max-width:1200px; margin:0 auto;
    display:grid; grid-template-columns:1fr auto;
    align-items:flex-end; gap:3rem;
}
.vault-eyebrow {
    display:inline-flex; align-items:center; gap:8px;
    font-family: var(--font-mono); font-size:0.68rem;
    letter-spacing:2px; text-transform:uppercase;
    color: var(--navy); margin-bottom:1rem;
}
.vault-eyebrow::before { content:''; width:22px; height:1px; background:var(--navy); }
.vault-title {
    font-family: var(--font-display);
    font-size: clamp(3rem,6vw,5.5rem);
    font-weight:700; letter-spacing:-2px; line-height:0.95;
    color: var(--ink);
}
.vault-title em { font-style:italic; color:var(--navy); }
.vault-sub {
    font-family: var(--font-mono); font-size:0.75rem;
    color: var(--muted); margin-top:0.8rem; letter-spacing:0.3px;
}
.vault-stats { display:flex; gap:2.5rem; align-items:flex-end; }
.vstat { text-align:right; }
.vstat-num {
    font-family: var(--font-display); font-size:2.5rem;
    font-weight:700; color:var(--ink); line-height:1;
}
.vstat-label {
    font-family: var(--font-mono); font-size:0.62rem;
    color:var(--muted); text-transform:uppercase;
    letter-spacing:1.5px; margin-top:4px;
}

/* ── FILTERS ── */
.filters-bar {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 0.85rem 2.5rem;
    position: sticky; top:66px; z-index:400;
}
.filters-inner {
    max-width:1200px; margin:0 auto;
    display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.filters-label {
    font-family: var(--font-mono); font-size:0.62rem;
    text-transform:uppercase; letter-spacing:2px;
    color:var(--muted); margin-right:4px; flex-shrink:0;
}
.fbtn {
    font-family: var(--font-mono); font-size:0.7rem;
    padding:5px 13px; border-radius:3px;
    border:1px solid var(--border);
    background:transparent; color:var(--muted);
    cursor:pointer; transition:all 0.15s; letter-spacing:0.3px;
}
.fbtn:hover { background:var(--off-white); color:var(--ink); border-color:var(--border); }
.fbtn.on { background:var(--navy); color:white; border-color:var(--navy); }

/* ── MAIN ── */
.vault-main {
    max-width:1200px; margin:0 auto;
    padding: 3rem 2.5rem 6rem;
    display:flex; flex-direction:column; gap:4rem;
}

/* ── SECTION ── */
.vsection-head {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:1.4rem; padding-bottom:1rem;
    border-bottom:1px solid var(--border);
}
.vsection-title-wrap { display:flex; align-items:center; gap:10px; }
.vsection-icon {
    width:32px; height:32px; border-radius:6px;
    display:flex; align-items:center; justify-content:center; font-size:0.85rem;
}
.vsection-icon.disc  { background:var(--amber-bg); color:var(--amber); }
.vsection-icon.arch  { background:var(--navy-faint); color:var(--navy); }
.vsection-title {
    font-family: var(--font-display); font-size:1.5rem;
    font-weight:700; color:var(--ink); letter-spacing:-0.3px;
}
.vsection-count {
    font-family: var(--font-mono); font-size:0.65rem;
    color:var(--muted); background:var(--off-white);
    border:1px solid var(--border); border-radius:99px; padding:3px 12px;
}

/* ── CARDS GRID ── */
.cards-grid {
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap:1px; background:var(--border);
    border:1px solid var(--border); border-radius:6px; overflow:hidden;
}

.app-card {
    background: var(--white); padding:1.6rem 1.8rem;
    display:flex; flex-direction:column; gap:0.8rem;
    transition:background 0.2s; position:relative;
}
.app-card::before {
    content:''; position:absolute; top:0; left:0;
    width:3px; height:100%; opacity:0; transition:opacity 0.25s;
}
.app-card.disc::before { background:var(--amber); }
.app-card.arch::before { background:var(--navy); }
.app-card:hover { background:var(--off-white); }
.app-card:hover::before { opacity:1; }

.card-top { display:flex; align-items:flex-start; gap:12px; }
.card-logo {
    width:46px; height:46px; border-radius:10px;
    border:1px solid var(--border); overflow:hidden; flex-shrink:0;
    background:var(--paper); display:flex; align-items:center; justify-content:center;
}
.card-logo img { width:100%; height:100%; object-fit:cover; display:block; }
.card-logo-fallback {
    font-family: var(--font-display); font-weight:700;
    font-size:1.1rem; color:var(--muted);
}
.card-title-area { flex:1; min-width:0; }
.card-name {
    font-family: var(--font-display); font-size:1.15rem;
    font-weight:700; color:var(--ink); line-height:1.2;
    letter-spacing:-0.2px; margin-bottom:5px;
}
.card-badges { display:flex; flex-wrap:wrap; gap:4px; }

.badge {
    font-family: var(--font-mono); font-size:0.6rem;
    padding:2px 8px; border-radius:2px; letter-spacing:0.5px; font-weight:500;
}
.badge.discontinued { background:var(--amber-bg); color:var(--amber); border:1px solid rgba(160,96,16,0.2); }
.badge.archived     { background:var(--navy-faint); color:var(--navy); border:1px solid rgba(13,31,60,0.15); }
.badge.superseded   { background:var(--gold-light); color:var(--gold); border:1px solid rgba(184,150,46,0.25); }
.badge.prototype    { background:var(--off-white); color:var(--muted); border:1px solid var(--border); }

.card-desc { font-size:0.84rem; line-height:1.75; color:var(--muted); }

.card-meta {
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:6px; padding-top:0.4rem;
    border-top:1px solid var(--border-soft);
}
.card-end-date {
    font-family: var(--font-mono); font-size:0.65rem; color:var(--muted);
    display:flex; align-items:center; gap:5px;
}
.card-end-date i { font-size:0.55rem; opacity:0.6; }

/* ── EMPTY STATE ── */
.empty-state {
    padding:3.5rem 2rem; text-align:center;
    font-family: var(--font-mono); font-size:0.75rem;
    color:var(--muted); border:1px dashed var(--border);
    border-radius:6px; letter-spacing:0.5px;
}

/* ── RESPONSIVE ── */
@media (max-width:768px) {
    .vault-hero-inner { grid-template-columns:1fr; gap:2rem; }
    .vault-stats { justify-content:flex-start; }
    .vstat { text-align:left; }
    .cards-grid { grid-template-columns:1fr; }
    .vault-main { padding:2.5rem 1.5rem 4rem; }
    .vault-hero { padding:3rem 1.5rem 2rem; }
    .filters-bar { padding:0.75rem 1.5rem; }
    .site-header-inner { padding:0 1.5rem; }
}

.hidden { display:none !important; }