/* ============================================================
   VAULTCRAFTERS — Foundation
   Black is the substrate. Gold is the accent, never the field.
   ============================================================ */

:root {
  /* Substrate */
  --ink:        #000000;
  --ink-02:     #060606;
  --ink-04:     #0b0b0c;
  --ink-06:     #121213;
  --ink-10:     #1b1b1d;

  /* Metals — pulled from the mark */
  --gold:       #c6a15b;
  --gold-lit:   #e6c98f;
  --gold-deep:  #8f6f3c;
  --silver:     #8e8e90;
  --silver-dim: #5e5e60;

  /* Type */
  --bone:       #ede7dc;
  --bone-dim:   #c7c0b4;
  --bone-faint: #8e887d;

  /* Families */
  --serif: 'Cormorant Garamond', 'Didot', 'Times New Roman', serif;
  --sans:  'Jost', 'Futura', 'Avenir Next', -apple-system, sans-serif;
  --body-size: 17px;
  --body-line: 1.72;

  /* Motion — slow, weighted, expensive */
  --ease-vault: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-door:  cubic-bezier(0.65, 0, 0.35, 1);

  /* Rhythm */
  --gut: clamp(1.5rem, 4vw, 4rem);
  --max: 1440px;
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: var(--body-size);
  line-height: var(--body-line);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow-x: hidden; }

/* While the intro is running, the page does not scroll. */
body.is-sealed,
body.is-threshold { overflow: hidden; height: 100vh; }

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

/* --- Shared type treatments ------------------------------- */

.eyebrow,
.spec-eyebrow,
.cb-eyebrow,
.menu-kicker,
.threshold-kicker {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}

/* The hairline-and-diamond divider used throughout the menu */
.menu-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin: 1.6rem auto;
  max-width: 380px;
}
.menu-rule span {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
}
.menu-rule i {
  font-style: normal;
  color: var(--gold);
  font-size: 0.7rem;
  opacity: 0.95;
}
.menu-rule.slim { max-width: 240px; }

/* The VC crest, reused at several sizes */
.crest-mark { width: 100%; height: 100%; display: block; }
.crest-mark text {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 78px;
}
.crest-v { fill: var(--gold); }
.crest-c { fill: var(--silver-dim); }

/* Film grain — keeps large dark fields from banding */
.plate-grain,
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Focus — visible, but in the brand */
:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

::selection { background: var(--gold-deep); color: #000; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink-02); }
::-webkit-scrollbar-thumb { background: #2a2a2c; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }

/* Anyone who has asked for less motion gets the destination, not the journey. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}