/* Vital Health · vtlhlth.com landing v1
   Brand v2 "Graphite & Sun, Annotated" · _shared/brand/guidelines-v2/DESIGN.md
   Pure static, type-and-color only (no imagery). White space leads;
   gray does structure; yellow points, once per page. */

/* ---- Tokens ------------------------------------------------------------ */
:root {
  /* structural grays */
  --paper:      #FCFCFA;
  --paper-warm: #F8F7F3;
  --g2:         #E4E4E0;
  --g3:         #C8C8C2;
  --g4:         #72726B;
  --g5:         #56564F;
  --ink:        #26261F;

  /* accent · locked */
  --sol:    #FFD23F;
  --butter: #FFE89C;

  /* functional (focus only on this editorial surface) */
  --focus:  #4A6FF5;

  /* semantic */
  --bg:      var(--paper);
  --bg-warm: var(--paper-warm);
  --text:    var(--ink);
  --text-2:  var(--g5);
  --text-3:  var(--g4);
  --line:    var(--g2);

  /* type */
  --f-display: "Newsreader", Georgia, "Times New Roman", serif;
  --f-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mark:    "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* spacing scale (px): 4 8 12 18 26 34 56 88 120 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 18px; --s5: 26px;
  --s6: 34px; --s7: 56px; --s8: 88px; --s9: 120px;

  --measure: 40em;
  --maxw: 1180px;
  --margin: 48px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #1F2826;
    --bg-warm: #243330;
    --text:    #FCFCFA;
    --text-2:  #D7D7D1;
    --text-3:  #A9AAA3;
    --line:    rgba(252, 252, 250, 0.14);
    --focus:   #8AA0FF;
  }
}

/* ---- Reset / base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2 { margin: 0; font-weight: 400; }
p { margin: 0; }

::selection { background: var(--butter); color: var(--ink); }

/* focus · the sanctioned functional-blue exception (DESIGN.md §6) */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  font-family: var(--f-body);
  font-size: 13px;
  z-index: 10;
}
.skip-link:focus { left: var(--s4); top: var(--s4); }

/* ---- Layout ------------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--margin);
}

.rule {
  border: 0;
  height: 1px;
}
.rule::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--line);
}

/* ---- Masthead ---------------------------------------------------------- */
.masthead {
  border-bottom: 1px solid var(--line);
}
.masthead__inner {
  display: flex;
  align-items: center;
  min-height: 68px;
  padding-block: var(--s3);
}
.lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  color: var(--text);
}
.lockup__ring { display: block; flex: none; }

.wordmark {
  font-family: var(--f-mark);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 15px;
  color: var(--text);
  white-space: nowrap;
}
.wordmark--sm { font-size: 13px; letter-spacing: 0.16em; }

/* ---- Hero -------------------------------------------------------------- */
.hero {
  padding-top: var(--s8);
  padding-bottom: var(--s7);
}
.hero__title {
  font-family: var(--f-display);
  font-weight: 340;
  font-size: clamp(40px, 7vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  max-width: 15ch;
  text-wrap: balance;
}
.hero__sub {
  margin-top: var(--s5);
  max-width: var(--measure);
  font-size: clamp(18px, 2.4vw, 21px);
  line-height: 1.4;
  color: var(--text-2);
  font-family: var(--f-display);
  font-weight: 400;
}

/* the single Sol mark on the page · a highlighter underline, not a fill */
.mark-sol {
  position: relative;
  white-space: nowrap;
}
.mark-sol::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: 0.06em;
  height: 0.14em;
  background: var(--sol);
  border-radius: 1px;
  z-index: -1;
}

/* ---- Sections ---------------------------------------------------------- */
.section {
  padding-block: var(--s7);
}
.eyebrow {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--s5);
}
.statement {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 33px);
  line-height: 1.28;
  letter-spacing: -0.005em;
  max-width: 22ch;
  color: var(--text);
  text-wrap: pretty;
}
.statement--do { max-width: 26ch; }

/* Beliefs · 2x2 on desktop, single column on mobile */
.beliefs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s7) var(--s7);
}
.belief {
  max-width: var(--measure);
}
.belief__num {
  display: block;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-bottom: var(--s3);
}
.belief__head {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(21px, 2.6vw, 25px);
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--text);
}
.belief__body {
  margin-top: var(--s3);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-2);
}

/* ---- Footer ------------------------------------------------------------ */
.footer {
  border-top: 1px solid var(--line);
  margin-top: var(--s7);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s5);
  padding-block: var(--s6);
}
.footer__meta {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
.footer__contact,
.footer__legal {
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-3);
}
/* footer contact link · Links spec DESIGN.md §6 (ink text, g3 underline; hover underline turns Sol) */
.footer__contact a {
  color: var(--text-2);
  text-decoration: underline;
  text-decoration-color: var(--g3);
  text-underline-offset: 3px;
}
.footer__contact a:hover {
  text-decoration-color: var(--sol);
  text-decoration-thickness: 2px;
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 720px) {
  :root { --margin: 22px; }
  .hero { padding-top: var(--s7); }
  .beliefs { grid-template-columns: 1fr; gap: var(--s6); }
  .masthead__inner { min-height: 60px; }
}

/* ---- Motion (arrives already drawn unless motion is welcome) ----------- */
@media (prefers-reduced-motion: no-preference) {
  .hero__title,
  .hero__sub {
    animation: rise 620ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .hero__sub { animation-delay: 90ms; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}