/* THE VAULT — collect.quest design system.
   Governing drawing: docs/design/vault_site_redesign/Quest Website.dc.html
   Instrument Serif (display) · IBM Plex Sans (body) · IBM Plex Mono (labels)
   — self-hosted (founder ruling 2026-07-30): web-forever surface, no
   third-party font dependency. */

@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-serif-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-serif-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2')}

:root{
  --ink:#14161B;
  --panel:#171A20;
  --panel-2:#1A1D24;
  --panel-3:#1F2229;
  --black:#101216;
  --line:#24272F;
  --line-2:#2B2F38;
  --line-3:#3A3F49;
  --gold-dim:#8A6F3C;
  --gold:#b89355;
  --gold-bright:#D9B978;
  --gold-pale:#E8CFA0;
  --text:#E8E6E1;
  --text-2:#A8A6A0;
  --text-3:#9A9892;
  --text-4:#7E8189;
  --text-5:#6F737B;
  --pad-x:clamp(20px,5vw,56px);
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{
  background:var(--ink);color:var(--text);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;
}
.shell{max-width:1440px;margin:0 auto}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-pale);text-decoration:underline}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{max-width:100%}
button:focus-visible,input:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
::placeholder{color:var(--text-5)}
.serif{font-family:var(--serif);font-weight:400}
.mono{font-family:var(--mono)}

/* legal/document measure — the .wrap the document pages share */
.wrap{max-width:720px;margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}

/* ---------- eyebrows & display type ---------- */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--gold-dim);text-transform:uppercase}
.eyebrow-wide{letter-spacing:.22em}
h1.display{font-family:var(--serif);font-weight:400;font-size:clamp(46px,6.5vw,88px);line-height:1;letter-spacing:-.015em}
h1.display em,h2.section-title em{font-style:italic;color:var(--gold-bright)}
h2.section-title{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.8vw,52px);line-height:1.06}
p.body-lg{font-size:clamp(16px,1.4vw,19px);line-height:1.55;color:var(--text-2);text-wrap:pretty}
p.body{font-size:17px;line-height:1.6;color:var(--text-2);text-wrap:pretty}

/* ---------- nav ---------- */
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px var(--pad-x);border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--ink);z-index:10;flex-wrap:wrap;
}
.nav-brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none}
.nav-brand:hover{text-decoration:none;color:var(--text)}
.nav-seal{
  width:26px;height:26px;border:1px solid var(--gold);color:var(--gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:16px;
}
.nav-word{font-family:var(--serif);font-size:21px}
.nav-links{display:flex;gap:clamp(16px,3vw,32px);font-size:14px;color:var(--text-3)}
.nav-links a{color:var(--text-3);display:block}
.nav-links a:hover{color:var(--text);text-decoration:none}
.nav-links a.current{color:var(--text)}
.nav-links a.current::after{content:"";display:block;height:1px;background:var(--gold);margin-top:5px}

/* ---------- buttons ---------- */
.btn-solid{
  background:var(--gold);color:var(--ink);font-size:15px;font-weight:600;
  padding:14px 26px;border-radius:3px;display:inline-block;text-align:center;
  transition:background .15s ease;
}
.btn-solid:hover{background:var(--gold-bright);color:var(--ink);text-decoration:none}
.btn-gold{
  border:1px solid var(--gold);color:var(--gold-pale);font-size:15px;
  padding:14px 24px;border-radius:3px;display:inline-block;white-space:nowrap;
  transition:background .15s ease,color .15s ease;
}
.btn-gold:hover{background:var(--gold);color:var(--ink);text-decoration:none}
.btn-gold.small{font-size:13px;letter-spacing:.06em;padding:9px 18px}
.btn-quiet{
  border:1px solid var(--line-2);font-size:15px;color:var(--text-2);
  padding:14px 22px;border-radius:3px;display:inline-block;
  transition:border-color .15s ease;
}
.btn-quiet:hover{border-color:var(--gold);color:var(--text-2);text-decoration:none}

/* ---------- sections & grids ---------- */
.section{padding:88px var(--pad-x);border-top:1px solid var(--line)}
.section.tint{background:var(--panel)}
.section.dark{background:var(--black)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,4.5vw,64px);align-items:center}
.grid-2.w-heavy{grid-template-columns:1.05fr .95fr}
.grid-2.w-light{grid-template-columns:.9fr 1.1fr}

