/* ============================================================
   core.css — reset, theme, typography, page chrome, utilities
   ------------------------------------------------------------
   Sections:
     1. Reset / normalize
     2. Theme variables  (light + dark via prefers-color-scheme)
     3. Base typography  (responsive root size, headings, links, lists)
     4. Header           (shrink-on-scroll + .header-inline variant)
     5. Nav + burger     (mobile drawer + desktop bar, dropdown submenu)
     6. Footer
     7. Top-of-page button
     8. Whitelisted utility classes
          - text alignment
          - text transform & weight
          - type scale (.text-xs … .text-9xl)
          - spacing scale (.m-N .mt-N … .pl-N) in literal px

   Spacing scale uses px values matching class names:
     .mt-20 → margin-top: 20px
     .py-40 → padding-top:40px; padding-bottom:40px
   Ramp: 0 2 4 6 8 10 12 16 20 24 32 40 48 56 64 80 96 120 160 200
   ============================================================ */


/* ── 1. RESET ─────────────────────────────────────────────── */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video, button, input, textarea, select {
	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup,
menu, nav, section, main { display: block; }
body { line-height: 1.4; }
ol, ul { list-style: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }
table { border-collapse: collapse; border-spacing: 0; }
button { background: none; cursor: pointer; font: inherit; color: inherit; }


/* ── 2. THEME VARIABLES ───────────────────────────────────── */

:root {
	/* Brand / accent — override these in your own site stylesheet */
	--color-brand:           #3399cc;
	--color-brand-hover:     #006699;

	/* Light scheme (default) */
	--color-bg:              #ffffff;
	--color-surface:         #f5f5f5;
	--color-surface-alt:     #ebebeb;
	--color-text:            #4d4d4d;
	--color-text-strong:     #000000;
	--color-text-muted:      #777777;
	--color-border:          #dddddd;
	--color-link:            var(--color-brand);
	--color-link-hover:      var(--color-brand-hover);

	--color-header-bg:       #ffffff;
	--color-header-text:     #000000;
	--color-header-shadow:   rgba(0, 0, 0, 0.15);

	--color-nav-a:           #000000;
	--color-nav-a-hover:     var(--color-brand);
	--color-nav-mobile-bg:   #111111;
	--color-nav-mobile-a:    #ffffff;
	--color-nav-mobile-a-hover: var(--color-brand);

	--color-footer-bg:       #231f20;
	--color-footer-text:     #ffffff;
	--color-footer-a:        #ffffff;
	--color-footer-a-hover:  #cccccc;

	/* Header / nav layout */
	--header-height:          150px;  /* full desktop height */
	--header-height-compact:  80px;   /* collapsed desktop height (after scroll) */
	--header-height-mobile:   72px;   /* fixed header height below the breakpoint */
	--header-padding-top:     12px;   /* inset above header contents (logo/nav) */
	--header-padding-bottom:  12px;   /* inset below header contents (logo/nav) */
	--logo-max-width:         200px;  /* hard cap on logo width (independent of height) */
	--header-shrink-trigger:  50vh;   /* scroll depth before the header collapses */
	--header-nav-breakpoint:  1300px; /* reminder only — literal repeated in @media + site.js */
	--nav-gap:                24px;   /* gap between desktop nav items */
	--nav-line-height:        1.3;    /* line-height of menu-item labels */
	--submenu-min-width:      220px;  /* min width of a single-column submenu */

	/* Type */
	--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
	             "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
	             sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
	             "Liberation Mono", "Courier New", monospace;

	--font-body: var(--font-sans);
	--font-heading: var(--font-sans);

	/* Motion */
	--transition-fast: 0.2s ease;
	--transition-base: 0.35s ease;
	--transition-slow: 0.6s ease;

	/* Elevation */
	--shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
	--shadow-md: 0 2px 8px rgba(0,0,0,0.12);
	--shadow-lg: 0 8px 24px rgba(0,0,0,0.18);
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-bg:              #121212;
		--color-surface:         #1c1c1c;
		--color-surface-alt:     #262626;
		--color-text:            #d4d4d4;
		--color-text-strong:     #ffffff;
		--color-text-muted:      #999999;
		--color-border:          #333333;

		--color-header-bg:       #181818;
		--color-header-text:     #ffffff;
		--color-header-shadow:   rgba(0, 0, 0, 0.6);

		--color-nav-a:           #ffffff;
		--color-nav-mobile-bg:   #000000;

		--color-footer-bg:       #0a0a0a;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* ── 3. BASE TYPOGRAPHY ───────────────────────────────────── */

html {
	font-size: 16px;
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-height-mobile); /* desktop overridden in §4 */
	-webkit-text-size-adjust: 100%;
}
@media (min-width: 768px)  { html { font-size: 17px; } }
@media (min-width: 1280px) { html { font-size: 18px; } }

body {
	font-family: var(--font-body);
	font-weight: 400;
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.5;
	padding-top: var(--header-height-mobile); /* mobile; desktop overridden in §4 */
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body.body-inline-header { padding-top: 0; }
body.noscroll { overflow: hidden; height: 100vh; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--color-text-strong);
	line-height: 1.2;
	margin-bottom: 0.5em;
	font-weight: 600;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.625rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; }

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

a {
	color: var(--color-link);
	text-decoration: none;
	transition: color var(--transition-fast);
}
a:hover { color: var(--color-link-hover); }

strong, b { font-weight: 700; color: var(--color-text-strong); }
em, i { font-style: italic; }
small { font-size: 0.85em; }
hr { border: 0; border-top: 1px solid var(--color-border); margin: 2em 0; }

main ul, main ol { list-style-position: outside; margin: 1em 0 1em 1.5em; }
main ul { list-style: disc; }
main ol { list-style: decimal; }
main li { margin-bottom: 0.25em; }

blockquote {
	border-left: 3px solid var(--color-brand);
	padding-left: 1em;
	margin: 1.5em 0;
	color: var(--color-text-muted);
	font-style: italic;
}
code, pre {
	font-family: var(--font-mono);
	font-size: 0.9em;
	background: var(--color-surface);
	border-radius: 3px;
}
code { padding: 0.1em 0.35em; }
pre { padding: 1em; overflow-x: auto; margin-bottom: 1em; }
pre code { padding: 0; background: none; }

::selection { background: var(--color-brand); color: #fff; }


/* ── 4. HEADER ────────────────────────────────────────────── */
/*
   Fixed, always-visible header. Flexbox row: logo left, nav pushed right.
     • Desktop (>= NAV BREAKPOINT): full --header-height; collapses to
       --header-height-compact once the user scrolls past --header-shrink-trigger
       (site.js adds .compact). Dropdowns escape below the header.
     • Mobile (< NAV BREAKPOINT): fixed --header-height-mobile bar; the nav is a
       burger drawer and never shrinks.

   NAV BREAKPOINT: 1300px — the single desktop<->burger switch. A CSS @media
   query can't read a custom property, so the literal 1300px is repeated in the
   media queries below AND in matchMedia() in site.js, mirrored by the
   --header-nav-breakpoint reminder var. Change them together.
*/
header {
	z-index: 1000;
	position: fixed;
	inset: 0 0 auto 0;                 /* top/right/left 0 */
	height: var(--header-height-mobile);  /* mobile default; desktop overrides below */
	display: flex;
	align-items: stretch;
	padding-inline: clamp(16px, 4vw, 40px);
	padding-block: var(--header-padding-top) var(--header-padding-bottom);
	background: var(--color-header-bg);
	color: var(--color-header-text);
	box-shadow: 0 1px 6px var(--color-header-shadow);
	transition: height var(--transition-base);
	/* overflow stays visible so nav dropdowns can escape below the header */
}

/* Logo: left, fills height, capped width — smaller constraint wins, ratio kept.
   Drop any logo (SVG/PNG, any aspect ratio) in; the width cap stops a wide one
   from crowding the nav, and max-height keeps it inside the bar on mobile. */
header .logo-link {
	display: flex;
	align-items: center;
	height: 100%;
	flex: 0 0 auto;
	text-decoration: none;
}
header .logo {
	display: block;
	height: 100%;
	width: auto;
	max-width: var(--logo-max-width);
	max-height: 100%;
	object-fit: contain;
}


/* ── 5. NAV + BURGER ──────────────────────────────────────── */
/* Submenu (.has-submenu) and mega-menu (.has-mega-menu) are documented in the
   component library; the site's own nav is flat, but the CSS ships here so the
   components work wherever they're used. */

:root {
	/* mega-menu (panel bg inherits --color-header-bg via the shared shell) */
	--mega-menu-padding:      2rem;
	--mega-menu-col-min:      180px;
	--mega-menu-col-gap:      2rem;
	--mega-menu-label-color:  var(--color-text-muted);
	--mega-menu-cta-bg:       var(--color-brand);
	--mega-menu-cta-color:    #fff;

	/* burger */
	--burger-width:      32px;
	--burger-bar-height: 3px;
	--burger-gap:        9px;
	--burger-color:      currentColor;
}

/* Burger (mobile only; hidden on desktop) */
.burger-btn {
	margin-left: auto;
	align-self: center;
	width: var(--burger-width);
	height: calc(var(--burger-gap) * 2 + var(--burger-bar-height) * 3);
	position: relative;
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
	color: var(--color-nav-a);
}
.burger-btn span {
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: var(--burger-bar-height);
	background: var(--burger-color);
	border-radius: 2px;
	transition: transform var(--transition-base), opacity var(--transition-fast), top var(--transition-base);
}
.burger-btn span:nth-child(1) { top: 0; }
.burger-btn span:nth-child(2) { top: calc(var(--burger-gap) + var(--burger-bar-height)); }
.burger-btn span:nth-child(3) { top: calc((var(--burger-gap) + var(--burger-bar-height)) * 2); }
.burger-btn.open span:nth-child(1) {
	top: calc(var(--burger-gap) + var(--burger-bar-height));
	transform: rotate(45deg);
}
.burger-btn.open span:nth-child(2) { opacity: 0; }
.burger-btn.open span:nth-child(3) {
	top: calc(var(--burger-gap) + var(--burger-bar-height));
	transform: rotate(-45deg);
}

/* Nav — mobile first (drawer dropping below the header) */
header nav {
	position: absolute;
	top: 100%; left: 0;
	width: 100%;
	max-height: calc(100vh - var(--header-height-mobile));
	overflow-y: auto;
	background: var(--color-nav-mobile-bg);
	box-shadow: var(--shadow-md);
	display: none;                 /* hidden until .open */
}
header nav.open { display: block; }
header nav ul { list-style: none; margin: 0; padding: 0; }
header nav li { position: relative; }
header nav a {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: var(--nav-line-height);
	padding: 0.85rem 1.5rem;
	color: var(--color-nav-mobile-a);
	text-decoration: none;
	letter-spacing: 0.04em;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
header nav a:hover { color: var(--color-nav-mobile-a-hover); }
header nav a.nav-active { color: var(--color-nav-mobile-a-hover); font-weight: 600; }

/* A forced two-line <br> in long labels keeps desktop nav items narrow, but in
   the wide mobile drawer it breaks mid-phrase. Drop the break below the
   breakpoint and let labels sit on one line. (1023.98px mirrors site.js.) */
@media (max-width: 1023.98px) {
	header nav br { display: none; }
}

/* Optional caret — include <svg class="chev"> in a trigger to show one. SVG (not
   a CSS border) so the 180deg flip stays centred; fill-box pins the rotation to
   the icon's own bbox (Safari otherwise rotates SVGs around the viewport). */
header nav .chev {
	position: absolute;
	right: 1.5rem;
	top: calc(50% - 6px);
	width: 12px; height: 12px;
	transition: transform var(--transition-fast);
	pointer-events: none;
	transform-box: fill-box;
	transform-origin: center;
}
header nav li.has-submenu.open  > a .chev,
header nav li.has-mega-menu.open > a .chev { transform: rotate(180deg); }

/* Sub-panels: hidden accordions on mobile, revealed when the li is .open */
header nav .submenu,
header nav .mega-menu {
	display: none;
	background: rgba(0, 0, 0, 0.18);
}
header nav li.has-submenu.open  > .submenu,
header nav li.has-mega-menu.open > .mega-menu { display: block; }
header nav .submenu a,
header nav .mega-menu a {
	display: block;
	padding: 0.7rem 1.5rem;
	text-align: center;
	line-height: var(--nav-line-height);
	color: var(--color-nav-mobile-a);
}
header nav .submenu a:hover,
header nav .mega-menu a:hover { color: var(--color-nav-mobile-a-hover); }
header nav .mega-menu-col h3 {
	margin: 0;
	padding: 0.9rem 1.5rem 0.3rem;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	color: var(--color-nav-mobile-a-hover);
}
header nav .mega-menu-cta { display: flex; flex-direction: column; }
header nav .mega-menu-cta a {
	margin: 0.25rem 1.5rem;
	background: var(--mega-menu-cta-bg);
	color: var(--mega-menu-cta-color);
	border-radius: 4px;
}

/* Desktop (>= 1300px) — horizontal right-justified nav + shrink-on-scroll */
@media (min-width: 1300px) {
	body { padding-top: var(--header-height); }
	html { scroll-padding-top: var(--header-height); }
	header { height: var(--header-height); }
	header.compact { height: var(--header-height-compact); }

	.burger-btn { display: none; }

	header nav {
		position: static;
		display: flex;
		align-items: stretch;
		width: auto;
		max-height: none;
		margin-left: auto;        /* right-justify the whole nav */
		overflow: visible;
		background: none;
		box-shadow: none;
	}
	header nav ul {
		display: flex;
		flex-wrap: wrap;          /* items may wrap if space is tight */
		justify-content: flex-end;
		align-items: stretch;     /* li fills nav height so dropdowns anchor at header bottom */
		gap: var(--nav-gap);
	}
	header nav > ul > li { display: flex; align-items: center; }
	header nav a {
		position: relative;
		padding: 0.25rem 0;       /* --nav-gap does the spacing */
		border: 0;
		color: var(--color-nav-a);
		letter-spacing: 0.06em;
		white-space: nowrap;
	}
	header nav a:hover { color: var(--color-nav-a-hover); }
	header nav a.nav-active { color: var(--color-nav-a-hover); font-weight: 600; }
	header nav a.nav-active::after {
		content: '';
		position: absolute;
		left: 0; right: 0; bottom: -4px;
		height: 3px;
		background: var(--color-brand);
		border-radius: 2px 2px 0 0;
	}

	/* Caret: inline after the label, flips on hover */
	header nav .chev {
		position: static;
		top: auto; right: auto;
		margin-left: 0.4rem;
		width: 11px; height: 11px;
	}
	header nav > ul > li:hover > a .chev,
	header nav > ul > li:focus-within > a .chev { transform: rotate(180deg); }

	/* Dropdown shell shared by .submenu and .mega-menu */
	header nav .submenu,
	header nav .mega-menu {
		display: block;           /* in DOM; shown via opacity below */
		position: absolute;
		top: 100%;                /* bottom edge of the full-height li */
		background: var(--color-header-bg);
		box-shadow: var(--shadow-lg);
		border-radius: 0 0 8px 8px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
		z-index: 10;
	}
	/* Invisible bridge over the header's bottom padding so the cursor can reach
	   the panel without the hover dropping. */
	header nav .submenu::before,
	header nav .mega-menu::before {
		content: '';
		position: absolute;
		left: 0; right: 0;
		top: calc(-1 * var(--header-padding-bottom));
		height: var(--header-padding-bottom);
	}
	header nav > ul > li:hover > .submenu,
	header nav > ul > li:focus-within > .submenu,
	header nav > ul > li:hover > .mega-menu,
	header nav > ul > li:focus-within > .mega-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	/* Single-column submenu — anchored to its own li */
	header nav .submenu {
		left: 0;
		min-width: var(--submenu-min-width);
		padding: 0.4rem 0;
	}
	header nav .submenu a {
		padding: 0.6rem 1.25rem;
		text-align: left;
		white-space: nowrap;
		line-height: 1.3;
		color: var(--color-nav-a);
	}
	header nav .submenu a:hover { color: var(--color-nav-a-hover); background: rgba(0, 0, 0, 0.05); }

	/* Full-width mega-menu — li goes static so the panel spans the header */
	header nav li.has-mega-menu { position: static; }
	header nav .mega-menu {
		left: 0; right: 0;
		width: 100%;
		padding: var(--mega-menu-padding);
	}
	.mega-menu-cols {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(var(--mega-menu-col-min), 1fr));
		gap: var(--mega-menu-col-gap);
		max-width: 1100px;
		margin-inline: auto;
	}
	.mega-menu-col h3 {
		margin: 0 0 0.6rem;
		padding: 0;
		font-size: 0.8rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-align: left;
		color: var(--mega-menu-label-color);
	}
	.mega-menu-col a {
		padding: 0.35rem 0;
		color: var(--color-nav-a);
		text-align: left;
		white-space: nowrap;
	}
	.mega-menu-col a:hover { color: var(--color-nav-a-hover); }
	header nav .mega-menu-cta {
		flex-direction: row;
		justify-content: center;
		gap: 1rem;
		margin: var(--mega-menu-padding) calc(-1 * var(--mega-menu-padding)) calc(-1 * var(--mega-menu-padding));
		padding: 1rem var(--mega-menu-padding);
		background: var(--mega-menu-cta-bg);
	}
	header nav .mega-menu-cta a {
		margin: 0;
		padding: 0.4rem 0.9rem;
		color: var(--mega-menu-cta-color);
		font-weight: 600;
		white-space: nowrap;
	}
}


/* ── 6. FOOTER ────────────────────────────────────────────── */

footer {
	background: var(--color-footer-bg);
	color: var(--color-footer-text);
	padding-block: 3rem;
	margin-top: 4rem;
}
footer a { color: var(--color-footer-a); }
footer a:hover { color: var(--color-footer-a-hover); }
footer p { margin-bottom: 0.25em; }


/* ── 7. TOP-OF-PAGE BUTTON ────────────────────────────────── */

.top-of-page-btn {
	z-index: 100;
	position: fixed;
	right: 5%;
	bottom: 5%;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.top-of-page-btn.visible { display: flex; }
.top-of-page-btn:hover { transform: translateY(-2px); background: rgba(0, 0, 0, 0.75); }


/* ── 8. WHITELISTED UTILITY CLASSES ───────────────────────── */

/* text alignment */
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-justify { text-align: justify; }
.text-start   { text-align: start; }
.text-end     { text-align: end; }

/* text transform */
.uppercase   { text-transform: uppercase; }
.lowercase   { text-transform: lowercase; }
.capitalize  { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* font weight */
.font-thin       { font-weight: 100; }
.font-extralight { font-weight: 200; }
.font-light      { font-weight: 300; }
.font-normal     { font-weight: 400; }
.font-medium     { font-weight: 500; }
.font-semibold   { font-weight: 600; }
.font-bold       { font-weight: 700; }
.font-extrabold  { font-weight: 800; }
.font-black      { font-weight: 900; }

/* font family */
.font-sans  { font-family: var(--font-sans); }
.font-serif { font-family: var(--font-serif); }
.font-mono  { font-family: var(--font-mono); }

/* type scale (rem-based so it scales with root font-size) */
.text-3xs { font-size: 0.55rem;  line-height: 0.85rem; }
.text-2xs { font-size: 0.65rem;  line-height: 0.95rem; }
.text-xs  { font-size: 0.75rem;  line-height: 1rem; }
.text-sm  { font-size: 0.875rem; line-height: 1.25rem; }
.text-base{ font-size: 1rem;     line-height: 1.5rem; }
.text-lg  { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl  { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem;   line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem;  line-height: 2.5rem; }
.text-5xl { font-size: 3rem;     line-height: 1.1; }
.text-6xl { font-size: 3.75rem;  line-height: 1.05; }
.text-7xl { font-size: 4.5rem;   line-height: 1; }
.text-8xl { font-size: 6rem;     line-height: 1; }
.text-9xl { font-size: 8rem;     line-height: 1; }

/* spacing scale (literal px matching class names)
   Ramp: 0 2 4 6 8 10 12 16 20 24 32 40 48 56 64 80 96 120 160 200      */

/* margin (all sides) */
.m-0{margin:0} .m-2{margin:2px} .m-4{margin:4px} .m-6{margin:6px} .m-8{margin:8px}
.m-10{margin:10px} .m-12{margin:12px} .m-16{margin:16px} .m-20{margin:20px} .m-24{margin:24px}
.m-32{margin:32px} .m-40{margin:40px} .m-48{margin:48px} .m-56{margin:56px} .m-64{margin:64px}
.m-80{margin:80px} .m-96{margin:96px} .m-120{margin:120px} .m-160{margin:160px} .m-200{margin:200px}
.m-auto{margin:auto}

/* margin-x (left+right) */
.mx-0{margin-inline:0} .mx-2{margin-inline:2px} .mx-4{margin-inline:4px} .mx-6{margin-inline:6px} .mx-8{margin-inline:8px}
.mx-10{margin-inline:10px} .mx-12{margin-inline:12px} .mx-16{margin-inline:16px} .mx-20{margin-inline:20px} .mx-24{margin-inline:24px}
.mx-32{margin-inline:32px} .mx-40{margin-inline:40px} .mx-48{margin-inline:48px} .mx-56{margin-inline:56px} .mx-64{margin-inline:64px}
.mx-80{margin-inline:80px} .mx-96{margin-inline:96px} .mx-120{margin-inline:120px} .mx-160{margin-inline:160px} .mx-200{margin-inline:200px}
.mx-auto{margin-inline:auto}

/* margin-y (top+bottom) */
.my-0{margin-block:0} .my-2{margin-block:2px} .my-4{margin-block:4px} .my-6{margin-block:6px} .my-8{margin-block:8px}
.my-10{margin-block:10px} .my-12{margin-block:12px} .my-16{margin-block:16px} .my-20{margin-block:20px} .my-24{margin-block:24px}
.my-32{margin-block:32px} .my-40{margin-block:40px} .my-48{margin-block:48px} .my-56{margin-block:56px} .my-64{margin-block:64px}
.my-80{margin-block:80px} .my-96{margin-block:96px} .my-120{margin-block:120px} .my-160{margin-block:160px} .my-200{margin-block:200px}

/* margin individual sides */
.mt-0{margin-top:0} .mt-2{margin-top:2px} .mt-4{margin-top:4px} .mt-6{margin-top:6px} .mt-8{margin-top:8px}
.mt-10{margin-top:10px} .mt-12{margin-top:12px} .mt-16{margin-top:16px} .mt-20{margin-top:20px} .mt-24{margin-top:24px}
.mt-32{margin-top:32px} .mt-40{margin-top:40px} .mt-48{margin-top:48px} .mt-56{margin-top:56px} .mt-64{margin-top:64px}
.mt-80{margin-top:80px} .mt-96{margin-top:96px} .mt-120{margin-top:120px} .mt-160{margin-top:160px} .mt-200{margin-top:200px}

.mb-0{margin-bottom:0} .mb-2{margin-bottom:2px} .mb-4{margin-bottom:4px} .mb-6{margin-bottom:6px} .mb-8{margin-bottom:8px}
.mb-10{margin-bottom:10px} .mb-12{margin-bottom:12px} .mb-16{margin-bottom:16px} .mb-20{margin-bottom:20px} .mb-24{margin-bottom:24px}
.mb-32{margin-bottom:32px} .mb-40{margin-bottom:40px} .mb-48{margin-bottom:48px} .mb-56{margin-bottom:56px} .mb-64{margin-bottom:64px}
.mb-80{margin-bottom:80px} .mb-96{margin-bottom:96px} .mb-120{margin-bottom:120px} .mb-160{margin-bottom:160px} .mb-200{margin-bottom:200px}

.ml-0{margin-left:0} .ml-2{margin-left:2px} .ml-4{margin-left:4px} .ml-6{margin-left:6px} .ml-8{margin-left:8px}
.ml-10{margin-left:10px} .ml-12{margin-left:12px} .ml-16{margin-left:16px} .ml-20{margin-left:20px} .ml-24{margin-left:24px}
.ml-32{margin-left:32px} .ml-40{margin-left:40px} .ml-48{margin-left:48px} .ml-56{margin-left:56px} .ml-64{margin-left:64px}
.ml-80{margin-left:80px} .ml-96{margin-left:96px} .ml-120{margin-left:120px} .ml-160{margin-left:160px} .ml-200{margin-left:200px}
.ml-auto{margin-left:auto}

.mr-0{margin-right:0} .mr-2{margin-right:2px} .mr-4{margin-right:4px} .mr-6{margin-right:6px} .mr-8{margin-right:8px}
.mr-10{margin-right:10px} .mr-12{margin-right:12px} .mr-16{margin-right:16px} .mr-20{margin-right:20px} .mr-24{margin-right:24px}
.mr-32{margin-right:32px} .mr-40{margin-right:40px} .mr-48{margin-right:48px} .mr-56{margin-right:56px} .mr-64{margin-right:64px}
.mr-80{margin-right:80px} .mr-96{margin-right:96px} .mr-120{margin-right:120px} .mr-160{margin-right:160px} .mr-200{margin-right:200px}
.mr-auto{margin-right:auto}

/* padding (all sides) */
.p-0{padding:0} .p-2{padding:2px} .p-4{padding:4px} .p-6{padding:6px} .p-8{padding:8px}
.p-10{padding:10px} .p-12{padding:12px} .p-16{padding:16px} .p-20{padding:20px} .p-24{padding:24px}
.p-32{padding:32px} .p-40{padding:40px} .p-48{padding:48px} .p-56{padding:56px} .p-64{padding:64px}
.p-80{padding:80px} .p-96{padding:96px} .p-120{padding:120px} .p-160{padding:160px} .p-200{padding:200px}

/* padding-x */
.px-0{padding-inline:0} .px-2{padding-inline:2px} .px-4{padding-inline:4px} .px-6{padding-inline:6px} .px-8{padding-inline:8px}
.px-10{padding-inline:10px} .px-12{padding-inline:12px} .px-16{padding-inline:16px} .px-20{padding-inline:20px} .px-24{padding-inline:24px}
.px-32{padding-inline:32px} .px-40{padding-inline:40px} .px-48{padding-inline:48px} .px-56{padding-inline:56px} .px-64{padding-inline:64px}
.px-80{padding-inline:80px} .px-96{padding-inline:96px} .px-120{padding-inline:120px} .px-160{padding-inline:160px} .px-200{padding-inline:200px}

/* padding-y */
.py-0{padding-block:0} .py-2{padding-block:2px} .py-4{padding-block:4px} .py-6{padding-block:6px} .py-8{padding-block:8px}
.py-10{padding-block:10px} .py-12{padding-block:12px} .py-16{padding-block:16px} .py-20{padding-block:20px} .py-24{padding-block:24px}
.py-32{padding-block:32px} .py-40{padding-block:40px} .py-48{padding-block:48px} .py-56{padding-block:56px} .py-64{padding-block:64px}
.py-80{padding-block:80px} .py-96{padding-block:96px} .py-120{padding-block:120px} .py-160{padding-block:160px} .py-200{padding-block:200px}

/* padding individual sides */
.pt-0{padding-top:0} .pt-2{padding-top:2px} .pt-4{padding-top:4px} .pt-6{padding-top:6px} .pt-8{padding-top:8px}
.pt-10{padding-top:10px} .pt-12{padding-top:12px} .pt-16{padding-top:16px} .pt-20{padding-top:20px} .pt-24{padding-top:24px}
.pt-32{padding-top:32px} .pt-40{padding-top:40px} .pt-48{padding-top:48px} .pt-56{padding-top:56px} .pt-64{padding-top:64px}
.pt-80{padding-top:80px} .pt-96{padding-top:96px} .pt-120{padding-top:120px} .pt-160{padding-top:160px} .pt-200{padding-top:200px}

.pb-0{padding-bottom:0} .pb-2{padding-bottom:2px} .pb-4{padding-bottom:4px} .pb-6{padding-bottom:6px} .pb-8{padding-bottom:8px}
.pb-10{padding-bottom:10px} .pb-12{padding-bottom:12px} .pb-16{padding-bottom:16px} .pb-20{padding-bottom:20px} .pb-24{padding-bottom:24px}
.pb-32{padding-bottom:32px} .pb-40{padding-bottom:40px} .pb-48{padding-bottom:48px} .pb-56{padding-bottom:56px} .pb-64{padding-bottom:64px}
.pb-80{padding-bottom:80px} .pb-96{padding-bottom:96px} .pb-120{padding-bottom:120px} .pb-160{padding-bottom:160px} .pb-200{padding-bottom:200px}

.pl-0{padding-left:0} .pl-2{padding-left:2px} .pl-4{padding-left:4px} .pl-6{padding-left:6px} .pl-8{padding-left:8px}
.pl-10{padding-left:10px} .pl-12{padding-left:12px} .pl-16{padding-left:16px} .pl-20{padding-left:20px} .pl-24{padding-left:24px}
.pl-32{padding-left:32px} .pl-40{padding-left:40px} .pl-48{padding-left:48px} .pl-56{padding-left:56px} .pl-64{padding-left:64px}
.pl-80{padding-left:80px} .pl-96{padding-left:96px} .pl-120{padding-left:120px} .pl-160{padding-left:160px} .pl-200{padding-left:200px}

.pr-0{padding-right:0} .pr-2{padding-right:2px} .pr-4{padding-right:4px} .pr-6{padding-right:6px} .pr-8{padding-right:8px}
.pr-10{padding-right:10px} .pr-12{padding-right:12px} .pr-16{padding-right:16px} .pr-20{padding-right:20px} .pr-24{padding-right:24px}
.pr-32{padding-right:32px} .pr-40{padding-right:40px} .pr-48{padding-right:48px} .pr-56{padding-right:56px} .pr-64{padding-right:64px}
.pr-80{padding-right:80px} .pr-96{padding-right:96px} .pr-120{padding-right:120px} .pr-160{padding-right:160px} .pr-200{padding-right:200px}