/* 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. */

/* ── Self-hosted type (site/fonts/, SIL OFL, see site/fonts/OFL.txt) ──
   Latin subset, weights 400/600 only. font-display: swap keeps the fallback
   stack in tokens.css visible until each face loads. */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/source-serif-4-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/source-serif-4-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/source-sans-3-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/source-sans-3-600.woff2') format('woff2');
}

*, *::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: var(--white);
  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, section content, 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);
}

/* Wordmark: "Novus Acumen" set in Source Serif 4, its own letterspacing
   (deliberately open, not the tight heading tracking) so it reads as a mark
   rather than nav text. The header mark is always the wordmark; the NA monogram
   is for square slots (favicon, apple-touch, LinkedIn), never the header. */
.wordmark {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: 0.02em;
  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: a stack of full-width sections, each carrying its own centered wrap
   so a .band can paint edge to edge with a plain block background, no 100vw or
   negative-margin tricks and no horizontal overflow. ── */
main { flex: 1 0 auto; }

.section { padding-block: var(--space-2xl); }
/* First (page-header) section on every page gets extra top air. */
main > .section:first-child { padding-top: var(--space-3xl); }
/* Home hero: a statement, not a paragraph. Bigger type, air top and bottom. */
.section.hero { padding-block: var(--space-3xl); }

/* Hairline divider between two consecutive plain (non-band) sections, drawn on
   the reading column so it stays centered rather than spanning the viewport.
   Suppressed directly under the page-header, where open space carries the break
   and a band edge divides the rest. */
.section:not(.band) + .section:not(.band) > .wrap {
  border-top: var(--hairline);
  padding-top: var(--space-2xl);
}
main > .section:first-child + .section > .wrap {
  border-top: none;
  padding-top: 0;
}
/* First element in a section sits flush to the section's top padding. */
.wrap > :first-child { margin-top: 0; }

/* ── Page header ── */
.page-header { margin-bottom: 0; }
.page-header .eyebrow {
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 var(--space-sm);
}

/* Accent rule: the one place --orange is spent. A short fill bar under the
   eyebrow (never text, never on white), echoing the rule on the LinkedIn cover
   and the OG card. Rendered cream at reduced opacity inside a teal band. */
.accent-rule {
  display: block;
  width: 40px;
  height: 3px;
  margin: 0 0 var(--space-lg);
  border-radius: var(--radius);
  background: var(--orange);
}

.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: 0 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); }

/* Home hero heading: larger step, wider measure so it breaks across two or three
   lines rather than four. */
.hero h1 { font-size: var(--step-5); max-width: none; }

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); }

/* ── Three-up (Home "What we do"): equal columns, a hairline over each item,
   collapsing to one column on narrow viewports. ── */
.three-up {
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
  max-width: none;
}
.three-up li { border-top: var(--hairline); padding-top: var(--space-sm); }
.three-up h3 { margin: 0 0 var(--space-xs); max-width: none; }
.three-up p { margin: 0; max-width: none; }

/* ── Full-bleed teal band: breaks the single cream column. Plain block-level
   background, cream text (cream on --teal passes AA, ~4.6:1), generous padding.
   One band per page, maximum. ── */
.band {
  background: var(--teal);
  color: var(--cream);
  padding-block: var(--space-3xl);
}
.band h2, .band h3 { color: var(--cream); }
.band p { color: var(--cream); }
.band a { color: var(--white); }
.band a:hover { color: var(--cream); }
.band .accent-rule { background: color-mix(in srgb, var(--cream) 60%, transparent); }

/* Pull line: a short serif statement leading a band. */
.band .pull {
  font-family: var(--font-serif);
  font-size: var(--step-3);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  max-width: 28ch;
  margin: 0 0 var(--space-lg);
}

/* Restrained contact list (LinkedIn pointer), 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);
}

/* ── Entry list (Writing index): date, title, one summary line, reverse
   chronological, hairline between entries. ── */
.entry-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.entry-list li {
  padding-block: var(--space-xl);
}
.entry-list li:first-child { padding-top: 0; }
.entry-list li + li { border-top: var(--hairline); }
.entry-list .entry-date {
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--ink) 60%, var(--cream));
  margin: 0 0 var(--space-2xs);
}
.entry-list h2 { margin: 0 0 var(--space-sm); }
.entry-list p:last-child { margin: 0; max-width: var(--measure); }

/* ── About intro: portrait beside the opening copy. Single column, portrait
   above the text, below 48rem; two-column (portrait 1fr, text 2fr) at 48rem
   and up. No treatment on the image, no full-bleed on mobile. ── */
.about-intro {
  /* The image is 4:5, so rendered height = width x 1.25.
     10rem wide -> 12.5rem (200px) tall, roughly two inches. Tune here only. */
  --portrait-w: 10rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
.about-intro .portrait {
  display: block;
  width: var(--portrait-w);
  max-width: 100%;
  height: auto;
}
.about-intro .intro-text p:last-child { margin-bottom: 0; }

@media (min-width: 48rem) {
  .about-intro {
    grid-template-columns: auto 1fr;
    align-items: start;
  }
}

/* ── Article pages (Writing): eyebrow links back, byline under h1, prose
   capped at --measure, plain "Back to writing" close. ── */
.article-eyebrow { text-decoration: none; }
.article-eyebrow:hover { color: var(--ink); }
.byline {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: color-mix(in srgb, var(--ink) 60%, var(--cream));
  margin: 0 0 var(--space-xl);
}
.back-link { margin-top: var(--space-xl); }

/* ── Footer ── a closing teal band grounding every page. ── */
.site-footer {
  background: var(--teal);
  color: color-mix(in srgb, var(--white) 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: var(--white); 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, var(--white) 78%, var(--teal));
}

/* ── Responsive ── */
@media (max-width: 44rem) {
  .three-up { grid-template-columns: 1fr; gap: var(--space-lg); }
}

@media (max-width: 34rem) {
  .site-header .wrap { flex-direction: column; align-items: flex-start; }
  .section { padding-block: var(--space-xl); }
  main > .section:first-child,
  .section.hero { padding-block: var(--space-2xl); }
}

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