/* ---------- panels (the drawn app mocks) ---------- */
.panel{border:1px solid var(--line-2);border-radius:4px;background:var(--panel-2)}
.ph-shot{
  background:repeating-linear-gradient(135deg,#20242C 0 9px,#1A1D24 9px 18px);
  border:1px solid #272B34;display:flex;align-items:center;justify-content:center;
}
.ph-shot span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--text-5);padding:8px;text-align:center}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--text-3)}
.chips span{border:1px solid var(--line-2);padding:7px 11px;border-radius:2px}
.chips span.lit{border-color:var(--gold);color:var(--gold-pale)}

/* ---------- forms ---------- */
.v-form{display:flex;flex-direction:column;gap:12px}
.v-form input,.v-form textarea{
  background:var(--panel);border:1px solid var(--line-2);border-radius:3px;
  padding:15px 16px;color:var(--text);font-size:15px;font-family:var(--sans);width:100%;
}
.v-form textarea{resize:none}
.v-form input:focus,.v-form textarea:focus{border-color:var(--gold);outline:none}
.v-form .fine{font-size:13px;color:var(--text-5)}
.form-thanks{font-family:var(--serif);font-size:20px;color:var(--gold-pale);padding:14px 0}
.form-error{font-size:14px;color:var(--text-2);border-left:2px solid #C24B3A;padding-left:12px}

/* ---------- documents (legal pages) ---------- */
.page-head{padding:56px 0 12px}
.page-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.4vw,48px);line-height:1.1}
.page-head h1 em{font-style:italic;color:var(--gold-bright)}
.page-head p.lede{
  margin-top:18px;max-width:56ch;
  font-size:clamp(16px,1.4vw,18px);line-height:1.55;color:var(--text-2);text-wrap:pretty;
}
.docmeta{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-5);margin-top:16px;
}
.draft-banner{
  margin:40px auto 0;border:1px solid var(--line-2);border-radius:4px;
  background:rgba(184,147,85,.07);padding:16px 20px;
}
.draft-banner strong{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-bright);margin-bottom:6px;
}
.draft-banner span{font-size:13.5px;color:var(--text-3);line-height:1.6}
.prose{padding:8px 0 72px}
.prose h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.4vw,28px);
  margin:44px 0 12px;
}
.prose h3{
  font-family:var(--serif);font-weight:400;font-style:italic;font-size:18px;
  margin:26px 0 8px;color:var(--gold-pale);
}
.prose p{color:var(--text-2);font-size:16px;line-height:1.7;margin:0 0 14px}
.prose ul{color:var(--text-2);font-size:16px;line-height:1.7;margin:0 0 14px 22px}
.prose li{margin-bottom:8px}
.prose strong{color:var(--text);font-weight:600}
.prose .bracket{color:var(--gold-dim);font-style:italic}
.prose table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15px}
.doclist{list-style:none;margin:40px 0 80px;display:flex;flex-direction:column;gap:16px}
.doclist a{
  display:block;text-decoration:none;border:1px solid var(--line-2);border-radius:4px;
  padding:22px 24px;background:var(--panel);
  transition:border-color .15s ease,transform .15s ease;
}
.doclist a:hover{border-color:var(--gold);transform:translateY(-1px);text-decoration:none}
.doclist .doc-name{display:block;font-family:var(--serif);font-size:21px;color:var(--text)}
.doclist .doc-meta{
  display:block;margin-top:8px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-5);
}
.doclist .doc-meta .draft{color:var(--gold-dim)}

/* ---------- footer ---------- */
.footer{
  padding:44px var(--pad-x);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  font-size:13px;color:var(--text-5);
}
.footer-left{display:flex;align-items:center;gap:clamp(14px,2.5vw,28px);flex-wrap:wrap}
.footer .f-seal{font-family:var(--serif);font-size:18px;color:var(--gold-dim)}
.footer a{font-size:13px;color:var(--text-5)}
.footer a:hover{color:var(--gold-pale)}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .grid-2,.grid-2.w-heavy,.grid-2.w-light{grid-template-columns:1fr}
  .section{padding:64px var(--pad-x)}
  .grid-2 .visual-first{order:-1}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn-solid,.btn-gold,.btn-quiet{transition:none}
}