/* ============================================================================
   TOKENS — the site's colour and size vocabulary.

   Every value below was already hard-coded somewhere in the old stylesheets.
   Naming them means changing a brand colour is a one-line edit instead of a
   find-and-replace across a thousand lines.

   These are namespaced `--evm-*` so they can never collide with the variables
   Kinsey and Kirki define (`--color-dark-1`, `--gutter-horizontal`, etc.),
   which are still used in places and must be left alone.
   ============================================================================ */

:root {
	/* --- Brand ------------------------------------------------------------ */
	--evm-yellow: #fcd106;

	/* --- Surfaces --------------------------------------------------------- */
	--evm-surface-dark: #1a1a1a;   /* home / landing page background          */
	--evm-surface-light: #e4e4e4;  /* every other page's content background   */
	--evm-surface-footer: #ffffff; /* footer on light pages                   */

	/* --- Ink -------------------------------------------------------------- */
	--evm-ink: #1d1d21;            /* body + heading text on light pages      */
	--evm-ink-inverse: #ffffff;    /* text on dark surfaces                   */
	--evm-ink-muted: #7a7a7a;      /* footer headings + paragraphs            */
	--evm-ink-muted-light: #aaaaaa;/* footer links, home hover                */
	--evm-ink-caption: #555555;    /* image captions, preloader counter       */
	--evm-ink-footer: #4a4a4a;     /* footer body text on light pages         */

	/* --- Layout ----------------------------------------------------------- */
	--evm-container-max: 1299px;   /* the site's outer content width          */
	--evm-masthead-title-max: 831px;

	/* --- Nav bar ---------------------------------------------------------- */
	/* Two heights, one per header state:
	     landing  at rest, before the visitor scrolls
	     sticky   once Kinsey's JS adds .header_sticky on scroll

	   The logo is taller than the bar and hangs below it — that overhang is
	   what gives the logo its "tag" reading. These numbers move the bar,
	   never the logo.

	   The logo itself is resized by Kinsey in JavaScript (GSAP), not CSS, so
	   the two animations are timed independently. If the bar and the logo
	   look out of step on scroll, tune --evm-navbar-transition.            */
	/* Matches the logo height, so the nav centres on the logo's centre line. */
	--evm-navbar-height-landing: 160px;

	/* The bar no longer shrinks on scroll. Once the logo stopped scaling
	   there was nothing left for it to shrink in sympathy with, and a moving
	   bar would drag the nav with it — the nav is meant to hold still.
	   Set this back to 75px to restore the two-state behaviour.            */
	--evm-navbar-height-sticky: var(--evm-navbar-height-landing);
	/* The bar has no fill for now — but it still has a height, and that
	   height is what positions the nav vertically. Do not remove the height
	   thinking the bar is gone; put a colour back here to see it again.    */
	--evm-navbar-bg: transparent;
	--evm-navbar-transition: 0.4s ease;

	/* Nav colour — the menu links on desktop, the burger on phones.
	   Two contexts, because one value could not serve both:

	     home    mid grey on the dark landing page. Deliberately quieter
	             than the white body copy, so the eye lands on the writing
	             first and the nav reads as secondary.
	     inner   white, aimed at the scrimmed hero images on portfolio
	             items and posts.

	   Two cases, because the nav has no background of its own and so takes
	   its legibility entirely from whatever is behind it.                    */

	/* Default — the dark landing page AND the flat #E4E4E4 pages (Work,
	   About, Approach, Privacy, archives). One mid grey that holds on both,
	   which is the point: the nav looks the same everywhere except where an
	   image forces the issue. It also sits deliberately quieter than the
	   white body copy on the landing page, so the writing leads.            */
	--evm-nav-color: var(--evm-ink-muted);

	/* Over the scrimmed full-bleed heroes on portfolio items and posts. */
	--evm-nav-color-over-image: #ffffff;

	/* Text-to-text gap between nav items.                                   */
	--evm-nav-gap: 44px;

	/* --- Footer ----------------------------------------------------------- */
	/* One vertical rhythm for the whole footer: below a heading, between
	   paragraphs, and between menu items. 16px is what the left column
	   already used — the parent sets `p { margin: 1em 0 }` and the footer's
	   type is 16px — so matching it keeps that column exactly as it was.

	   NOT used between menu items: those sit on the paragraph's line
	   spacing instead, so a menu column reads with the same leading as the
	   copy beside it.                                                      */
	--evm-footer-gap: 16px;

	/* Space above the copyright line. Kept small on purpose — it belongs to
	   the footer, not floating away from it.                               */
	--evm-footer-copyright-gap: 16px;

	/* Footer link hover. The brand yellow is unreadable against the white
	   footer, so hover goes darker rather than brighter.                   */
	--evm-footer-link-hover: #000000;
}