/* The Vault — Design System v5 */
/* Quiet Luxury. Velocity family. Warm obsidian, sand, brass. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ── Core palette (Velocity-aligned) ── */
  --bg:      #0D0C09;
  --sand:    #DEC8B5;
  --brass:   #C49C7B;
  --dim:     #565250;
  --muted:   #252320;
  --border:  rgba(222,200,181,.07);
  --border2: rgba(222,200,181,.13);
  --ease:    cubic-bezier(0.16,1,0.3,1);
  --ease2:   cubic-bezier(0.77,0,0.175,1);
  --px:      clamp(1.5rem,5vw,5.5rem);

  /* ── Legacy aliases — preserved for existing pages ── */
  --obsidian:       #0D0C09;
  --deep-charcoal:  #121109;
  --graphite:       #1a1916;
  --graphite-light: #222019;
  --green:          #C49C7B;   /* brass */
  --green-light:    #DEC8B5;   /* sand */
  --green-deep:     #565250;   /* dim */
  --vellum:         #DEC8B5;
  --white:          #EFE6DA;
  --sage:           #C49C7B;
  --mint:           #DEC8B5;
  --teal:           #565250;
  --stone:          rgba(222,200,181,.6);
  --warm-grey:      rgba(222,200,181,.5);
  --forest:         #0D0C09;
  --forest-light:   #121109;
  --forest-deep:    #080806;
  --porcelain:      #EFE6DA;
  --charcoal:       #1a1916;

  /* ── Semantic ── */
  --text:         #DEC8B5;
  --body:         rgba(222,200,181,.62);
  --faint:        rgba(222,200,181,.06);
  --border-hover: rgba(196,156,123,.22);
  --serif:        'Instrument Serif', Georgia, serif;
  --sans:         'Inter', system-ui, sans-serif;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }
:focus-visible { outline:1px solid var(--brass); outline-offset:4px }

body {
  font-family:var(--sans);
  background:var(--bg);
  color:var(--sand);
  font-weight:300;
  line-height:1.7;
  font-size:16px;
  overflow-x:hidden;
}

a { color:inherit; text-decoration:none }
button { font-family:inherit; background:none; border:none; cursor:pointer }

h1,h2,h3,h4 {
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-.03em;
  line-height:1.1;
  color:var(--sand);
}

p { color:var(--body); max-width:600px }

/* ── Grain + vignette ── */
body::after {
  content:''; position:fixed; top:-50%; left:-50%; width:200%; height:200%;
  z-index:9000; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.87' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.04;
  animation:gr .5s steps(2) infinite;
}
body::before {
  content:''; position:fixed; inset:0; z-index:8998; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 50%, rgba(13,12,9,.5) 100%);
}
@keyframes gr {
  0%   { transform:translate(0,0) }
  25%  { transform:translate(-2%,-2%) }
  50%  { transform:translate(2%,1%) }
  75%  { transform:translate(-1%,3%) }
}

/* ── Custom cursor ring (hidden unless JS activates) ── */
.cursor {
  position:fixed; width:36px; height:36px;
  border:1px solid rgba(222,200,181,.2);
  border-radius:50%; pointer-events:none;
  z-index:8999; will-change:transform;
  transition:width .35s var(--ease), height .35s var(--ease), border-color .35s, background .35s;
  display:none;
}
.cursor.hover { width:52px; height:52px; border-color:var(--brass); background:rgba(196,156,123,.05) }
.cdot {
  position:fixed; width:4px; height:4px;
  background:var(--brass); border-radius:50%;
  pointer-events:none; z-index:8999; will-change:transform;
  display:none;
}

/* ── Header ── */
header {
  position:fixed;
  top:0; right:0; bottom:auto; left:0;
  inset:0 0 auto;
  z-index:100;
  padding:0 var(--px);
  height:64px;
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border-bottom:1px solid transparent;
  display:flex;
  justify-content:space-between;
  align-items:center;
  transition:background .5s, border-color .5s;
}
header.s {
  background:rgba(13,12,9,.92);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  border-bottom-color:var(--border);
}

.logo {
  font-family:var(--serif);
  font-size:1.05rem;
  font-weight:400;
  letter-spacing:-.02em;
  color:var(--sand);
}
.logo em { font-style:normal; color:var(--brass) }

