@charset "UTF-8";

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Nunito Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 900;
	font-style: normal;
	font-variation-settings: "wdth" 100, "YTLC" 500;
	line-height: 95%;
	color: var(--color-text-primary);
	margin: 0;
	padding: 0;
}

p,
small,
caption,
dl,
dt {
	font-family: "Open Sans", sans-serif;
	font-weight: 300;
	line-height: 140%;
	color: var(--color-text-primary);
	margin: 0;
	padding: 0;
}

.p-bold,
.small-bold,
.caption-bold,
a {
	font-family: "Open Sans", sans-serif;
	font-weight: 600;
	line-height: 140%;
	margin: 0;
	padding: 0;
}

/* The whole scale shifted down one level (old h1→h2, h2→h3, h3→h4, h4→h5,
   h5→h6) to make room for this new top tier — the 80px hero heading used
   by the new hero module (see "HERO MODULE" in component-layout.css).
   Built with the same clamp() construction as every level below it: at
   its own max (5rem = 80px), min ≈ 0.778×max, preferred-base ≈ 0.704×max,
   vw-coefficient ≈ 0.372×max — the same three ratios every other level
   here already uses relative to its own max, so this new top step moves
   at the same fluid rate as the rest of the scale rather than a one-off
   curve. margin-bottom follows the same heading-tier pattern as h2–h5
   below (max = 0.8×font max, same min/vw ratios again).
   The min(..., 13vw) wrapper caps h1 on narrow viewports — lowered from
   the scaled-up overflow-safeguard value (15.5vw, matching h2's own
   11vw at this tier's larger max) after mobile emulation showed h1
   reading too large for a phone's actual column width: at a typical
   phone (~390px) 15.5vw rendered ~60px, uncomfortably close to h1's own
   80px desktop max and more than a modular step above h2's ~43px there.
   13vw instead lands ~51px at that width — roughly the midpoint between
   current h1 and h2, i.e. its own distinct step rather than reading
   like an oversized h2. Below ~506px-wide viewports this cap is what
   actually governs (clamp()'s own curve stays untouched and governs
   above that, same as before this change) — this value was chosen by
   checking the resulting size against h2's at several real phone widths
   (320–430px), not derived from the shared 0.372×max vw-coefficient
   ratio the clamp() itself still follows; it only reshapes the narrow-
   viewport cap, not the fluid curve above it, so tablet/desktop sizing
   (and every size below h1) is unchanged. A media query would do the
   same job in the 320–506px band specifically, but at the cost of a
   hard breakpoint snap instead of this already-fluid cap just getting
   a smaller coefficient — simpler, and consistent with how every other
   clamp() on this site avoids fixed breakpoints in favour of scaling
   continuously at every width. */
h1,
.h1-bold {
	font-size: min(clamp(3.89rem, calc(1.86 * var(--vw)) + 3.52rem, 5rem), calc(13 * var(--vw)));
	margin-bottom: clamp(3.112rem, calc(1.48 * var(--vw)) + 2.816rem, 4rem);
	overflow-wrap: break-word;
}

h2,
.h2-bold {
	/* Formerly h1 — same values, just one level down now that the 80px
	   heading above is h1. Keeps the min(..., 11vw) overflow safeguard it
	   had as h1 (see the comment there for why: keeps long words like
	   "environments" from overflowing on narrow screens). */
	font-size: min(clamp(2.763rem, calc(1.32 * var(--vw)) + 2.5rem, 3.552rem), calc(11 * var(--vw)));
	margin-bottom: clamp(2.21rem, calc(1.05 * var(--vw)) + 2rem, 2.842rem);
	overflow-wrap: break-word;
}

h3,
.h3-bold {
	/* Formerly h2 */
	font-size: clamp(2.073rem, calc(0.99 * var(--vw)) + 1.875rem, 2.665rem);
	margin-bottom: clamp(1.658rem, calc(0.79 * var(--vw)) + 1.5rem, 2.132rem);
}

h4,
.h4-bold {
	/* Formerly h3 */
	font-size: clamp(1.555rem, calc(0.74 * var(--vw)) + 1.407rem, 1.999rem);
	margin-bottom: clamp(1.244rem, calc(0.59 * var(--vw)) + 1.126rem, 1.599rem);
}

.h4-indent {
	/* Formerly .h3-indent */
	padding-left: clamp(1.037rem, calc(0.49 * var(--vw)) + 0.939rem, 1.333rem);
	border-left: clamp(0.389rem, calc(0.18 * var(--vw)) + 0.352rem, 0.5rem) solid var(--color-border-strong);
}

h5,
.h5-bold {
	/* Formerly h4 */
	font-size: clamp(1.166rem, calc(0.56 * var(--vw)) + 1.055rem, 1.5rem);
	margin-bottom: clamp(0.933rem, calc(0.45 * var(--vw)) + 0.843rem, 1.2rem);
}

.h5-indent {
	/* Formerly .h4-indent */
	padding-left: clamp(0.778rem, calc(0.37 * var(--vw)) + 0.704rem, 1rem);
	border-left: clamp(0.292rem, calc(0.13 * var(--vw)) + 0.264rem, 0.375rem) solid var(--color-border-strong);
}

