.vault-main { width: min(1120px, calc(100% - 44px)); margin: 0 auto; padding: 54px 0 60px; }
.vault-heading { width: fit-content; max-width: 100%; margin-bottom: 30px; padding: 18px 24px; background: #100962; }
.vault-heading .eyebrow { color: #c9bdff; }
.vault-heading h1 { margin: 14px 0; font: 400 clamp(2.3rem, 7vw, 5rem)/1.15 var(--display); color: #e2ff79; text-shadow: 4px 4px 0 #9223bc; }
.vault-heading h1 span { color: #ff9de8; }
.vault-heading p { margin: 0; color: #f5ecff; line-height: 1.6; }
.vault-folders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 34px; }
.vault-folders > a { display: flex; align-items: center; gap: 18px; min-height: 82px; padding: 17px 20px; border: 2px solid #c8b9ff; color: #f5ecff; background: #261553; box-shadow: 5px 5px 0 #08011e; text-decoration: none; font-weight: 700; }
.vault-folders > a > span:not(.folder-icon) { min-width: 0; overflow-wrap: anywhere; }
.vault-folders small { display: block; margin-top: 5px; color: #d1c0f0; font-weight: 400; }
.vault-folders .icon { margin-left: auto; flex-shrink: 0; }
.folder-icon { position: relative; width: 38px; height: 28px; flex: 0 0 38px; border: 2px solid #322242; background: #e1ff79; box-shadow: 3px 3px 0 #020019; }
.folder-icon::before { content: ''; position: absolute; left: -2px; top: -10px; width: 19px; height: 9px; background: #e1ff79; border: 2px solid #322242; border-bottom: 0; }
.vault-directory { display: flex; gap: 12px; flex-wrap: wrap; padding: 12px 17px; margin-bottom: 18px; color: #d9caef; background: #160d37; border: 1px solid #8971b4; font: 400 .8rem/1.6 var(--pixel); overflow-wrap: anywhere; }
.vault-directory > span:last-child { margin-left: auto; }
.vault-projects { display: grid; gap: 36px; }
.archive-window { min-width: 0; border: 3px solid #ded0ff; box-shadow: 8px 8px 0 #08011e; scroll-margin-top: 28px; background: #251446; }
.archive-bar { display: flex; justify-content: space-between; gap: 15px; padding: 11px 15px; background: #6135a9; border-bottom: 2px solid #ddd0ff; color: #fff; font: 400 .8rem/1.5 var(--pixel); overflow-wrap: anywhere; }
.archive-bar > span:last-child { white-space: nowrap; }
.archive-body { display: grid; grid-template-columns: minmax(180px, 300px) minmax(0, 1fr); gap: clamp(24px, 5vw, 56px); padding: clamp(24px, 4vw, 44px); align-items: center; }
.archive-art { position: relative; width: 100%; max-width: 300px; }
.archive-art img { display: block; width: 100%; height: auto; border: 3px solid #ede6ff; box-shadow: 8px 8px 0 #10071d; }
.archive-index { position: absolute; top: -13px; left: -13px; z-index: 1; padding: 8px; color: #24163c; background: #e2ff79; border: 2px solid #24163c; font: 400 .75rem/1 var(--pixel); }
.archive-path { color: #d1c0f0; font: 400 .75rem/1.7 var(--pixel); margin: 0 0 22px; overflow-wrap: anywhere; }
.archive-copy .eyebrow { color: #d1c0f0; }
.archive-copy h2 { margin: 12px 0; color: #e2ff79; font: 400 clamp(1.65rem, 3.5vw, 2.8rem)/1.2 var(--display); overflow-wrap: anywhere; }
.archive-artist { margin: 0 0 25px; color: #fff; }
.archive-links { display: flex; flex-direction: column; align-items: start; gap: 14px; }
.archive-links a { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 48px; padding: 11px 16px; border: 2px solid #f8f4ff; box-shadow: 4px 4px 0 #090019; background: #e2ff79; color: #211630; font-weight: 700; text-decoration: none; }
.archive-links .icon { flex-shrink: 0; }
.archive-links .archive-secondary { background: #f6a7df; }
.archive-status { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; padding: 12px 18px; background: #160c2f; border-top: 1px solid #8c77ad; color: #e1d6f2; font-size: .85rem; }
.archive-status > span { display: flex; align-items: center; gap: 10px; }
.archive-status i { width: 8px; height: 8px; background: #dcff79; }
.archive-status a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #e1d6f2; }
.archive-everything-is-okay { background: #ece8f4; border-color: #f5edff; }
.archive-everything-is-okay .archive-bar { background: #532790; }
.archive-everything-is-okay .archive-copy h2 { color: #4b2177; }
.archive-everything-is-okay .archive-path, .archive-everything-is-okay .eyebrow, .archive-everything-is-okay .archive-artist { color: #45305c; }
.archive-everything-is-okay .archive-index { background: #f6a7df; }
.vault-exit { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 35px; padding: 15px 22px; background: #160c2f; border: 1px solid #8c77ad; }
.vault-exit a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #f5ecff; }
.vault-main a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 7px #321152; }
@media (max-width: 650px) {
  .vault-main { width: calc(100% - 32px); padding-top: 26px; }
  .vault-heading { padding: 12px 10px; }
  .vault-folders { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .archive-body { grid-template-columns: minmax(0, 1fr); padding: 25px 20px; gap: 30px; }
  .archive-art { justify-self: center; }
  .archive-copy { min-width: 0; }
  .archive-status { padding: 12px 15px; }
  .vault-directory { font-size: .7rem; gap: 8px; }
}