nav { display:flex; gap:2.5rem; align-items:center }
nav a {
  position:relative;
  font-size:.67rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dim);
  transition:color .3s;
  font-family:var(--sans);
}
nav a:hover { color:var(--sand) }
nav a::after {
  content:''; position:absolute; bottom:-4px; left:0;
  width:100%; height:1px; background:var(--sand);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
nav a:hover::after { transform:scaleX(1) }

.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:4px }
.nav-toggle span { display:block; width:20px; height:1px; background:var(--sand); margin:5px 0; transition:all .3s var(--ease) }
.nav-toggle.open span:nth-child(1) { transform:rotate(45deg) translate(3px,4px) }
.nav-toggle.open span:nth-child(2) { opacity:0 }
.nav-toggle.open span:nth-child(3) { transform:rotate(-45deg) translate(3px,-4px) }

/* ── Footer ── */
footer {
  padding:clamp(2rem,3.5vw,3.5rem) var(--px);
  border-top:1px solid var(--border);
}
.footer-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
}
.footer-copy { font-size:.6rem; color:var(--dim); letter-spacing:.04em }
.footer-copy a { color:var(--dim); transition:color .25s }
.footer-copy a:hover { color:var(--sand) }
.footer-links { display:flex; gap:clamp(1.2rem,2vw,2rem); flex-wrap:wrap }
.footer-links a {
  font-size:.6rem; color:var(--dim); letter-spacing:.07em;
  transition:color .25s;
}
.footer-links a:hover { color:var(--sand) }
.velocity-credit { margin-left:8px; padding-left:8px; border-left:1px solid var(--border) }
.velocity-credit a { color:rgba(222,200,181,.18); transition:color .3s }
.velocity-credit a:hover { color:var(--dim) }

/* ── Buttons ── */
.btn {
  display:inline-block;
  font-family:var(--sans);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:13px 36px;
  border:1px solid var(--border2);
  color:var(--sand);
  background:transparent;
  cursor:pointer;
  transition:all .35s var(--ease);
}
.btn:hover { border-color:var(--brass); background:rgba(196,156,123,.06) }
.btn-accent { border-color:rgba(196,156,123,.3); background:rgba(196,156,123,.06) }
.btn-accent:hover { background:rgba(196,156,123,.14); border-color:var(--brass) }

/* ── Forms ── */
input,textarea,select {
  font-family:var(--sans);
  font-size:14px;
  font-weight:300;
  color:var(--sand);
  background:var(--deep-charcoal);
  border:1px solid var(--border);
  padding:12px 16px;
  outline:none;
  transition:border-color .3s;
  width:100%;
}
input:focus,textarea:focus { border-color:var(--brass) }
input::placeholder { color:var(--dim) }

/* ── Cards ── */
.card-surface {
  background:var(--deep-charcoal);
  border:1px solid var(--border);
  transition:border-color .35s var(--ease);
}
.card-surface:hover { border-color:var(--border-hover) }

/* ── Badges ── */
.badge {
  display:inline-block;
  font-family:var(--sans);
  font-size:.55rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:3px 8px;
  border:1px solid rgba(196,156,123,.3);
  color:var(--brass);
  background:rgba(196,156,123,.07);
  font-weight:400;
}
.badge-new { border-color:rgba(222,200,181,.15); color:var(--sand); background:rgba(222,200,181,.05) }

/* ── Auth Modal ── */
#auth-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center }
.modal-overlay { position:absolute; inset:0; background:rgba(0,0,0,.75) }
.modal-box {
  position:relative;
  background:var(--bg);
  border:1px solid var(--border2);
  padding:44px 36px;
  max-width:360px;
  width:90%;
}
.modal-close { position:absolute; top:14px; right:18px; background:none; border:none; font-size:1.3rem; color:var(--dim); cursor:pointer }
#auth-modal h2 { font-family:var(--serif); font-size:1.5rem; font-weight:400; margin-bottom:6px; letter-spacing:-.03em }
.modal-sub { font-size:.8rem; color:var(--dim); margin-bottom:20px }
#auth-form input { margin-bottom:10px }
.auth-submit {
  width:100%; padding:13px;
  background:rgba(196,156,123,.07);
  border:1px solid rgba(196,156,123,.25);
  color:var(--sand);
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; font-family:var(--sans);
  transition:all .3s;
}
.auth-submit:hover { background:rgba(196,156,123,.18) }
.auth-toggle { font-size:.8rem; color:var(--dim); text-align:center; margin-top:14px }
.auth-toggle a { color:var(--brass) }

