/* Wovoka Advisory — v2
   Spectral for authority, Inter for clarity. Both already the site's equity,
   both free, no Adobe dependency. Palette is the forest green the brand
   already owns, disciplined down to three greens and one warm accent. */

:root {
  --ink:        #12211a;
  --ink-soft:   #3d5147;
  --ink-mute:   #6b7f74;
  --forest:     #14402c;
  --forest-mid: #1d5c3e;
  --forest-lo:  #eaf1ec;
  --clay:       #b4552d;
  --paper:      #fbfaf7;
  --paper-warm: #f4f1ea;
  --line:       #dfe4de;
  --measure:    68ch;
  --pad:        clamp(1.25rem, 5vw, 5rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 clamp(1rem, 0.96rem + 0.2vw, 1.0625rem)/1.65 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: Spectral, Georgia, "Times New Roman", serif;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 1.5rem + 3.6vw, 4.25rem); }
h2 { font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.85rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); }

p { margin: 0 0 1.15em; max-width: var(--measure); text-wrap: pretty; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(3.5rem, 7vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section--dark { background: var(--forest); color: #eef4ef; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--warm { background: var(--paper-warm); }

.eyebrow {
  font: 500 0.75rem/1 "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 1.1rem;
}
.section--dark .eyebrow { color: #8fb8a1; }

.lede { font-size: clamp(1.1rem, 1rem + 0.55vw, 1.35rem); line-height: 1.55; color: var(--ink-soft); }
.section--dark .lede { color: #cfe0d5; }

/* ---------- nav ----------
   Denise's logo is a JPG on white, so the bar is solid white rather than the
   page's warm paper - otherwise the mark sits in a visible white rectangle. */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.nav__in { display: flex; align-items: center; gap: 2rem; min-height: 72px; }
.nav__brand { display: block; line-height: 0; }
.nav__brand img { width: clamp(132px, 15vw, 168px); height: auto; }
.nav__links { display: flex; gap: 1.6rem; margin-left: auto; flex-wrap: wrap; }
.nav__links a { font-size: 0.925rem; text-decoration: none; color: var(--ink-soft); }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--forest); text-decoration: underline; text-underline-offset: 5px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; padding: 0.8rem 1.5rem; border-radius: 2px;
  background: var(--forest); color: #fff; text-decoration: none;
  font-size: 0.95rem; font-weight: 500; border: 1px solid var(--forest);
  transition: background 0.15s ease;
}
.btn:hover { background: var(--forest-mid); }
.btn--ghost { background: transparent; color: var(--forest); }
.btn--ghost:hover { background: var(--forest-lo); }
.section--dark .btn { background: #fff; color: var(--forest); border-color: #fff; }
.section--dark .btn--ghost { background: transparent; color: #fff; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem); }
.hero h1 { max-width: 18ch; }
.hero .lede { max-width: 56ch; margin-top: 1.5rem; }
.hero__cta { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 2.25rem; }

/* ---------- imagery ---------- */
.bleed { margin-top: clamp(2.5rem, 5vw, 4rem); }
.bleed img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; max-width: 100%; }
.bleed figcaption,
.figcap {
  font: 500 0.78rem/1.5 "IBM Plex Mono", monospace; letter-spacing: 0.06em;
  color: var(--ink-mute); margin-top: 0.85rem; max-width: 62ch;
}
.section--dark .figcap { color: #8fb8a1; }

.media-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1.75rem, 4vw, 3.25rem); align-items: center; }
.media-split img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 720px) {
  .bleed img { aspect-ratio: 16 / 10; }
}

/* ---------- the proof figure ---------- */
.figure-callout {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center; padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--forest-lo); border-left: 3px solid var(--forest-mid);
}
.figure-callout__num {
  font-family: Spectral, serif; font-weight: 600; line-height: 0.9;
  font-size: clamp(3.25rem, 2rem + 6vw, 6rem); color: var(--forest);
  white-space: nowrap;
}
.figure-callout__num small { display: block; font-size: 0.24em; letter-spacing: 0.12em; text-transform: uppercase; font-family: "IBM Plex Mono", monospace; font-weight: 500; color: var(--ink-mute); margin-top: 0.7em; }
.figure-callout p:last-child { margin-bottom: 0; }

/* The number column is nowrap, so an "auto 1fr" grid will not collapse on its
   own - it starves the text column instead and overflows the viewport. Stack
   explicitly below the point where both fit. */
@media (max-width: 640px) {
  .figure-callout { grid-template-columns: 1fr; gap: 1.25rem; }
  .figure-callout__num { font-size: clamp(3rem, 14vw, 4.5rem); }
}

/* ---------- grids ---------- */
.grid { display: grid; gap: clamp(1.5rem, 3.5vw, 2.75rem); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.card { border-top: 2px solid var(--forest); padding-top: 1.25rem; }
.card h3 { margin-bottom: 0.4rem; }
.card p { font-size: 0.97rem; color: var(--ink-soft); }
.card a { color: var(--forest-mid); font-weight: 500; text-decoration: none; font-size: 0.95rem; }
.card a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- case studies ---------- */
.case { padding-block: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.case:first-of-type { border-top: 0; }
.case__meta { font: 500 0.78rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clay); margin-bottom: 0.8rem; }
.case__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: 1.5rem; }
.case__grid h4 { font: 600 0.8rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 0.6rem; }
.case__grid p { font-size: 0.95rem; margin-bottom: 0; }

/* ---------- people ---------- */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.75rem 2rem; list-style: none; padding: 0; margin: 0; }
.people li { border-top: 1px solid var(--line); padding-top: 0.85rem; }
.people strong { display: block; font-weight: 600; font-size: 0.98rem; }
.people span { display: block; font-size: 0.87rem; color: var(--ink-mute); margin-top: 0.2rem; line-height: 1.45; }

