/*
	Design tokens lifted from byhook.com's actual stylesheet:
	their snow palette, pastel artwork tints, and — critically —
	their real fluid type ramp and container math. byhook scales
	type with gentle vw coefficients (~1vw), not aggressive ones,
	and constrains content to a clamp(50rem…75rem) column that
	sits near 920px on a laptop. Matching those keeps the page at
	byhook's compact scale rather than blowing it up.
*/
:root {
	/* Palette — byhook's real tokens */
	--colorSnow: #f6f6f6;
	--colorWhite: #fff;
	--colorBlack: #000;
	--colorGray: #888;
	--colorLine: rgba(0, 0, 0, 0.12);
	--colorLineOnBlack: rgba(255, 255, 255, 0.2);

	/* Brand blue sampled from the logo (light highlight blue) */
	--colorBrandBlue: #29aae3;

	/* Pastel artwork tints */
	--colorBeige: #fdf3e4;
	--colorPink: #ffdfdf;
	--colorTan: #ffd7b2;
	--colorLilac: #f6eeff;

	/* Typography — Switzer stands in for byhook's Spezia grotesk */
	--fontSans: "Switzer", "Helvetica Neue", Arial, sans-serif;

	/*
		Fluid type ramp — byhook's exact clamp() expressions.
		Each is clamp(min, base + gentle vw, max); the small vw term
		is what keeps headings from ballooning on wide screens.
	*/
	--textHero: clamp(3.25rem, calc((2rem) + (5.5vw)), 7.25rem);
	--textSection: clamp(3.125rem, calc((2.34375rem) + (1.3888888888888888vw)), 4.6875rem);
	--textWorkTitle: clamp(1.625rem, calc((1.21875rem) + (0.7222222222222222vw)), 2.4375rem);
	--textArticleTitle: clamp(1.25rem, calc((0.9375rem) + (0.5555555555555556vw)), 1.875rem);
	--textLede: clamp(1.125rem, calc((0.84375rem) + (0.5vw)), 1.6875rem);
	--textBody: clamp(0.875rem, calc((0.65625rem) + (0.3888888888888889vw)), 1.3125rem);
	--textSmall: clamp(0.75rem, calc((0.5625rem) + (0.2vw)), 1.125rem);
	--textEyebrow: clamp(0.625rem, calc((0.46875rem) + (0.2777777777777778vw)), 0.9375rem);

	/* Heading line-heights and tracking — byhook's tight values */
	--leadingHero: 0.96;
	--leadingSection: 0.96;
	--trackingDisplay: -0.04em;

	/* Shape */
	--radiusCard: 10px;
	--radiusPill: 999px;

	/* Motion */
	--easeOut: cubic-bezier(0.22, 1, 0.36, 1);
	--easeSnap: cubic-bezier(0.83, 0, 0.17, 1);
	--durationReveal: 0.8s;
	--durationRoll: 0.4s;

	/*
		Layout — byhook runs its content wrapper at ~87% of the
		viewport up to a wide cap (their outer max-width is 1640px,
		text columns 1200px). widthContent is the cap; sections take
		87.5% of the viewport until they reach it, so the column stays
		wide on laptops and desktops instead of collapsing narrow.
	*/
	--widthViewport: 87.5%;
	--widthContent: 87.5rem;
	--sectionPadBlock: clamp(4.0625rem, calc((3.046875rem) + (1.8055555555555554vw)), 6.09375rem);
}