h6,
.h6-bold,
p,
.p-bold {
	/* Formerly h5/p combined rule — h6 is new (same size p already was,
	   since p doesn't move), kept merged with p/.p-bold exactly as h5
	   was, including p's own margin-bottom ratio rather than the
	   tighter heading-tier one used by h2–h5 above. */
	font-size: clamp(0.875rem, calc(0.42 * var(--vw)) + 0.792rem, 1.125rem);
	margin-bottom: clamp(1.3125rem, calc(0.63 * var(--vw)) + 1.188rem, 1.6875rem);
}

/* Smaller body copy — one step down from p/.p-bold on the same 0.75
   modular scale used throughout (h1→h2→h3→h4→h5→h6/p→small→caption),
   reusing the "small" tier's own clamp() values rather than a one-off
   size. Combine with .p-bold for a bold lead at this smaller size (eg.
   class="p-bold p-small") — this only overrides size/spacing, not
   weight. This is the standing "small copy" to reach for anywhere body
   text needs to read a step smaller than the default paragraph size,
   e.g. the homepage repository index cards. */
.p-small,
.p-small .p-bold {
	font-size: clamp(0.656rem, calc(0.31 * var(--vw)) + 0.594rem, 0.844rem);
	margin-bottom: clamp(0.984rem, calc(0.47 * var(--vw)) + 0.89rem, 1.266rem);
}

dl .p-bold,
dl p {
	margin-bottom: 0;
}

dl {
	padding-left: 0;
	list-style: none;
}

dt,
dd {
	font-size: clamp(0.875rem, calc(0.42 * var(--vw)) + 0.792rem, 1.125rem);
}

dt {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 0.35em;
	/* Tight gap to dd — matches ~140% line-height rhythm */
	margin-top: 0;
}

dt::before {
	content: '';
	display: inline-block;
	flex-shrink: 0;
	width: 20px;
	height: 12px;
	background: url('../image-assets/icons-etc/bullet.svg') center / contain no-repeat;
}

dd {
	margin-top: 0;
	margin-left: calc(20px + 16px);
	/* SVG width + gap — aligns dd text under dt title */
	margin-bottom: clamp(1rem, calc(0.48 * var(--vw)) + 0.905rem, 1.286rem);
	/* Space between list item groups */
}

small,
.small-bold {
	font-size: clamp(0.656rem, calc(0.31 * var(--vw)) + 0.594rem, 0.844rem);
	margin-bottom: clamp(0.984rem, calc(0.47 * var(--vw)) + 0.89rem, 1.266rem);
}

caption,
.caption-bold {
	font-size: clamp(0.492rem, calc(0.23 * var(--vw)) + 0.446rem, 0.633rem);
	margin-bottom: 0.25rem;
}

a {
	color: var(--color-text-primary);
	cursor: pointer;
	text-decoration: underline;
}

/* ============================================================
   TEXT WRAPPING (site-wide)
   - hyphens: none: no "-" ever inserted to break a word. Set on html
     (inherited by everything) and restated on the text elements, since
     component-layout.css used to set hyphens:auto on them directly.
   - text-wrap: balance on headings: evens out line lengths so a
     heading never ends with a single stranded word (browsers apply it
     to blocks of up to ~6 lines, i.e. every heading here).
   - text-wrap: pretty on body copy: the browser re-flows the last few
     lines of each paragraph to avoid one-word last lines (runts).
     Cheaper than balance on long text, and degrades silently to normal
     wrapping in browsers that don't support it.
   - orphans / widows: 3: only take effect where text can split across
     fragments (print pages, multi-column layouts): no fewer than three
     lines are left at the bottom or carried to the top.
   ============================================================ */
html {
	-webkit-hyphens: none;
	hyphens: none;
}

h1, h2, h3, h4, h5, h6,
p, li, dt, dd, blockquote, figcaption, td, th {
	-webkit-hyphens: none;
	hyphens: none;
}

h1, h2, h3, h4, h5, h6,
.h1-bold, .h2-bold, .h3-bold {
	text-wrap: balance;
}

/* Headings never split a word. js/heading-fit.js adds .js-heading-fit
   to <html> and scales any heading whose longest word is wider than its
   column down until that word fits on one line. With that guarantee in
   place, the mid-word overflow-wrap/word-break safety net (h1/h2 above,
   and the heading rule in component-layout.css) is switched off. Without
   JS the safety net stays on, so a long word is never clipped. */
.js-heading-fit :is(h1, h2, h3, h4, h5, h6, .h1-bold, .h2-bold, .h3-bold) {
	overflow-wrap: normal;
	word-break: normal;
}

p, li, dt, dd, blockquote, figcaption {
	text-wrap: pretty;
	orphans: 3;
	widows: 3;
}

/* Headings shouldn't be the last thing on a printed page/column. */
@media print {
	h1, h2, h3, h4, h5, h6 {
		break-after: avoid;
	}
}