/* ── Notification ── */
.notification {
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(16px);
  background:var(--graphite);
  border:1px solid var(--border2);
  color:var(--sand);
  padding:11px 28px;
  font-size:.78rem;
  font-weight:300;
  z-index:2000;
  opacity:0;
  transition:all .3s var(--ease);
}
.notification.show { opacity:1; transform:translateX(-50%) translateY(0) }

/* ── Newsletter ── */
.newsletter {
  padding:clamp(4rem,8vw,7rem) var(--px);
  border-top:1px solid var(--border);
  text-align:center;
}
.newsletter-inner { max-width:380px; margin:0 auto }
.newsletter h3 {
  font-family:var(--serif);
  font-size:clamp(1.2rem,2vw,1.5rem);
  font-weight:400;
  letter-spacing:-.03em;
  margin-bottom:8px;
}
.newsletter p { font-size:.8rem; color:var(--dim); margin:0 auto 24px; max-width:360px }
.newsletter-form { display:flex; gap:8px }
.newsletter-form input { flex:1 }
.newsletter-form button { flex-shrink:0; padding:12px 24px }

/* ── Legal pages ── */
.legal-page {
  padding:clamp(7rem,14vw,10rem) var(--px) clamp(4rem,8vw,7rem);
  max-width:680px;
  margin:0 auto;
}
.legal-page h1 {
  font-family:var(--serif);
  font-size:clamp(2rem,3vw,3rem);
  font-weight:400;
  letter-spacing:-.04em;
  margin-bottom:6px;
  color:var(--sand);
}
.legal-page .updated { font-size:.6rem; color:var(--dim); margin-bottom:3rem; letter-spacing:.08em; display:block }
.legal-page h2 {
  font-family:var(--serif);
  font-size:clamp(1rem,1.4vw,1.2rem);
  letter-spacing:-.02em;
  color:var(--sand);
  font-weight:400;
  margin-top:2.5rem;
  margin-bottom:.75rem;
}
.legal-page p,.legal-page li { font-size:.85rem; color:var(--body); line-height:1.85; margin-bottom:10px; max-width:100% }
.legal-page ul { list-style:none; padding-left:1rem }
.legal-page ul li { position:relative }
.legal-page ul li::before { content:''; position:absolute; left:-1rem; top:.65em; width:3px; height:3px; border-radius:50%; background:var(--brass) }
.legal-page a { color:var(--sand); border-bottom:1px solid var(--border2); padding-bottom:1px; transition:border-color .25s }
.legal-page a:hover { border-color:var(--brass) }

/* ── FAQ ── */
.faq-list { max-width:640px; margin:0 auto }
.faq-item { border-bottom:1px solid var(--border); padding:22px 0 }
.faq-item:first-child { border-top:1px solid var(--border) }
.faq-q {
  font-family:var(--serif);
  font-size:clamp(.95rem,1.2vw,1.1rem);
  font-weight:400;
  color:var(--sand);
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  letter-spacing:-.02em;
}
.faq-q::after { content:'+'; font-size:1.1rem; color:var(--dim); transition:transform .3s var(--ease); flex-shrink:0; margin-left:16px }
.faq-item.open .faq-q::after { transform:rotate(45deg) }
.faq-a { max-height:0; overflow:hidden; transition:max-height .4s ease }
.faq-item.open .faq-a { max-height:200px; padding-top:12px }
.faq-a p { font-size:.82rem; color:var(--dim); line-height:1.75; max-width:100% }

/* ── Responsive ── */
@media(max-width:768px){
  header { padding:0 1.5rem; height:56px }
  .nav-toggle { display:block }
  nav {
    position:fixed; top:56px; left:0; right:0;
    background:rgba(13,12,9,.97);
    -webkit-backdrop-filter:blur(20px);
    backdrop-filter:blur(20px);
    flex-direction:column; gap:0; padding:0;
    max-height:0; overflow:hidden;
    transition:max-height .35s ease;
    border-bottom:1px solid var(--border);
  }
  nav.open { max-height:300px }
  nav a { padding:16px 1.5rem; width:100%; border-bottom:1px solid var(--border); font-size:.65rem }
  nav a::after { display:none }
  footer { padding:1.5rem 1.5rem }
  .footer-inner { flex-direction:column; gap:10px; align-items:flex-start }
  .newsletter { padding:3rem 1.5rem }
  .newsletter-form { flex-direction:column }
}