/* ---------- "start where you are" router (replaces the Solutions Finder quiz) ---------- */
.router { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.router li { border-top: 1px solid var(--line); padding: 1.35rem 0; display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: start; }
.router li:last-child { border-bottom: 1px solid var(--line); }
.router b { font-family: Spectral, serif; font-weight: 500; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); display: block; margin-bottom: 0.3rem; }
.router p { margin: 0; font-size: 0.96rem; color: var(--ink-soft); }
.router a { white-space: nowrap; color: var(--forest-mid); font-weight: 500; text-decoration: none; font-size: 0.93rem; align-self: center; }
.router a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 600px) { .router li { grid-template-columns: 1fr; } .router a { align-self: start; } }

/* ---------- service blocks ---------- */
.svc { padding-block: clamp(2.25rem, 5vw, 3.5rem); border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.svc__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.svc ul { margin: 1rem 0 0; padding-left: 1.1rem; }
.svc li { margin-bottom: 0.45rem; font-size: 0.96rem; color: var(--ink-soft); }

/* ---------- article list ---------- */
.posts { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.posts li { border-top: 1px solid var(--line); padding: 1.6rem 0; }
.posts li:last-child { border-bottom: 1px solid var(--line); }
.posts h3 { margin-bottom: 0.45rem; }
.posts .meta { font: 500 0.75rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.7rem; }
.posts p { font-size: 0.97rem; color: var(--ink-soft); margin-bottom: 0.7rem; }

/* ---------- footer ---------- */
.foot { background: var(--forest); color: #cfe0d5; padding-block: clamp(3rem, 6vw, 4.5rem); }
.foot a { color: #fff; }
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2.25rem; }
.foot h4 { font: 600 0.78rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; color: #8fb8a1; margin: 0 0 1rem; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 0.55rem; font-size: 0.95rem; }
.foot__base { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.15); font-size: 0.85rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- long-form article ---------- */
.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(1.35rem, 1.15rem + 1vw, 1.8rem); margin-top: 2.4rem; }
.prose p { font-size: 1.03rem; line-height: 1.72; }
.prose blockquote { margin: 2rem 0; padding-left: 1.4rem; border-left: 3px solid var(--forest-mid); font-family: Spectral, serif; font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem); line-height: 1.45; color: var(--forest); }
.byline { font: 500 0.8rem/1.6 "IBM Plex Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 1.5rem; }
.backlink { display: inline-block; margin-top: 3rem; font-size: 0.93rem; color: var(--forest-mid); text-decoration: none; }
.backlink:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- provenance block: the credibility object ---------- */
.provenance { margin: 3.5rem 0 0; padding: 1.5rem 1.75rem; background: var(--forest-lo); border-left: 3px solid var(--forest-mid); max-width: 70ch; }
.provenance h4 { font: 600 0.75rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest); margin: 0 0 0.9rem; }
.provenance dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.45rem 1.1rem; }
.provenance dt { font: 600 0.78rem/1.5 "IBM Plex Mono", monospace; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.05em; }
.provenance dd { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }
@media (max-width: 560px) { .provenance dl { grid-template-columns: 1fr; gap: 0.15rem; } .provenance dd { margin-bottom: 0.7rem; } }