/* Base layout + typography for the Novus Acumen site. Depends on tokens.css for
   all palette / type / spacing values. Understated, whitespace-led — the quiet
   authority of the established-consultancy register, not a busy marketing page. */

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Accessibility: skip link ── */
.skip-link {
  position: absolute;
  left: var(--space-md);
  top: -3rem;
  background: var(--teal);
  color: #fff;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius);
  z-index: 10;
  transition: top 120ms ease;
}
.skip-link:focus { top: var(--space-md); }

/* ── Shared wrap: aligns header, main, footer to one measure ── */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── Site header ── */
.site-header {
  border-bottom: var(--hairline);
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  padding-block: var(--space-lg);
}

/* Placeholder wordmark, set in type (the real logo lands in the brand pass). */
.wordmark {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--teal);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: var(--ink); }

/* ── Primary nav ── */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  font-size: var(--step-0);
}
.site-nav a {
  color: var(--ink);
  text-decoration: none;
  padding-block: var(--space-2xs);
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.site-nav a:hover { color: var(--teal); }
.site-nav a[aria-current="page"] {
  color: var(--teal);
  border-bottom-color: var(--teal);
}

/* ── Main content ── */
main {
  flex: 1 0 auto;
  padding-block: var(--space-2xl) var(--space-3xl);
}
/* Sections fill the wrap (their hairline rules span the full column); running
   text inside is capped to --measure by the h*/p/.lede rules below. */

.page-header { margin-bottom: var(--space-2xl); }
.page-header .eyebrow {
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 var(--space-sm);
}
.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 88%, var(--cream));
  max-width: var(--measure);
}

/* ── Typographic rhythm ── */
h1, h2, h3 {
  font-family: var(--font-serif);
  color: var(--teal);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); margin: 0 0 var(--space-md); max-width: var(--measure); }
h2 { font-size: var(--step-3); margin: var(--space-2xl) 0 var(--space-md); max-width: var(--measure); }
h3 { font-size: var(--step-2); margin: var(--space-xl) 0 var(--space-sm); max-width: var(--measure); }

p { margin: 0 0 var(--space-lg); max-width: var(--measure); }

a { color: var(--teal); text-underline-offset: 0.15em; }
a:hover { color: var(--ink); }

/* Content sections: calm vertical spacing, an optional hairline separator. */
.section + .section {
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: var(--hairline);
}

/* Restrained contact list (mailto/tel), no form backend. */
.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-lg);
}
.contact-list dt,
.contact-list .label {
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 60%, var(--cream));
  margin-bottom: var(--space-2xs);
}
.contact-list a {
  font-size: var(--step-1);
  font-family: var(--font-serif);
}

/* ── Footer ── grounds the page with the one deliberate teal band. ── */
.site-footer {
  background: var(--teal);
  color: color-mix(in srgb, #fff 92%, var(--teal));
  margin-top: var(--space-3xl);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  padding-block: var(--space-xl);
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  font-size: var(--step--1);
}
.site-footer .colophon {
  font-size: var(--step--1);
  color: color-mix(in srgb, #fff 78%, var(--teal));
}

/* ── Responsive ── */
@media (max-width: 34rem) {
  .site-header .wrap { flex-direction: column; align-items: flex-start; }
  main { padding-block: var(--space-xl) var(--space-2xl); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}