/* Vision Acquisitions Group */

:root{
  color-scheme: light only;
  --paper:#EFEFEA;
  --paper-warm:#E5E5DD;
  --ink:#1C1D1A;
  --ink-soft:#5A5C56;
  --rule:#CFCFC6;
  /* Sampled from the solid interior of the logo mark. The accent is the brand
     navy so the page and the seal read as one thing. Cool navy on warm paper. */
  --seal:#0E374F;

  --display:'Spectral',Georgia,serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --measure:34rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.75;
}

/* skip link */
.skip{
  position:absolute;left:-9999px;
  background:var(--ink);color:var(--paper);
  padding:.6rem 1rem;z-index:10;
}
.skip:focus{left:1rem;top:1rem}

/* masthead */
.masthead{padding:2.5rem 2rem 0;max-width:60rem;margin:0 auto;text-align:center}
.wordmark{
  font-family:var(--display);font-weight:400;font-size:1.0625rem;
  letter-spacing:.24em;text-transform:uppercase;margin:0 0 .35rem;
}
/* Mark and name are one link, stacked, so there is only one home target.
   Block-level flex, not inline-flex: inline-flex sizes to max-content and the
   letterspaced name then overflows instead of wrapping at 320px. */
.wordmark a{
  display:flex;flex-direction:column;align-items:center;gap:.85rem;
  color:inherit;text-decoration:none;
}
.mark{width:5.5rem;height:auto}
.locale{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:.875rem;color:var(--ink-soft);margin:0 0 2rem;
}
.nav{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:0 2.25rem;list-style:none;margin:0;padding:1.25rem 0 0;
  border-top:1px solid var(--rule);
}
.nav a{
  font-family:var(--display);font-size:.9375rem;
  color:var(--ink-soft);text-decoration:none;
  display:inline-block;padding:.2rem 0 .45rem;
  border-bottom:1px solid transparent;
}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--seal)}

/* sheet */
.sheet{max-width:var(--measure);margin:0 auto;padding:4.5rem 1.75rem 6rem}

/* type */
.eyebrow{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:1rem;color:var(--seal);margin:0 0 1.25rem;
}
h1{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2rem,5vw,2.875rem);line-height:1.2;
  letter-spacing:-.014em;margin:0 0 1.75rem;
}
h2{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:1.3125rem;letter-spacing:-.005em;color:var(--ink);
  margin:3.5rem 0 1.25rem;
}
h2::before{
  content:"";display:block;width:2.25rem;
  border-top:1px solid var(--seal);margin-bottom:1.5rem;
}
h3{font-family:var(--display);font-weight:500;font-size:1.125rem;margin:2.25rem 0 .4rem}
p{margin:0 0 1.3rem}
.lede{font-family:var(--display);font-weight:300;font-size:1.3125rem;line-height:1.62}
.muted{color:var(--ink-soft);font-size:.9375rem}
a.inline{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--seal)}
a.inline:hover{color:var(--seal)}

/* lists */
.plain{margin:0 0 1.3rem;padding-left:1.15rem}
.plain li{margin-bottom:.6rem}
.plain li::marker{color:var(--seal)}

/* steps */
.steps{list-style:none;margin:0;padding:0}
.steps li{padding:0 0 2.25rem}
.steps li:last-child{padding-bottom:0}
.steps h3{margin:0 0 .4rem}
.steps h3 em{font-style:italic;font-weight:300;color:var(--seal);margin-right:.5rem}
.steps p{margin:0 0 .5rem}
.steps .when{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:.9375rem;color:var(--ink-soft);
}

/* notice */
.notice{background:var(--paper-warm);padding:1.75rem 1.75rem 1.5rem;margin:2.25rem 0}
.notice p:last-child,.notice ul:last-child{margin-bottom:0}
.notice p{font-size:1rem}

/* form */
.form{margin-top:1.75rem}
.field{margin-bottom:1.4rem}
.field label{
  display:block;font-family:var(--display);font-style:italic;font-weight:300;
  font-size:1rem;color:var(--ink-soft);margin-bottom:.45rem;
}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:1rem;color:var(--ink);
  background:#F8F8F4;border:0;border-bottom:1px solid var(--rule);
  border-radius:0;padding:.55rem .1rem;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-bottom-color:var(--seal);background:#FCFCF8;
}
.submit{
  font-family:var(--display);font-size:1rem;letter-spacing:.02em;
  background:var(--ink);color:var(--paper);border:0;
  padding:.8rem 2.25rem;cursor:pointer;
}
.submit:hover{background:var(--seal)}
.consent{font-size:.875rem;color:var(--ink-soft);margin-top:1.4rem}

/* legal pages: tighter, longer measure */
.legal{--measure:40rem}
.legal h2{font-size:1.1875rem;margin-top:2.75rem}
.legal p,.legal li{font-size:.9375rem;line-height:1.7}
.legal .updated{
  font-family:var(--display);font-style:italic;font-weight:300;
  color:var(--ink-soft);font-size:.9375rem;
}

/* footer */
.foot{
  max-width:var(--measure);margin:0 auto;
  padding:2rem 1.75rem 3.5rem;border-top:1px solid var(--rule);
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:.875rem;color:var(--ink-soft);text-align:center;
}
.foot p{margin:0 0 .4rem}
.foot-legal{margin-top:.9rem}
.foot a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
.foot a:hover{color:var(--seal)}

/* placeholders: delete this rule before launch */
.todo{
  background:#FBF0CC;border-bottom:1px solid #C9A227;
  font-family:var(--body);font-size:.9em;padding:.05em .3em;
}

:focus-visible{outline:2px solid var(--seal);outline-offset:2px}

@media (max-width:40rem){
  .masthead{padding:2rem 1.25rem 0}
  .sheet{padding:3rem 1.25rem 4rem}
  .nav{gap:0 1.5rem}
  .mark{width:3.75rem}
  /* Keeps the name to two lines at 320px instead of three. */
  .wordmark{font-size:1rem;letter-spacing:.17em}
}
@media (prefers-reduced-motion:no-preference){
  .eyebrow{animation:rise .55s ease both}
  h1{animation:rise .55s .07s ease both}
  @keyframes rise{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:none}}
}

/* honeypot: hidden from people, visible to bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{font-size:.9375rem;color:var(--seal);margin-top:.9rem;min-height:1.4em}