:root {
	--quasiPlaceholderVisibleTransform: translateY(calc(2.8rem + 0.07rem));

	--quasiPlaceholderHiddenTransform: translateY(0.66em);
	--quasiPlaceholderVisibleTransform: translateY(
		calc(
			calc(var(--tt-font-size-base-sm) + (var(--tt-font-size-base) * 0.5))
		)
	);

	--tt-white-main: var(--tt-caramel-0);
	--tt-black-main: var(--tt-grey-800);

	--tt-form-bg: var(--tt-neutral-ui-lighterest);
	--tt-formwhite: var(--tt-neutral-ui-0);
	--alpha: 1;

	--tt-radio-bg: var(--tt-neutral-ui-25);
	--tt-radio-bg-hover: var(--tt-purple-lightest);

	/* utility colors */
	--tt-highlight: #f1f44c;
	--tt-highlight-campaigns: var(--tt-mint-50);
	--alert-red: var(--tt-apple-450);
	--alert-red-dim: var(--tt-apple-525);
	--accent-button-disabled: var(--tt-mint-lightest);

	/* redefined colors as of today (14/11/2024) */
	/* tt-grey */
	--tt-grey-800: #171617;
	--tt-grey-775: #1f1e1f;
	--tt-grey-725: #262526;
	--tt-grey-700: #2f2d2f;
	--tt-grey-675: #363537;
	--tt-grey-625: #3f3e40;
	--tt-grey-600: #49474a;
	--tt-grey-575: #514f52;
	--tt-grey-525: #5b585c;
	--tt-grey-500: #636164;
	--tt-grey-475: #6d6b6e;
	--tt-grey-450: #7b777c;
	--tt-grey-400: #817d82;
	--tt-grey-375: #8b878d;
	--tt-grey-350: #949195;
	--tt-grey-300: #9f9ca0;
	--tt-grey-275: #a8a5a9;
	--tt-grey-250: #b2b0b3;
	--tt-grey-200: #bdbbbe;
	--tt-grey-175: #c7c5c7;
	--tt-grey-125: #d2d0d2;
	--tt-grey-75: #dbdadb;
	--tt-grey-50: #e6e6e6;
	--tt-grey-25: #f0f0f0;
	--tt-grey-25-rgba: rgba(240 240 240 / 0.8);
	--tt-grey-0: #fcfcfc;

	/* tt-cool-grey */
	--tt-cool-grey-800: #151617;
	--tt-cool-grey-775: #1d1e1f;
	--tt-cool-grey-725: #242527;
	--tt-cool-grey-700: #2c2e30;
	--tt-cool-grey-675: #343638;
	--tt-cool-grey-625: #3d3f41;
	--tt-cool-grey-600: #45484b;
	--tt-cool-grey-575: #4d5053;
	--tt-cool-grey-525: #575a5d;
	--tt-cool-grey-500: #5f6266;
	--tt-cool-grey-475: #686c70;
	--tt-cool-grey-450: #75797e;
	--tt-cool-grey-400: #7b7f84;
	--tt-cool-grey-375: #858a8f;
	--tt-cool-grey-350: #8e9398;
	--tt-cool-grey-300: #999da2;
	--tt-cool-grey-275: #a3a6aa;
	--tt-cool-grey-250: #aeb1b5;
	--tt-cool-grey-200: #babcbf;
	--tt-cool-grey-175: #c4c6c8;
	--tt-cool-grey-125: #cfd1d3;
	--tt-cool-grey-75: #dadbdc;
	--tt-cool-grey-50: #e6e6e7;
	--tt-cool-grey-25: #f0f0f1;
	--tt-cool-grey-0: #fcfcfc;

	/* tt-warm-grey */
	--tt-warm-grey-800: #171614;
	--tt-warm-grey-775: #201e1c;
	--tt-warm-grey-725: #272522;
	--tt-warm-grey-700: #302d2b;
	--tt-warm-grey-675: #383532;
	--tt-warm-grey-625: #413e3a;
	--tt-warm-grey-600: #4a4743;
	--tt-warm-grey-575: #534f4a;
	--tt-warm-grey-525: #5d5953;
	--tt-warm-grey-500: #65615c;
	--tt-warm-grey-475: #706b65;
	--tt-warm-grey-450: #7d7871;
	--tt-warm-grey-400: #837e77;
	--tt-warm-grey-375: #8e8881;
	--tt-warm-grey-350: #989189;
	--tt-warm-grey-300: #a39c93;
	--tt-warm-grey-275: #aca59c;
	--tt-warm-grey-250: #b8b0a6;
	--tt-warm-grey-200: #c3bbb1;
	--tt-warm-grey-175: #cbc4bd;
	--tt-warm-grey-125: #d5d0ca;
	--tt-warm-grey-75: #dedad6;
	--tt-warm-grey-50: #e8e6e3;
	--tt-warm-grey-25: #f1f0ef;
	--tt-warm-grey-0: #fcfcfc;

	/* tt-neutral-ui */
	--tt-neutral-ui-800: #060509;
	--tt-neutral-ui-775: #100e15;
	--tt-neutral-ui-725: #1b1921;
	--tt-neutral-ui-700: #28262f;
	--tt-neutral-ui-675: #35333c;
	--tt-neutral-ui-625: #423f4a;
	--tt-neutral-ui-600: #4f4d57;
	--tt-neutral-ui-575: #5b5964;
	--tt-neutral-ui-525: #696772;
	--tt-neutral-ui-500: #767480;
	--tt-neutral-ui-475: #84818d;
	--tt-neutral-ui-450: #908d98;
	--tt-neutral-ui-400: #9c9aa4;
	--tt-neutral-ui-375: #a8a6b1;
	--tt-neutral-ui-350: #b5b3bc;
	--tt-neutral-ui-300: #c0bec6;
	--tt-neutral-ui-275: #c9c7d0;
	--tt-neutral-ui-250: #d3d1d9;
	--tt-neutral-ui-200: #dbdae0;
	--tt-neutral-ui-175: #e3e2e8;
	--tt-neutral-ui-175-h: 250;
	--tt-neutral-ui-175-s: 11.54%;
	--tt-neutral-ui-175-l: 89.8%;
	--tt-neutral-ui-125: #eae9ed;
	--tt-neutral-ui-75: #f0f0f2;
	--tt-neutral-ui-50: #f5f5f6;
	--tt-neutral-ui-25: #f8f8fa;
	--tt-neutral-ui-0: #fcfcfc;

	/* tt-blue */
	--tt-blue-800: #021531;
	--tt-blue-775: #031d40;
	--tt-blue-725: #04244d;
	--tt-blue-700: #062c5d;
	--tt-blue-675: #08336a;
	--tt-blue-625: #0b3c7a;
	--tt-blue-600: #0e458b;
	--tt-blue-575: #114d99;
	--tt-blue-525: #1457aa;
	--tt-blue-500: #175fba;
	--tt-blue-475: #1a68cb;
	--tt-blue-450: #1d71db;
	--tt-blue-400: #1f7bee;
	--tt-blue-375: #3587f4;
	--tt-blue-350: #4992f5;
	--tt-blue-300: #5e9ef6;
	--tt-blue-275: #6fa8f7;
	--tt-blue-250: #82b3f8;
	--tt-blue-200: #96bff7;
	--tt-blue-175: #a7c8f7;
	--tt-blue-125: #b9d3f7;
	--tt-blue-75: #c9dcf8;
	--tt-blue-50: #dbe7f9;
	--tt-blue-25: #eaf1fa;
	--tt-blue-0: #fbfcfd;

	/* tt-purple */
	--tt-purple-800: #1a0b34;
	--tt-purple-775: #231044;
	--tt-purple-725: #2b1551;
	--tt-purple-700: #341a61;
	--tt-purple-675: #3d1f6f;
	--tt-purple-625: #472580;
	--tt-purple-600: #4d298a;
	--tt-purple-575: #5a31a0;
	--tt-purple-525: #6538b2;
	--tt-purple-500: #6e3dc2;
	--tt-purple-475: #7a44d4;
	--tt-purple-450: #8152d9;
	--tt-purple-400: #8962dc;
	--tt-purple-375: #9271df;
	--tt-purple-350: #9a7de2;
	--tt-purple-300: #a48be4;
	--tt-purple-275: #ac97e7;
	--tt-purple-250: #b6a5ea;
	--tt-purple-200: #c0b2ec;
	--tt-purple-175: #c8beed;
	--tt-purple-125: #d3cbf0;
	--tt-purple-75: #dcd6f2;
	--tt-purple-50: #e7e3f5;
	--tt-purple-25: #f0eff8;
	--tt-purple-0: #fcfbfd;

	/* tt-violet */
	--tt-violet-800: #220928;
	--tt-violet-775: #2e0e35;
	--tt-violet-725: #371240;
	--tt-violet-700: #43184d;
	--tt-violet-675: #4d1d59;
	--tt-violet-625: #592266;
	--tt-violet-600: #662875;
	--tt-violet-575: #712d81;
	--tt-violet-525: #7e3390;
	--tt-violet-500: #89389d;
	--tt-violet-475: #973fac;
	--tt-violet-450: #a244b9;
	--tt-violet-400: #b04bc9;
	--tt-violet-375: #be51d9;
	--tt-violet-350: #c75ee1;
	--tt-violet-300: #cd72e3;
	--tt-violet-275: #d281e6;
	--tt-violet-250: #d892e9;
	--tt-violet-200: #dda4eb;
	--tt-violet-175: #e1b2ed;
	--tt-violet-125: #e6c2ef;
	--tt-violet-75: #ebd0f1;
	--tt-violet-50: #f0e0f4;
	--tt-violet-25: #f6ecf8;
	--tt-violet-0: #fdfbfd;

	/* tt-wine */
	--tt-wine-800: #27091d;
	--tt-wine-775: #340d27;
	--tt-wine-725: #3e112f;
	--tt-wine-700: #4b173a;
	--tt-wine-675: #561b43;
	--tt-wine-625: #64214d;
	--tt-wine-600: #712659;
	--tt-wine-575: #7e2b62;
	--tt-wine-525: #8c316e;
	--tt-wine-500: #993678;
	--tt-wine-475: #a73c84;
	--tt-wine-450: #b4428e;
	--tt-wine-400: #c4479b;
	--tt-wine-375: #d34ea7;
	--tt-wine-350: #e054b2;
	--tt-wine-300: #e668ba;
	--tt-wine-275: #e97ac0;
	--tt-wine-250: #eb8dc7;
	--tt-wine-200: #eca1ce;
	--tt-wine-175: #eeb0d4;
	--tt-wine-125: #f0c1dc;
	--tt-wine-75: #f2cfe3;
	--tt-wine-50: #f5dfeb;
	--tt-wine-25: #f8ecf3;
	--tt-wine-0: #fdfbfc;

	/* tt-apple */
	--tt-apple-800: #290a0e;
	--tt-apple-775: #370e14;
	--tt-apple-725: #42131a;
	--tt-apple-700: #4f1821;
	--tt-apple-675: #5b1d26;
	--tt-apple-625: #69222d;
	--tt-apple-600: #772935;
	--tt-apple-575: #842e3b;
	--tt-apple-525: #933443;
	--tt-apple-500: #a03949;
	--tt-apple-475: #b04051;
	--tt-apple-450: #bd4558;
	--tt-apple-400: #cd4c60;
	--tt-apple-375: #de5268;
	--tt-apple-350: #e26273;
	--tt-apple-300: #e57682;
	--tt-apple-275: #e7858f;
	--tt-apple-250: #e9979d;
	--tt-apple-200: #eba7ac;
	--tt-apple-175: #edb5b9;
	--tt-apple-125: #efc5c7;
	--tt-apple-75: #f1d2d3;
	--tt-apple-50: #f5e1e2;
	--tt-apple-25: #f8eded;
	--tt-apple-0: #fdfbfb;

	/* tt-mint */
	--tt-mint-800: #021c0e;
	--tt-mint-775: #012514;
	--tt-mint-725: #032e1a;
	--tt-mint-700: #033820;
	--tt-mint-675: #054026;
	--tt-mint-625: #074b2d;
	--tt-mint-600: #095634;
	--tt-mint-575: #0a5f3a;
	--tt-mint-525: #0f6a42;
	--tt-mint-500: #0e7448;
	--tt-mint-475: #138050;
	--tt-mint-450: #148a57;
	--tt-mint-400: #14965e;
	--tt-mint-375: #19a267;
	--tt-mint-350: #1bad6d;
	--tt-mint-300: #1db976;
	--tt-mint-275: #1fc47d;
	--tt-mint-250: #24d185;
	--tt-mint-200: #31dd8f;
	--tt-mint-175: #3de798;
	--tt-mint-125: #4cf4a3;
	--tt-mint-75: #6ffab1;
	--tt-mint-50: #afface;
	--tt-mint-25: #d5fbe3;
	--tt-mint-0: #f8fdfa;

	/* tt-mint-alt-2 */
	--tt-mint-alt-2-800: #0e1912;
	--tt-mint-alt-2-775: #142219;
	--tt-mint-alt-2-725: #192a20;
	--tt-mint-alt-2-700: #1f3327;
	--tt-mint-alt-2-675: #253b2e;
	--tt-mint-alt-2-625: #2d4536;
	--tt-mint-alt-2-600: #344f3f;
	--tt-mint-alt-2-575: #395846;
	--tt-mint-alt-2-525: #41624f;
	--tt-mint-alt-2-500: #476b56;
	--tt-mint-alt-2-475: #4f765f;
	--tt-mint-alt-2-450: #558067;
	--tt-mint-alt-2-400: #5d8b70;
	--tt-mint-alt-2-375: #669679;
	--tt-mint-alt-2-350: #6ca081;
	--tt-mint-alt-2-300: #74ac8b;
	--tt-mint-alt-2-275: #7bb693;
	--tt-mint-alt-2-250: #84c19d;
	--tt-mint-alt-2-200: #8ecda7;
	--tt-mint-alt-2-175: #97d7b1;
	--tt-mint-alt-2-125: #a2e3bc;
	--tt-mint-alt-2-75: #b0ebc7;
	--tt-mint-alt-2-50: #cef0db;
	--tt-mint-alt-2-25: #e4f5ea;
	--tt-mint-alt-2-0: #fafdfb;

	/* tt-caramel */
	--tt-caramel-800: #171613;
	--tt-caramel-775: #1f1e1b;
	--tt-caramel-725: #262521;
	--tt-caramel-700: #2f2e29;
	--tt-caramel-675: #37352f;
	--tt-caramel-625: #413e36;
	--tt-caramel-600: #4a483e;
	--tt-caramel-575: #535045;
	--tt-caramel-525: #5d5a4d;
	--tt-caramel-500: #666253;
	--tt-caramel-475: #706c5d;
	--tt-caramel-450: #797565;
	--tt-caramel-400: #837f6f;
	--tt-caramel-375: #8d8979;
	--tt-caramel-350: #969283;
	--tt-caramel-300: #a19d8d;
	--tt-caramel-275: #aaa697;
	--tt-caramel-250: #b5b1a1;
	--tt-caramel-200: #c1bcab;
	--tt-caramel-175: #cac6b4;
	--tt-caramel-125: #d5d1c1;
	--tt-caramel-75: #dfdbca;
	--tt-caramel-50: #eae6d7;
	--tt-caramel-25: #f4f0e3;
	--tt-caramel-0: #fefefd;

	/* === TOFFEE ==== */
	--tt-toffee-875: #272111;
	--tt-toffee-825: #302813;
	--tt-toffee-800: #392f15;
	--tt-toffee-775: #433616;
	--tt-toffee-725: #4c3e1a;
	--tt-toffee-700: #55451d;
	--tt-toffee-650: #5c4b20;
	--tt-toffee-625: #685525;
	--tt-toffee-600: #725e2a;
	--tt-toffee-550: #7c662e;
	--tt-toffee-525: #866e32;
	--tt-toffee-475: #907737;
	--tt-toffee-450: #9b803b;
	--tt-toffee-425: #a58840;
	--tt-toffee-375: #b09144;
	--tt-toffee-350: #bb9a49;
	--tt-toffee-300: #c5a34e;
	--tt-toffee-275: #d0ad52;
	--tt-toffee-250: #dbb657;
	--tt-toffee-200: #e6bf5f;
	--tt-toffee-175: #f2ca69;
	--tt-toffee-125: #f4d694;
	--tt-toffee-100: #f5e1b9;
	--tt-toffee-50: #f8ecd7;
	--tt-toffee-25: #fbf7f0;

	/* ==== PURPLES ==== */
	--tt-purple-main: var(--tt-purple-600);
	--tt-purple-main-rgb: (259, 57%, 38%);

	/* light purples */
	--tt-purple-lightish: var(--tt-purple-525);
	--tt-purple-light: var(--tt-purple-450);
	--tt-purple-lighterish: var(--tt-purple-400);
	--tt-purple-lighter: var(--tt-purple-300);
	--tt-purple-lighterer: var(--tt-purple-250);
	--tt-purple-lighterest: var(--tt-purple-125);
	--tt-purple-lightest: var(--tt-purple-25);

	/* dark purples */
	--tt-purple-darkish: var(--tt-purple-625);
	--tt-purple-dark: var(--tt-purple-675);
	--tt-purple-darkerish: var(--tt-purple-700);
	--tt-purple-darker: var(--tt-purple-725);
	--tt-purple-darkerer: var(--tt-purple-775);
	--tt-purple-darkerest: var(--tt-purple-775);
	--tt-purple-darkest: var(--tt-purple-800);

	/* ==== MINT ==== */
	--tt-mint-main: var(--tt-mint-125);
	--tt-mint-alt-2-main: var(--tt-mint-alt-2-125);

	/* light mints */
	--tt-mint-lightish: var(--tt-mint-125);
	--tt-mint-light: var(--tt-mint-75);
	--tt-mint-lighterish: var(--tt-mint-75);
	--tt-mint-lighter: var(--tt-mint-50);
	--tt-mint-lighterer: var(--tt-mint-50);
	--tt-mint-lighterest: var(--tt-mint-25);
	--tt-mint-lightest: var(--tt-mint-25);

	--tt-mint-alt-2-lightish: var(--tt-mint-alt-2-125);
	--tt-mint-alt-2-light: var(--tt-mint-alt-2-75);
	--tt-mint-alt-2-lighterish: var(--tt-mint-alt-2-75);
	--tt-mint-alt-2-lighter: var(--tt-mint-alt-2-50);
	--tt-mint-alt-2-lighterer: var(--tt-mint-alt-2-50);
	--tt-mint-alt-2-lighterest: var(--tt-mint-alt-2-25);
	--tt-mint-alt-2-lightest: var(--tt-mint-alt-2-25);

	/* dark mints */
	--tt-mint-darkish: var(--tt-mint-200);
	--tt-mint-dark: var(--tt-mint-250);
	--tt-mint-darkerish: var(--tt-mint-300);
	--tt-mint-darker: var(--tt-mint-350);
	--tt-mint-darkerer: var(--tt-mint-375);
	--tt-mint-darkerest: var(--tt-mint-400);
	--tt-mint-darkest: var(--tt-mint-450);

	--tt-mint-alt-2-darkish: var(--tt-mint-alt-2-200);
	--tt-mint-alt-2-dark: var(--tt-mint-alt-2-250);
	--tt-mint-alt-2-darkerish: var(--tt-mint-alt-2-300);
	--tt-mint-alt-2-darker: var(--tt-mint-alt-2-350);
	--tt-mint-alt-2-darkerer: var(--tt-mint-alt-2-375);
	--tt-mint-alt-2-darkerest: var(--tt-mint-alt-2-400);
	--tt-mint-alt-2-darkest: var(--tt-mint-alt-2-450);

	/* ==== GREY ==== */
	--tt-grey-main: var(--tt-grey-450);
	--tt-warm-grey-main: var(--tt-warm-grey-450);
	--tt-cool-grey-main: var(--tt-cool-grey-450);
	--tt-caramel-main: var(--tt-caramel-450);

	/* light greys */
	--tt-grey-lightish: var(--tt-grey-375);
	--tt-grey-light: var(--tt-grey-300);
	--tt-grey-lighterish: var(--tt-grey-250);
	--tt-grey-lighter: var(--tt-grey-175);
	--tt-grey-lighterer: var(--tt-grey-75);
	--tt-grey-lighterest: var(--tt-grey-50);
	--tt-grey-lightest: var(--tt-grey-25);

	--tt-warm-grey-lightish: var(--tt-warm-grey-375);
	--tt-warm-grey-light: var(--tt-warm-grey-300);
	--tt-warm-grey-lighterish: var(--tt-warm-grey-250);
	--tt-warm-grey-lighter: var(--tt-warm-grey-175);
	--tt-warm-grey-lighterer: var(--tt-warm-grey-75);
	--tt-warm-grey-lighterest: var(--tt-warm-grey-50);
	--tt-warm-grey-lightest: var(--tt-warm-grey-25);

	--tt-cool-grey-lightish: var(--tt-cool-grey-375);
	--tt-cool-grey-light: var(--tt-cool-grey-300);
	--tt-cool-grey-lighterish: var(--tt-cool-grey-250);
	--tt-cool-grey-lighter: var(--tt-cool-grey-175);
	--tt-cool-grey-lighterer: var(--tt-cool-grey-75);
	--tt-cool-grey-lighterest: var(--tt-cool-grey-50);
	--tt-cool-grey-lightest: var(--tt-cool-grey-25);

	--tt-caramel-lightish: var(--tt-caramel-375);
	--tt-caramel-light: var(--tt-caramel-300);
	--tt-caramel-lighterish: var(--tt-caramel-250);
	--tt-caramel-lighter: var(--tt-caramel-175);
	--tt-caramel-lighterer: var(--tt-caramel-75);
	--tt-caramel-lighterest: var(--tt-caramel-50);
	--tt-caramel-lightest: var(--tt-caramel-25);

	/* dark greys */
	--tt-grey-darkish: var(--tt-grey-500);
	--tt-grey-dark: var(--tt-grey-575);
	--tt-grey-darkerish: var(--tt-grey-625);
	--tt-grey-darker: var(--tt-grey-675);
	--tt-grey-darkerer: var(--tt-grey-725);
	--tt-grey-darkerest: var(--tt-grey-775);
	--tt-grey-darkest: var(--tt-grey-800);

	/* warm greys */
	--tt-warm-grey-darkish: var(--tt-warm-grey-500);
	--tt-warm-grey-dark: var(--tt-warm-grey-575);
	--tt-warm-grey-darkerish: var(--tt-warm-grey-625);
	--tt-warm-grey-darker: var(--tt-warm-grey-675);
	--tt-warm-grey-darkerer: var(--tt-warm-grey-725);
	--tt-warm-grey-darkerest: var(--tt-warm-grey-775);
	--tt-warm-grey-darkest: var(--tt-warm-grey-800);

	/* cool greys */
	--tt-cool-grey-darkish: var(--tt-cool-grey-500);
	--tt-cool-grey-dark: var(--tt-cool-grey-575);
	--tt-cool-grey-darkerish: var(--tt-cool-grey-625);
	--tt-cool-grey-darker: var(--tt-cool-grey-675);
	--tt-cool-grey-darkerer: var(--tt-cool-grey-725);
	--tt-cool-grey-darkerest: var(--tt-cool-grey-775);
	--tt-cool-grey-darkest: var(--tt-cool-grey-800);

	/* caramel */
	--tt-caramel-darkish: var(--tt-caramel-500);
	--tt-caramel-dark: var(--tt-caramel-575);
	--tt-caramel-darkerish: var(--tt-caramel-625);
	--tt-caramel-darker: var(--tt-caramel-675);
	--tt-caramel-darkerer: var(--tt-caramel-725);
	--tt-caramel-darkerest: var(--tt-caramel-775);
	--tt-caramel-darkest: var(--tt-caramel-800);

	/* ==== NEUTRAL UI ==== */
	--tt-neutral-ui-main: var(--tt-neutral-ui-450);

	/* light neutrals */
	--tt-neutral-ui-lightish: var(--tt-neutral-ui-375);
	--tt-neutral-ui-light: var(--tt-neutral-ui-300);
	--tt-neutral-ui-lighterish: var(--tt-neutral-ui-250);
	--tt-neutral-ui-lighter: var(--tt-neutral-ui-175);
	--tt-neutral-ui-lighterer: var(--tt-neutral-ui-75);
	--tt-neutral-ui-lighterest: var(--tt-neutral-ui-50);
	--tt-neutral-ui-lightest: var(--tt-neutral-ui-25);

	/* dark neutrals */
	--tt-neutral-ui-darkish: var(--tt-neutral-ui-500);
	--tt-neutral-ui-dark: var(--tt-neutral-ui-575);
	--tt-neutral-ui-darkerish: var(--tt-neutral-ui-625);
	--tt-neutral-ui-darker: var(--tt-neutral-ui-675);
	--tt-neutral-ui-darkerer: var(--tt-neutral-ui-725);
	--tt-neutral-ui-darkerest: var(--tt-neutral-ui-775);
	--tt-neutral-ui-darkest: var(--tt-neutral-ui-800);

	/* ==== VIOLET ==== */
	--tt-violet-main: var(--tt-violet-600);

	/* light violets */
	--tt-violet-lightish: var(--tt-violet-525);
	--tt-violet-light: var(--tt-violet-450);
	--tt-violet-lighterish: var(--tt-violet-400);
	--tt-violet-lighter: var(--tt-violet-300);
	--tt-violet-lighterer: var(--tt-violet-250);
	--tt-violet-lighterest: var(--tt-violet-125);
	--tt-violet-lightest: var(--tt-violet-25);

	/* dark violets */
	--tt-violet-darkish: var(--tt-violet-625);
	--tt-violet-dark: var(--tt-violet-675);
	--tt-violet-darkerish: var(--tt-violet-700);
	--tt-violet-darker: var(--tt-violet-725);
	--tt-violet-darkerer: var(--tt-violet-775);
	--tt-violet-darkerest: var(--tt-violet-775);
	--tt-violet-darkest: var(--tt-violet-800);

	/* ==== BLUE ==== */
	--tt-blue-main: var(--tt-blue-600);

	/* light blues */
	--tt-blue-lightish: var(--tt-blue-525);
	--tt-blue-light: var(--tt-blue-450);
	--tt-blue-lighterish: var(--tt-blue-400);
	--tt-blue-lighter: var(--tt-blue-300);
	--tt-blue-lighterer: var(--tt-blue-250);
	--tt-blue-lighterest: var(--tt-blue-125);
	--tt-blue-lightest: var(--tt-blue-25);

	/* dark blues */
	--tt-blue-darkish: var(--tt-blue-625);
	--tt-blue-dark: var(--tt-blue-675);
	--tt-blue-darkerish: var(--tt-blue-700);
	--tt-blue-darker: var(--tt-blue-725);
	--tt-blue-darkerer: var(--tt-blue-775);
	--tt-blue-darkerest: var(--tt-blue-775);
	--tt-blue-darkest: var(--tt-blue-800);

	/* ==== toffee ==== */
	--tt-toffee-main: var(--tt-toffee-600);

	/* light toffees */
	--tt-toffee-lightish: var(--tt-toffee-525);
	--tt-toffee-light: var(--tt-toffee-450);
	--tt-toffee-lighterish: var(--tt-toffee-400);
	--tt-toffee-lighter: var(--tt-toffee-300);
	--tt-toffee-lighterer: var(--tt-toffee-250);
	--tt-toffee-lighterest: var(--tt-toffee-125);
	--tt-toffee-lightest: var(--tt-toffee-25);

	/* dark toffees */
	--tt-toffee-darkish: var(--tt-toffee-625);
	--tt-toffee-dark: var(--tt-toffee-675);
	--tt-toffee-darkerish: var(--tt-toffee-700);
	--tt-toffee-darker: var(--tt-toffee-725);
	--tt-toffee-darkerer: var(--tt-toffee-775);
	--tt-toffee-darkerest: var(--tt-toffee-775);
	--tt-toffee-darkest: var(--tt-toffee-800);

	/* ==== APPLE ==== */
	--tt-apple-main: var(--tt-apple-600);

	/* light apples */
	--tt-apple-lightish: var(--tt-apple-525);
	--tt-apple-light: var(--tt-apple-450);
	--tt-apple-lighterish: var(--tt-apple-400);
	--tt-apple-lighter: var(--tt-apple-300);
	--tt-apple-lighterer: var(--tt-apple-250);
	--tt-apple-lighterest: var(--tt-apple-125);
	--tt-apple-lightest: var(--tt-apple-25);

	/* dark apples */
	--tt-apple-darkish: var(--tt-apple-625);
	--tt-apple-dark: var(--tt-apple-675);
	--tt-apple-darkerish: var(--tt-apple-700);
	--tt-apple-darker: var(--tt-apple-725);
	--tt-apple-darkerer: var(--tt-apple-775);
	--tt-apple-darkerest: var(--tt-apple-775);
	--tt-apple-darkest: var(--tt-apple-800);

	/* ==== WINE ==== */
	--tt-wine-main: var(--tt-wine-600);

	/* light wines */
	--tt-wine-lightish: var(--tt-wine-525);
	--tt-wine-light: var(--tt-wine-450);
	--tt-wine-lighterish: var(--tt-wine-400);
	--tt-wine-lighter: var(--tt-wine-300);
	--tt-wine-lighterer: var(--tt-wine-250);
	--tt-wine-lighterest: var(--tt-wine-125);
	--tt-wine-lightest: var(--tt-wine-25);

	/* dark wines */
	--tt-wine-darkish: var(--tt-wine-625);
	--tt-wine-dark: var(--tt-wine-675);
	--tt-wine-darkerish: var(--tt-wine-700);
	--tt-wine-darker: var(--tt-wine-725);
	--tt-wine-darkerer: var(--tt-wine-775);
	--tt-wine-darkerest: var(--tt-wine-775);
	--tt-wine-darkest: var(--tt-wine-800);

	/* peach reassignment */
	/* ==== PEACH ==== */
	--tt-peach-main: var(--tt-apple-light);

	/* dark peaches */
	--tt-peach-darkish: var(--tt-apple-lightish);
	--tt-peach-dark: var(--tt-apple-main);
	--tt-peach-darkerish: var(--tt-apple-darkish);
	--tt-peach-darker: var(--tt-apple-dark);

	--tt-peach-lightish: var(--tt-apple-lighterish);
	--tt-peach-light: var(--tt-apple-lighter);
	--tt-peach-lighterish: var(--tt-apple-lighterish);
	--tt-peach-lighter: var(--tt-apple-lighterer);
	--tt-peach-lighterer: var(--tt-apple-lightest);
	--tt-peach-lightest: var(--tt-apple-lightest);

	/* mauve reassignment */
	--tt-mauve-main: var(--tt-violet-main);

	/* light mauves */
	--tt-mauve-lightish: var(--tt-violet-525);
	--tt-mauve-light: var(--tt-violet-450);
	--tt-mauve-lighterish: var(--tt-violet-400);
	--tt-mauve-lighter: var(--tt-violet-300);
	--tt-mauve-lighterer: var(--tt-violet-200);
	--tt-mauve-lighterest: var(--tt-violet-125);
	--tt-mauve-lightest: var(--tt-violet-25);

	/* dark mauves */
	--tt-mauve-darkish: var(--tt-violet-darkish);
	--tt-mauve-dark: var(--tt-violet-dark);
	--tt-mauve-darkerish: var(--tt-violet-darkerish);
	--tt-mauve-darker: var(--tt-violet-darker);
	--tt-mauve-darkest: var(--tt-violet-darkest);

	/* === GLOBAL FONTS === */
	--base-font-family: 'DM Sans', Helvetica, 'Franklin Gothic', Arial,
		sans-serif;
	--header-font-family: 'DM Sans', Helvetica, 'Franklin Gothic', Arial,
		sans-serif;
	/* --display-font-family: 'Roca', serif; */
	/* --display-font-family: 'gelica', sans-serif; */
	--display-font-family: 'roca', Georgia, serif;

	/* Define custom properties */
	--rem-px: 16;
	/* Adjust this value if necessary */
	--max-font-scale: 1.3;
	--min-font-scale: 1.15;
	--type-steps: 9;
	--base-step-min-remvalue: 1.716;
	--base-step-max-remvalue: 1.784;

	--fw-light: 'wght' 320;
	--fw-underweight: 'wght' 360;
	--fw-normal: 'wght' 400;
	--fw-midweight: 'wght' 480;
	--fw-medium: 'wght' 520;
	--fw-semibold: 'wght' 564;
	--fw-bold: 'wght' 640;
	--fw-xbold: 'wght' 760;
	--fw-heavy: 'wght' 840;
	--fw-black: 'wght' 960;

	/* === GLOBAL CONTAINER MARGINS AND RESPONSIVENESS === */

	--tt-global-target-width: min(132rem, 100vw);
	--tt-global-max-width: calc(
		100vw - (2 * var(--tt-global-padding-left-right))
	);

	--tt-global-margin-top-bottom: 8vw;
	--tt-global-padding-left-right: 1.6rem;
	--tt-global-color: var(--tt-black-main, black);
	--tt-global-media-min-width: 108rem;
	--tt-global-media-margin-left-right: calc(
		(100vw - var(--tt-global-media-min-width)) / 2
	);
	--prose-responsive-width: min(56ch, calc(100%));

	/* GRID SETUP */
	/* Desktop */
	--tt-gutter-width: 2.4rem;

	/* Calculate the width of a single column */
	--cols-1: calc(
		(
				var(--tt-global-target-width) -
					(2 * var(--tt-global-padding-left-right)) -
					(11 * var(--tt-gutter-width))
			) / 12
	);

	/* Column widths */

	--cols-2: calc((var(--cols-1) * 2) + var(--tt-gutter-width));
	--cols-3: calc((var(--cols-1) * 3) + (2 * var(--tt-gutter-width)));
	--cols-4: calc((var(--cols-1) * 4) + (3 * var(--tt-gutter-width)));
	--cols-5: calc((var(--cols-1) * 5) + (4 * var(--tt-gutter-width)));
	--cols-6: calc((var(--cols-1) * 6) + (5 * var(--tt-gutter-width)));
	--cols-7: calc((var(--cols-1) * 7) + (6 * var(--tt-gutter-width)));
	--cols-8: calc((var(--cols-1) * 8) + (7 * var(--tt-gutter-width)));
	--cols-9: calc((var(--cols-1) * 9) + (8 * var(--tt-gutter-width)));
	--cols-10: calc((var(--cols-1) * 10) + (9 * var(--tt-gutter-width)));
	--cols-11: calc((var(--cols-1) * 11) + (10 * var(--tt-gutter-width)));
	--cols-12: var(--tt-global-target-width);

	/* ===== LINE HEIGHT SCALING ===== */
	--oversize-line-height: 1.04;
	--h1-line-height: 1.04;

	--h2-line-height: 1.04;

	--h3-line-height: 1.08;

	--h4-line-height: 1.16;

	--h5-line-height: 1.32;

	--base-sm-line-height: 1.6124;
	--base-xs-line-height: 1.6;
	--base-xxs-line-height: 1.5;
	--base-xxxs-line-height: 1.4;
	--base-line-height: 1.764em;
	--tt-global-line-height: calc(1.8 - (2 / 3) * ((1em - 1.04rem) / 7.76rem));

	/*===BOXSHADOWS===*/

	--shadow-elevation-low: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
		rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
	--shadow-elevation-medium: rgba(10, 0, 10, 0.25) 0px 13px 27px -5px,
		rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
	--shadow-elevation-high: rgba(0, 0, 0, 0.25) 0px 50px 100px -20px,
		rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
	--card-shadow: 0px 18px 36px -18px rgba(0, 0, 0, 0.1),
		0px 30px 45px -30px rgba(50, 50, 93, 0.25);
	--card-shadow-xs: 0 2px 5px -1px rgba(50, 50, 93, 0.25),
		0 1px 3px -1px rgba(0, 0, 0, 0.3);
	--card-shadow-sm: 0 6px 12px -2px rgba(50, 50, 93, 0.25),
		0 3px 7px -3px rgba(0, 0, 0, 0.3);
	--card-shadow-md: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
		0 8px 16px -8px rgba(0, 0, 0, 0.3);
	--card-shadow-lg: 0 30px 60px -12px rgba(50, 50, 93, 0.25),
		0 18px 36px -18px rgba(0, 0, 0, 0.3);
	--card-shadow-lg-inset: inset 0 30px 60px -12px rgba(50, 50, 93, 0.25),
		inset 0 18px 36px -18px rgba(0, 0, 0, 0.3);
	--card-shadow-xl: 0 50px 100px -20px rgba(50, 50, 93, 0.25),
		0 30px 60px -30px rgba(0, 0, 0, 0.3);
	--tt-checked-button: 0 0 0.25rem 0.1rem var(--tt-purple-main);
	--tt-radio-hover: 0 0 0.1rem 0 var(--tt-black-main),
		0 0 0.32rem 0.1rem var(--tt-purple-main);
	--tt-input-focus: 0 0 1.2px 0 rgba(76, 244, 163, 0.6),
		0 0 8px 0 rgba(76, 244, 163, 0.4),
		0 0 2.4px 1.6px rgba(76, 244, 163, 0.3),
		0 0 3.6px 2.4px rgba(76, 244, 163, 0.1),
		0 0 8px 4px rgba(76, 244, 163, 0.02);

	--transparent-to-black: hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0.013) 8.1%,
		hsla(0, 0%, 0%, 0.049) 15.5%, hsla(0, 0%, 0%, 0.104) 22.5%,
		hsla(0, 0%, 0%, 0.175) 29%, hsla(0, 0%, 0%, 0.259) 35.3%,
		hsla(0, 0%, 0%, 0.352) 41.2%, hsla(0, 0%, 0%, 0.45) 47.1%,
		hsla(0, 0%, 0%, 0.55) 52.9%, hsla(0, 0%, 0%, 0.648) 58.8%,
		hsla(0, 0%, 0%, 0.741) 64.7%, hsla(0, 0%, 0%, 0.825) 71%,
		hsla(0, 0%, 0%, 0.896) 77.5%, hsla(0, 0%, 0%, 0.951) 84.5%,
		hsla(0, 0%, 0%, 0.987) 91.9%, hsl(0, 0%, 0%) 100%;
	--linear-gradient-transparent-to-black: linear-gradient(
		to bottom,
		var(--transparent-to-black)
	);
	--transparent-to-white: hsla(60, 33%, 99%, 0) 0%,
		hsla(60, 33%, 99%, 0.013) 8.1%, hsla(60, 33%, 99%, 0.049) 15.5%,
		hsla(60, 33%, 99%, 0.104) 22.5%, hsla(60, 33%, 99%, 0.175) 29%,
		hsla(60, 33%, 99%, 0.259) 35.3%, hsla(60, 33%, 99%, 0.352) 41.2%,
		hsla(60, 33%, 99%, 0.45) 47.1%, hsla(60, 33%, 99%, 0.55) 52.9%,
		hsla(60, 33%, 99%, 0.648) 58.8%, hsla(60, 33%, 99%, 0.741) 64.7%,
		hsla(60, 33%, 99%, 0.825) 71%, hsla(60, 33%, 99%, 0.896) 77.5%,
		hsla(60, 33%, 99%, 0.951) 84.5%, hsla(60, 33%, 99%, 0.987) 91.9%,
		hsl(60, 33%, 99%) 100%;
	--white-to-transparent-to-white: hsla(60, 33%, 99%, 1) 0%,
		hsla(60, 33%, 99%, 0.962) 3.1%, hsla(60, 33%, 99%, 0.854) 6.3%,
		hsla(60, 33%, 99%, 0.691) 9.4%, hsla(60, 33%, 99%, 0.5) 12.5%,
		hsla(60, 33%, 99%, 0.309) 15.6%, hsla(60, 33%, 99%, 0.146) 18.8%,
		hsla(60, 33%, 99%, 0.038) 21.9%, hsla(60, 33%, 99%, 0) 25%,
		hsla(60, 33%, 99%, 0) 25%, hsla(60, 33%, 99%, 0) 75%,
		hsla(60, 33%, 99%, 0) 75%, hsla(60, 33%, 99%, 0.038) 78.1%,
		hsla(60, 33%, 99%, 0.146) 81.3%, hsla(60, 33%, 99%, 0.309) 84.4%,
		hsla(60, 33%, 99%, 0.5) 87.5%, hsla(60, 33%, 99%, 0.691) 90.6%,
		hsla(60, 33%, 99%, 0.854) 93.8%, hsla(60, 33%, 99%, 0.962) 96.9%,
		hsla(60, 33%, 99%, 1) 100%;
	--transparent-to-white-25: hsla(60, 33%, 99%, 0) 0%,
		hsla(60, 33%, 99%, 0) 75%, hsla(60, 33%, 99%, 0) 75%,
		hsla(60, 33%, 99%, 0.024) 77.5%, hsla(60, 33%, 99%, 0.095) 80%,
		hsla(60, 33%, 99%, 0.206) 82.5%, hsla(60, 33%, 99%, 0.345) 85%,
		hsla(60, 33%, 99%, 0.5) 87.5%, hsla(60, 33%, 99%, 0.655) 90%,
		hsla(60, 33%, 99%, 0.794) 92.5%, hsla(60, 33%, 99%, 0.905) 95%,
		hsla(60, 33%, 99%, 0.976) 97.5%, hsla(60, 33%, 99%, 1) 100%;

	--linear-gradient-transparent-to-white: linear-gradient(
		to bottom,
		var(--transparent-to-white)
	);

	--transparent-to-target-hsl: hsla(
				var(--target-h),
				var(--target-s),
				var(--target-l),
				0
			)
			0%,
		hsla(var(--target-h), var(--target-s), var(--target-l), 0.013) 8.1%,
		hsla(var(--target-h), var(--target-s), var(--target-l), 0.049) 15.5%,
		hsla(var(--target-h), var(--target-s), var(--target-l), 0.104) 22.5%,
		hsla(var(--target-h), var(--target-s), var(--target-l), 0.175) 29%,
		hsla(var(--target-h), var(--target-s), var(--target-l), 0.259) 35.3%,
		hsla(var(--target-h), var(--target-s), var(--target-l), 0.352) 41.2%,
		hsla(var(--target-h), var(--target-s), var(--target-l), 0.45) 47.1%,
		hsla(var(--target-h), var(--target-s), var(--target-l), 0.55) 52.9%,
		hsla(var(--target-h), var(--target-s), var(--target-l), 0.648) 58.8%,
		hsla(var(--target-h), var(--target-s), var(--target-l), 0.741) 64.7%,
		hsla(var(--target-h), var(--target-s), var(--target-l), 0.825) 71%,
		hsla(var(--target-h), var(--target-s), var(--target-l), 0.896) 77.5%,
		hsla(var(--target-h), var(--target-s), var(--target-l), 0.951) 84.5%,
		hsla(var(--target-h), var(--target-s), var(--target-l), 0.987) 91.9%,
		hsl(var(--target-h), var(--target-s), var(--target-l)) 100%;

	--linear-gradient-transparent-to-target-hsla: linear-gradient(
		to bottom,
		var(--transparent-to-target-hsl)
	);

	/* === GLOBAL CUBIC BEZIER FUNCTIONS === */
	--normal-ease-inout: cubic-bezier(0.76, 0, 0.24, 1);
	--normal-ease-in: cubic-bezier(0.6, 0.04, 0.98, 0.34);
	--normal-ease-out: cubic-bezier(0.08, 0.82, 0.17, 1);
	--fast-ease-inout: cubic-bezier(0.77, 0, 0.18, 1);
	--fast-ease-in: cubic-bezier(0.9, 0.03, 0.69, 0.22);
	--fast-ease-out: cubic-bezier(0.17, 0.84, 0.44, 1);
	--fastest-ease-inout: cubic-bezier(1, 0, 0, 1);
	--fastest-ease-in: cubic-bezier(0.95, 0.05, 0.8, 0.04);
	--fastest-ease-out: cubic-bezier(0.19, 1, 0.22, 1);
	--quick-ease: 0.32s var(--fastest-ease-inout);
	--quick-ease-in: 0.32s var(--fastest-ease-in);
	--quick-ease-out: 0.32s var(--fastest-ease-out);
	--gentle-ease-out: 0.56s var(--fast-ease-out);
	--gentle-ease: 0.56s var(--fast-ease-inout);
	--gentle-ease-in: 0.56s var(--fast-ease-in);
	--relaxed-ease: 0.8s var(--normal-ease-inout);
	--relaxed-ease-out: 0.8s var(--normal-ease-out);
	--relaxed-ease-in: 0.8s var(--normal-ease-in);

	/* 100% of the width of an element plus the width of the content div to the edge of the viewport */
	--to-edge: calc(
		100% +
			calc(
				100vw - var(--tt-global-max-width) +
					var(--tt-global-padding-left-right) * 2
			) * 0.5
	);

	--prose-paragraph-spacer: 1.7535em;
	--rounding-value: var(--spacingUnit);
	--post-title-spacing: round(0.5em, var(--rounding-value));

	--loose-content-spacer: var(--base-margin-25);
	--medium-content-spacer: var(--base-margin-15);

	--tight-content-spacer: var(--base-margin-075);
	--tightest-content-spacer: var(--base-margin-0375);
	--loose-section-spacer: var(--base-margin-10);
	--medium-section-spacer: var(--base-margin-5);
	--tight-section-spacer: var(--base-margin-2);
	/* Border radius */

	--b-rad-sm: var(--spacingUnit);
	--b-rad-md: calc(var(--spacingUnit) * 2);
	--b-rad-lg: calc(var(--spacingUnit) * 4);
	--b-rad-xl: calc(var(--spacingUnit) * 6);
	--b-rad-xxl: calc(var(--spacingUnit) * 10);
	/* Generic spacing unit shortcodes */
	--spacingUnit: 0.4rem;
	--spacer-1: calc(var(--spacingUnit) * 1);
	--spacer-2: calc(var(--spacingUnit) * 2);
	--spacer-3: calc(var(--spacingUnit) * 3);
	--spacer-4: calc(var(--spacingUnit) * 4);
	--spacer-6: calc(var(--spacingUnit) * 6);
	--spacer-8: calc(var(--spacingUnit) * 8);
	--spacer-10: calc(var(--spacingUnit) * 10);
	--spacer-12: calc(var(--spacingUnit) * 12);
	--spacer-16: calc(var(--spacingUnit) * 16);
	--spacer-20: calc(var(--spacingUnit) * 20);
	--spacer-24: calc(var(--spacingUnit) * 24);
	--spacer-32: calc(var(--spacingUnit) * 32);
	--spacer-40: calc(var(--spacingUnit) * 40);
	--spacer-48: calc(var(--spacingUnit) * 48);
	--spacer-64: calc(var(--spacingUnit) * 64);

	/* === FLOATING FORM INPUT SETUP ===*/

	--labelRestingFontSize: 16px;
	--labelFloatingHeight: 20.0938px;
	--labelFloatingTransform: translateY(16px) scale(0.8888888888888888);
	--labelRestingTransform: translateY(26px) scale(1);
	--inputFloatingPaddingTop: 36px;
	--inputFloatingMarginLeft: 16px;
	--inputFloatingMarginRight: 16px;
	--borderRadius: 8px;
	--tt-form-width: min(45.6rem, 100%);
	--tab-width: calc(var(--tt-form-width)- 0.8rem);

	--form-floating-line-height: 1.25;

	--form-floating-padding-y: 1rem;
	--form-floating-input-padding-t: 1.625rem;
	--form-floating-input-padding-b: 0.625rem;
	--form-floating-label-opacity: 0.65;
	--form-floating-label-transform: scale(0.85) translateY(-0.5rem)
		translateX(0.15rem);
	--form-floating-transition: opacity 0.1s ease-in-out,
		transform 0.1s ease-in-out;

	/* === UNIFYING MARGINS === */
	/* they are all calculated as percentages of the base font size, and round to the nearest 4px value (if supported by browser) */
	--base-margin: var(--base-margin); /* default fallback */
	--base-margin-0125: calc(var(--base-margin) * 0.125);
	--base-margin-025: calc(var(--base-margin) * 0.25);
	--base-margin-0375: calc(var(--base-margin) * 0.375);
	--base-margin-05: calc(var(--base-margin) * 0.5);
	--base-margin-075: calc(var(--base-margin) * 0.75);
	--base-margin-0875: calc(var(--base-margin) * 0.875);
	--base-margin-1075: calc(var(--base-margin) * 1.075);
	--base-margin-1125: calc(var(--base-margin) * 1.125);
	--base-margin-1175: calc(var(--base-margin) * 1.175);
	--base-margin-125: calc(var(--base-margin) * 1.25);
	--base-margin-15: calc(var(--base-margin) * 1.5);
	--base-margin-1625: calc(var(--base-margin) * 1.625);
	--base-margin-175: calc(var(--base-margin) * 1.75);
	--base-margin-2: calc(var(--base-margin) * 2);
	--base-margin-25: calc(var(--base-margin) * 2.5);
	--base-margin-3: calc(var(--base-margin) * 3);
	--base-margin-35: calc(var(--base-margin) * 3.5);
	--base-margin-4: calc(var(--base-margin) * 4);
	--base-margin-5: calc(var(--base-margin) * 5);
	--base-margin-6: calc(var(--base-margin) * 6);
	--base-margin-7: calc(var(--base-margin) * 7);
	--base-margin-8: calc(var(--base-margin) * 8);
	--base-margin-9: calc(var(--base-margin) * 9);
	--base-margin-10: calc(var(--base-margin) * 10);
	--base-margin-11: calc(var(--base-margin) * 11);
	--base-margin-12: calc(var(--base-margin) * 12);
	--input-width-std: min(calc(100% - 0.4rem), 42rem);
	--prose-width: calc((1em * 0.466) * 72);
	/* DM Sans font metrics (normalized to font size) */
	--cap-height: 0.7;
	/* 700/1000 */
	--ascent: 0.992;
	/* 992/1000 */
	--descent: 0.31;
	/* 310/1000, made positive */
	--x-height: 0.504;
	/* 504/1000 */
	--units-per-em: 1000;
	--sx-height: 504;
	--s-cap-height: 700;

	/* ROCA font metrics */
	--rocaCapHeight: 0.7;
	--rocaAscent: 0.915;
	--rocaDescent: 0.365;
	--rocaXHeight: 0.48;
	--rocaLineGap: 0;
	--rocaUnitsPerEm: 1000;
	--rocaXWidthAvg: 470;
	--line-height-adjustment: 0.6;
	/* This controls how much the line height adjusts */
	--line-height-min: 1.15;
	--line-height-max: 1.6;
	--line-height-min: 1.15;
	--line-height-max: 1.6;
	--font-size-min: 0.9;
	/* 1rem */

	--line-height-base: 1.6;
	--line-height-scale: 0.35;
	--condensed-line-height: 1.164;
	--semicondensed-line-height: calc(var(--condensed-line-height) * 1.12);
	--prose-header-line-height: calc(0.5em + var(--base-margin));
	/* User-defined value */
	/* Global Tailwind-esque variable */
	--parallax-offset: 0px;

	/* === IMAGE SIZES === */
	--tt-img-lg: 48rem;
	--tt-img-md: 32rem;
	--tt-img-sm: 24rem;
	--tt-img-xs: 16rem;
	--tt-img-thumbnail: 8.8rem;
	--tt-img-thumbnail-md: 4.8rem;
	--tt-img-thumbnail-sm: 3.2rem;
	/* clip container target heights */
	--clip-container-target-height-mobile: 32px;
	--clip-container-target-height-desktop: 64px;
	--clip-container-target-height-flat: 40px;
	--clip-container-target-height-flat-mobile: 32px;

	/* === NAV BAR SETTINGS === */
	--nav-height: 6.4rem;
	--nav-icon-height: clamp(40px, 100%, 48px);
	--nav-item-padding: 8px;
	--nav-global-padding: clamp(1.6rem, 4.8rem, 10%);
	--nav-gap: clamp(16px, 4vw, 64px);
	--header-padding: clamp(112px, 8vh, 25.6rem);
	--header-offset: calc(100% + var(--nav-height) + 40dvh);
}

/* /root */

/* For browsers that support clamp  */
@supports (font-size: clamp(1rem, 1vi, 1rem)) {
	:root {
		--tt-font-size-xxxs: clamp(1.01rem, -0.25vi + 1.11rem, 0.77rem);
		--tt-font-size-xxs: clamp(1.16rem, -0.2vi + 1.24rem, 0.96rem);
		--tt-font-size-xs: clamp(1.33rem, -0.13vi + 1.38rem, 1.2rem);
		--tt-font-size-base-sm: clamp(1.53rem, -0.03vi + 1.54rem, 1.5rem);
		--tt-font-size-base: clamp(1.76rem, 0.13vi + 1.71rem, 1.88rem);
		--tt-font-size-base-lg: clamp(2.02rem, 0.34vi + 1.89rem, 2.35rem);
		--tt-font-size-header-sm: clamp(2.33rem, 0.64vi + 2.07rem, 2.94rem);
		--tt-font-size-header: clamp(2.68rem, 1.05vi + 2.26rem, 3.67rem);
		--tt-font-size-header-lg: clamp(3.08rem, 1.59vi + 2.44rem, 4.59rem);
		--tt-font-size-display: clamp(3.54rem, 2.31vi + 2.62rem, 5.74rem);
		--tt-font-size-display-lg: clamp(4.07rem, 3.26vi + 2.77rem, 7.17rem);
		--tt-font-size-display-xl: clamp(4.68rem, 4.72vi + 2.89rem, 8.96rem);
		--tt-font-size-display-xxl: clamp(5.38rem, 6.41vi + 2.95rem, 11.21rem);
	}
}
/* For browsers that don't support clamp */
@supports not (font-size: clamp(1rem, 1vi, 1rem)) {
	:root {
		--tt-font-size-xxxs: 1.01rem;
		--tt-font-size-xxs: 1.16rem;
		--tt-font-size-xs: 1.33rem;
		--tt-font-size-base-sm: 1.53rem;
		--tt-font-size-base: 1.76rem;
		--tt-font-size-base-lg: 2.02rem;
		--tt-font-size-header-sm: 2.33rem;
		--tt-font-size-header: 2.68rem;
		--tt-font-size-header-lg: 3.08rem;
		--tt-font-size-display: 3.54rem;
		--tt-font-size-display-lg: 4.07rem;
		--tt-font-size-display-xl: 4.68rem;
		--tt-font-size-display-xxl: 5.38rem;
	}
	@media screen and (min-width: 1352px) {
		:root {
			--tt-font-size-xxxs: 0.77rem;
			--tt-font-size-xxs: 0.96rem;
			--tt-font-size-xs: 1.2rem;
			--tt-font-size-base-sm: 1.5rem;
			--tt-font-size-base: 1.88rem;
			--tt-font-size-base-lg: 2.35rem;
			--tt-font-size-header-sm: 2.94rem;
			--tt-font-size-header: 3.67rem;
			--tt-font-size-header-lg: 4.59rem;
			--tt-font-size-display: 5.74rem;
			--tt-font-size-display-lg: 7.17rem;
			--tt-font-size-display-xl: 8.96rem;
			--tt-font-size-display-xxl: 11.21rem;
		}
	}
}

@supports (--prose-paragraph-spacer: round(1.7535em, var(--spacingUnit))) {
	:root {
		--prose-paragraph-spacer: round(1.7535em, var(--spacingUnit));
	}
}

:where(body) {
	font-size: var(--tt-font-size-base, inherit);
}

/* override base-margin if round() is supported */
@supports (margin: round(1.6rem, 0.1rem)) {
	:root {
		--base-margin: round(var(--tt-font-size-base), var(--spacingUnit));

		--base-margin-0125: round(
			calc(var(--tt-font-size-base) * 0.125),
			var(--spacingUnit)
		);
		--base-margin-025: round(
			calc(var(--tt-font-size-base) * 0.25),
			var(--spacingUnit)
		);
		--base-margin-0375: round(
			calc(var(--tt-font-size-base) * 0.375),
			var(--spacingUnit)
		);
		--base-margin-05: round(
			calc(var(--tt-font-size-base) * 0.5),
			var(--spacingUnit)
		);
		--base-margin-075: round(
			calc(var(--tt-font-size-base) * 0.75),
			var(--spacingUnit)
		);
		--base-margin-0875: round(
			calc(var(--tt-font-size-base) * 0.875),
			var(--spacingUnit)
		);
		--base-margin-1075: round(
			calc(var(--tt-font-size-base) * 1.075),
			var(--spacingUnit)
		);
		--base-margin-1125: round(
			calc(var(--base-margin) * 1.125),
			var(--spacingUnit)
		);
		--base-margin-1175: round(
			calc(var(--base-margin) * 1.175),
			var(--spacingUnit)
		);
		--base-margin-125: round(
			calc(var(--base-margin) * 1.25),
			var(--spacingUnit)
		);
		--base-margin-15: round(
			calc(var(--base-margin) * 1.5),
			var(--spacingUnit)
		);
		--base-margin-1625: round(
			calc(var(--base-margin) * 1.625),
			var(--spacingUnit)
		);
		--base-margin-175: round(
			calc(var(--base-margin) * 1.75),
			var(--spacingUnit)
		);
		--base-margin-2: round(
			calc(var(--base-margin) * 2),
			var(--spacingUnit)
		);
		--base-margin-25: round(
			calc(var(--base-margin) * 2.5),
			var(--spacingUnit)
		);
		--base-margin-3: round(
			calc(var(--base-margin) * 3),
			var(--spacingUnit)
		);
		--base-margin-4: round(
			calc(var(--base-margin) * 4),
			var(--spacingUnit)
		);
		--base-margin-5: round(
			calc(var(--base-margin) * 5),
			var(--spacingUnit)
		);
	}
}

body.logged-in #user-dash::before {
	background-color: var(--tt-violet-lighter);
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	border-radius: 50%;
	height: 100%;
	transform: translateY(-50%);
}

body.logged-in #user-dash:hover::before {
	background-color: var(--tt-violet-lightish);
}

body.logged-in.admin-bar #page .site-header {
	top: 32px;
}

@media (max-width: 758px) {
	body.logged-in.admin-bar #page .site-header {
		top: 46px;
	}
	body.logged-in.admin-bar.scrolled-past-admin #page .site-header {
		top: 0;
	}
}

html {
	font-size: 62.5% !important;
	background-color: var(--tt-white-main);
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: var(--base-font-family), sans-serif;
}

*:has(em) em,
*:has(span) span {
	font-family: inherit;
}
:where(*::-webkit-scrollbar),
:where(*::-webkit-scrollbar-thumb) {
	scrollbar-width: 0.8rem;
	scrollbar-color: var(--tt-neutral-ui-lightish) var(--tt-neutral-ui-lighter);
	border-radius: 2.4rem;
}
:where(*::-webkit-scrollbar-thumb:hover) {
	cursor: pointer;
	background: var(--tt-purple-light);
}

body:not(.wp-admin) {
	max-width: 100%;
	overflow-x: hidden;
	margin: 0;
	font-optical-sizing: auto;
	font-family: 'DM Sans', sans-serif;
	font-weight: 400;
	font-variation-settings: var(--fw-normal);

	background: var(--tt-purple-main);

	-webkit-font-smoothing: revert;
	-moz-osx-font-smoothing: revert;
	font-smoothing: revert;
}

:where(body) :where(:not(:first-child):last-child) {
	margin-bottom: 0;
}

/* Paragraphs */
:where(p) {
	/* margin-top: calc(var(--base-margin) * 1.5); */
	margin-bottom: var(--base-margin);
	/* line-height: calc((var(--tt-font-size-base)) + 0.5em + 0.4ex); */
}

.oversize {
	font-size: var(--oversize-font-size);
	font-size: var(--tt-font-size-display-lg);
	line-height: var(--oversize-line-height);
}

h1:has(+ h1),
h2:has(+ h2),
h3:has(+ h3),
h4:has(+ h4),
h5:has(+ h5),
h6:has(+ h6) {
	margin-bottom: 0;
}

/* Headings */
h1 {
	margin-top: 0;
	margin-bottom: var(--base-margin-1075);
}

h2 {
	/* margin-top: calc(var(--base-margin) * 3);
   */
	margin-top: 0;
	margin-bottom: var(--base-margin-1125);
}

h3 {
	/* margin-top: calc(var(--base-margin) * 2); */
	margin-top: 0;
	margin-bottom: var(--base-margin-1125);
}

h4 {
	/* margin-top: calc(var(--base-margin) * 1.5); */
	margin-top: 0;
	margin-bottom: var(--base-margin-1175);
}

h5 {
	/* margin-top: calc(var(--base-margin) * 1); */
	margin-top: 0;
	margin-bottom: calc(var(--base-margin));
}

h6 {
	/* margin-top: calc(var(--base-margin) * 1); */
	margin-top: 0;
	margin-bottom: var(--base-margin-0875);
}

h1:has(+ .subheading-lg) {
	margin-bottom: var(--base-margin-2);
}
h1:has(+ .subheading) {
	margin-bottom: var(--base-margin-15);
}
h1:has(+ .subheading-sm) {
	margin-bottom: var(--base-margin-125);
}

.subheading-sm + .subheading-sm:not(:last-child),
.subheading + .subheading:not(:last-child) {
	margin-bottom: var(--base-margin-075);
	padding-top: 0;
}
.subheading-sm + .subheading-sm:last-child,
.subheading + .subheading:last-child {
	margin-bottom: 0;
	padding-top: 0;
}
.subheading-sm:has(+ .subheading-sm),
.subheading:has(+ .subheading) {
	margin-bottom: var(--base-margin-075);
	padding-top: 0;
}

/* Lists */
ul,
ol {
	margin-top: var(--base-margin-125);
	margin-bottom: var(--base-margin-125);
}
ul {
	padding-left: var(--base-margin-15);
	& li {
		padding-left: var(--base-margin-05);
	}
}

li {
	margin-top: var(--base-margin-025);
	margin-bottom: var(--base-margin-05);
}

/* Blockquotes */
blockquote {
	margin-top: var(--base-margin-2);
	margin-bottom: var(--base-margin-2);
	padding-left: var(--base-margin-125);
}

/* Images and figures */
/* img,
figure {
  margin-top: calc(var(--base-margin) * 2);
  margin-bottom: calc(var(--base-margin) * 2);
} */

img,
img::before {
	font-size: var(--tt-font-size-xxs);
	color: var(--tt-grey-main);
}

a:has(img) {
	text-decoration: none;
}

figcaption {
	color: var(--tt-grey-lightish);

	font-size: var(--tt-font-size-xs);
}
img:has(+ figcaption) {
	margin-bottom: var(--base-margin-05);
	border-bottom: 1px solid var(--tt-grey-lightish);
}

.inline-article-caption {
	color: var(--tt-grey-lightish);
	width: fit-content;
	margin: auto;
	position: relative;
	z-index: 1;
	text-wrap: balance;
	text-align: center;
	font-variation-settings: var(--fw-light);
	max-width: calc(
		var(--tt-font-size-base) * 0.68794326 * 66
	); /* the equivalent to 66 char width at base font size) */
}

figure {
	margin-inline-end: unset;
	margin-inline-start: unset;
	margin-block-start: unset;
	margin-block-end: unset;
	width: 100%;
	margin-bottom: var(--base-margin-15);
}

figure:has(.inline-article-caption) {
	margin-bottom: var(--base-margin-2);
}

/* Code blocks */
pre {
	margin-top: var(--base-margin-15);
	margin-bottom: var(--base-margin-15);
	white-space: pre-wrap;
	/* Allows text to wrap */
	word-wrap: break-word;
	/* Breaks long words */
	overflow-wrap: break-word;
	/* Ensures compatibility */
	max-width: 100%;
	/* Ensures pre doesn't exceed container width */
	box-sizing: border-box;
	/* Includes padding and border in width */
}

pre[text] {
	display: block;
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow-wrap: break-word;
	max-width: 100%;
}

pre[text]::selection {
	background-color: var(--tt-purple-lighter);
	color: var(--tt-white-main);
}

/* Horizontal rules */
hr {
	margin-top: var(--base-margin-4);
	margin-bottom: var(--base-margin-4);
}
hr.wp-block-separator {
	border-bottom: 1px solid var(--tt-grey-light);
}
.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
	width: min(50%, 30rem);
}

/* Nested elements */
li > ul,
li > ol {
	margin-top: var(--base-margin-05);
	margin-bottom: var(--base-margin-05);
}

/* First and last child rules */
/* ul:first-child, 
li:first-child {
  margin-top: 0;
}
ul:last-child,
li:last-child {
  margin-bottom: 0;
} */

/* Prevent margin collapse after headings */
h1 + *,
h2 + *,
h3 + *,
h4 + * {
	margin-top: 0;
}

h1 + h2 {
	margin-bottom: var(--tt-font-size-display);
}

h2 + h3 {
	margin-bottom: var(--tt-font-size-header-lg);
}

h3 + h4 {
	margin-bottom: var(--tt-font-size-header);
}

h4 + h5 {
	margin-bottom: var(--tt-font-size-header-sm);
}

h5 + h6 {
	margin-bottom: var(--tt-font-size-base-lg);
}

.tt-global-container {
	/* width: 100%; */
	max-width: var(--tt-global-target-width);

	/* margin-top: 8vw;
  margin-bottom: 8vw; */
	margin-left: auto;
	margin-right: auto;
	padding-inline: var(--tt-global-padding-left-right);
	color: var(--tt-black-main);
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 64px, 8dvh);
}

.tt-global-container > .container {
	width: 100%;
}

.site-main {
	overflow-x: clip;
}

.site-content {
	display: flex;
	flex-direction: column;
	gap: var(--medium-section-spacer);
	padding-bottom: min(calc(16vh * (var(--dvw-1) / var(--dvh-1))), 32vh);
}

.vote-message {
	color: var(--tt-grey-lightish);
	grid-column: 1 / -1;
	text-align: center;
	font-size: var(--tt-font-size-xs);
	font-size: var(--tt-font-size-xs);
}

.header-2,
.header-3,
.header-4,
.header-5 {
	font-family: var(--header-font-family), sans-serif;
	text-wrap: balance;
}

p {
	font-family: var(--base-font-family), sans-serif;

	text-wrap: pretty;
}

p + p,
ul + p,
ol + p {
	margin-top: 0;
}

.tt-prose p:has(+ p) {
	margin-bottom: var(--prose-paragraph-spacer);
}
div:has(.subheading-sm, .subheading) > p:has(+ p),
p.subheading:has(+ p.subheading),
p.subheading-sm:has(+ p.subheading-sm) {
	margin-bottom: var(--base-margin-075);
}

p + p:last-child {
	margin-bottom: 0;
}

p:has(+ .inline-article-img) {
	margin-bottom: calc(var(--prose-paragraph-spacer) + var(--base-margin));
}

@supports (
	margin-bottom: round(var(--prose-paragraph-spacer), var(--rounding-value))
) {
	.tt-prose p:has(+ p) {
		margin-bottom: round(
			var(--prose-paragraph-spacer),
			var(--rounding-value)
		);
	}

	p:has(+ .inline-article-img) {
		margin-bottom: round(
			calc(var(--prose-paragraph-spacer) + var(--base-margin)),
			var(--rounding-value)
		);
	}
}
h1:has(.post-title) {
	width: fit-content;
}
.display:not(:has(> .post-title)),
.display span.post-title {
	font-family: var(--display-font-family);
	font-weight: 800;
	display: flex;
	width: fit-content;

	line-height: 1.04999983;

	text-wrap: balance;

	/* margin-bottom: 1em; */
}
.display:not(:has(> .post-title))::before,
.display span.post-title::before {
	content: '';
	margin-bottom: -0.097em;
	display: table;
}

.display:not(:has(> .post-title))::after,
.display span.post-title::after {
	content: '';
	margin-top: -0.253em;
	display: table;
}

h1:not(.display),
.header-1:not(.display) {
	font-family: var(--header-font-family), sans-serif;
	font-weight: 400;
	font-variation-settings: var(--fw-xbold);
	font-size: var(--tt-font-size-display);
	line-height: var(--h1-line-height);

	text-wrap: balance;
	/* margin-bottom: 1em; */
	/* testing */
	font-size: var(--tt-font-size-display);
}
h1.display {
	font-size: var(--tt-font-size-display);
	text-wrap: balance;
	/* testing */
	font-size: var(--tt-font-size-display);
}
.display.oversize {
	font-size: var(--oversize-font-size);
	font-size: var(--tt-font-size-display-lg);
}

.subheading-lg,
.header {
	line-height: var(--condensed-line-height);
	text-wrap: balance;
	font-variation-settings: var(--fw-midweight);
	/* testing */
	font-size: var(--tt-font-size-header-sm);
}

.subheading,
.header-sm {
	line-height: var(--condensed-line-height);
	text-wrap: balance;
	font-variation-settings: var(--fw-midweight);
	/* testing */
	font-size: var(--tt-font-size-header-sm);
}
span.subheading {
	display: inline-block;
}

.subheading-sm,
.header-xs {
	line-height: var(--condensed-line-height);
	text-wrap: balance;
	font-variation-settings: var(--fw-midweight);
	/* testing */
	font-size: var(--tt-font-size-base-lg);
}

.subheading-xs {
	line-height: var(--condensed-line-height);
	text-wrap: balance;
	font-variation-settings: var(--fw-midweight);
	font-size: var(--tt-font-size-base);
}

.header-excerpt-sm {
	display: flex;
	flex-direction: column;
	gap: var(--spacer-2);
}

.post-excerpt {
	margin-bottom: 0;
}
.tt-prose :where(.header-1 + p),
.tt-prose :where(.header-2 + p),
.tt-prose :where(.header-3 + p),
.tt-prose :where(.header-4 + p),
.tt-prose :where(.header-5 + p),
.tt-prose :where(.header-6 + p),
.tt-prose :where(a:has(.header-1:only-child)),
.tt-prose :where(a:has(.header-2:only-child)),
.tt-prose :where(a:has(.header-3:only-child)),
.tt-prose :where(a:has(.header-4:only-child)),
.tt-prose :where(a:has(.header-5:only-child)),
.tt-prose :where(a:has(.header-6:only-child)) {
	margin-bottom: var(--prose-paragraph-spacer);
}

:where(h1 + .subheading),
:where(h1 + .subheading-lg),
:where(h1 + .subheading-sm),
:where(h1 + .subheading-xs) {
	margin-bottom: calc(var(--tt-font-size-display) * 0.5);
}

:where(h2 + .subheading),
:where(h2 + .subheading-lg),
:where(h2 + .subheading-sm),
:where(h2 + .subheading-xs) {
	margin-bottom: calc(var(--tt-font-size-header-lg) * 0.5);
}

:where(h3 + .subheading),
:where(h3 + .subheading-lg),
:where(h3 + .subheading-sm),
:where(h3 + .subheading-xs) {
	margin-bottom: calc(var(--tt-font-size-header) * 0.5);
}

:where(h4 + .subheading),
:where(h4 + .subheading-lg),
:where(h4 + .subheading-sm),
:where(h4 + .subheading-xs) {
	margin-bottom: calc(var(--tt-font-size-header-sm) * 0.5);
}

:where(h5 + .subheading),
:where(h5 + .subheading-lg),
:where(h5 + .subheading-sm),
:where(h5 + .subheading-xs) {
	margin-bottom: calc(var(--tt-font-size-base-lg) * 0.5);
}

:where(h1 + .subheading-xs + p),
:where(h2 + .subheading-xs + p),
:where(h3 + .subheading-xs + p),
:where(h4 + .subheading-xs + p),
:where(h5 + .subheading-xs + p),
:where(h1 + .subheading-sm + p),
:where(h2 + .subheading-sm + p),
:where(h3 + .subheading-sm + p),
:where(h4 + .subheading-sm + p),
:where(h5 + .subheading-sm + p),
:where(h1 + .subheading-lg + p),
:where(h2 + .subheading-lg + p),
:where(h3 + .subheading-lg + p),
:where(h4 + .subheading-lg + p),
:where(h5 + .subheading-lg + p),
:where(h1 + .subheading + p),
:where(h2 + .subheading + p),
:where(h3 + .subheading + p),
:where(h4 + .subheading + p),
:where(h5 + .subheading + p) {
	padding-top: 1em;
}

@media (max-width: 530px) {
	.subheading-lg {
		font-size: var(--tt-font-size-header-sm);
		font-size: var(--tt-font-size-header-sm);
		line-height: var(--h4-line-height);
	}

	.subheading-sm {
		font-size: var(--tt-font-size-base-lg);
		font-size: var(--tt-font-size-base-lg);
		line-height: var(--h5-line-height);
	}
}

h2,
.header-2 {
	font-family: var(--header-font-family), sans-serif;
	font-size: var(--tt-font-size-header-lg);

	line-height: var(--h2-line-height);
	font-weight: 400;
	/* margin-bottom: calc(var(--h2-line-height) - var(--tt-font-size-base)); */
	/* font-weight: 640; */

	font-variation-settings: var(--fw-bold);
}

.header-2.bold {
	font-variation-settings: var(--fw-black);
}

p:has(+ .header-2),
ul:has(+ .header-2),
ol:has(+ .header-2) {
	margin-bottom: 2.666em;
}

@supports (margin-bottom: round(2.666em, var(--rounding-value))) {
	p:has(+ .header-2),
	ul:has(+ .header-2),
	ol:has(+ .header-2) {
		margin-bottom: round(2.666em, var(--rounding-value));
	}
}

h3,
.header-3 {
	font-family: var(--header-font-family), sans-serif;
	font-size: var(--tt-font-size-header);

	line-height: var(--h3-line-height);
	font-weight: 400;
	/* margin-bottom: calc(var(--h3-line-height) - var(--tt-font-size-base)); */
	font-variation-settings: 'slnt' 0;
	font-variation-settings: var(--fw-medium);

	color: var(--tt-purple-darker);
}

p:has(+ .header-3),
ul:has(+ .header-3),
ol:has(+ .header-3) {
	margin-bottom: 2.333em;
}

@supports (margin-bottom: round(2.333em, var(--rounding-value))) {
	p:has(+ .header-3),
	ul:has(+ .header-3),
	ol:has(+ .header-3) {
		margin-bottom: round(2.333em, var(--rounding-value));
	}
}

/* *:first-child {
	margin-top: 0;
} */

:where(p:only-child),
:where(h1:only-child),
:where(h2:only-child),
:where(h3:only-child),
:where(h4:only-child),
:where(h5:only-child),
:where(h6:only-child) {
	margin: 0;
}

h4,
.header-4 {
	font-family: var(--header-font-family), sans-serif;
	font-size: var(--tt-font-size-header-sm);

	line-height: var(--h4-line-height);
	font-weight: 400;
	font-variation-settings: 'slnt' 0;
	font-variation-settings: var(--fw-medium);

	/* margin-bottom: calc(var(--h4-line-height) - var(--tt-font-size-base)); */
}

p:has(+ .header-4),
ul:has(+ .header-4),
ol:has(+ .header-4) {
	margin-bottom: 2em;
}

@supports (margin-bottom: round(2em, var(--rounding-value))) {
	p:has(+ .header-4),
	ul:has(+ .header-4),
	ol:has(+ .header-4) {
		margin-bottom: round(2em, var(--rounding-value));
	}
}

h5,
.header-5 {
	font-family: var(--header-font-family), sans-serif;
	font-size: var(--tt-font-size-base-lg);
	font-weight: 400;
	line-height: var(--h5-line-height);
	font-variation-settings: 'slnt' 0;
	font-variation-settings: var(--fw-normal);

	/* margin-bottom: calc(var(--h5-line-height) - var(--tt-font-size-base)); */
	/* color: var(--tt-mauve-main); */
}

p:has(+ .header-5),
ul:has(+ .header-5),
ol:has(+ .header-5) {
	margin-bottom: var(--base-margin-2);
}

@supports (margin-bottom: round(2em, var(--rounding-value))) {
	p:has(+ .header-5),
	ul:has(+ .header-5),
	ol:has(+ .header-5) {
		margin-bottom: round(2em, var(--rounding-value));
	}
}

h6,
.header-6 {
	font-size: var(--tt-font-size-base);
	line-height: var(--h5-line-height);
	text-wrap: balance;
	font-weight: 400;
	font-family: var(--header-font-family), sans-serif;
	font-variation-settings: 'slnt' 0;
	font-variation-settings: var(--fw-bold);

	/* margin-bottom: 0; */
}

p:has(+ .header-6),
ul:has(+ .header-6),
ol:has(+ .header-6) {
	margin-bottom: var(--base-margin-2);
}

@supports (margin-bottom: round(2em, var(--rounding-value))) {
	p:has(+ .header-6),
	ul:has(+ .header-6),
	ol:has(+ .header-6) {
		margin-bottom: 2em;
	}
}
strong,
b {
	font-variation-settings: var(--fw-bold);
}

em {
	font-variation-settings: 'slnt' -1;
}

.header-sm.entry-title {
	font-variation-settings: var(--fw-semibold);
}

.base {
	font-size: var(--tt-font-size-base);

	line-height: var(--base-line-height);
	font-family: var(--base-font-family), sans-serif;
}

.base-sm {
	font-size: var(--tt-font-size-base-sm);
	line-height: var(--base-sm-line-height);

	text-wrap: pretty;
	font-family: var(--base-font-family), sans-serif;
}

.base-xs {
	font-size: var(--tt-font-size-xs);

	line-height: var(--base-sm-line-height);

	text-wrap: pretty;
	font-family: var(--base-font-family), sans-serif;
}

.base-xxs {
	font-size: var(--tt-font-size-xxs);
	line-height: var(--base-xxs-line-height);
	text-wrap: pretty;
}

.base-xxxs {
	font-size: var(--tt-font-size-xxxs);
	line-height: var(--base-xxxs-line-height);
}

.hangingpunct {
	text-indent: -0.28em;
	width: calc(100% + 0.28em);
}

blockquote.tt-quote-sm::before {
	content: '';
	-webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.53 84.45"%3E%3Cpath d="M41.28 8.49c0 5.07-12.06 11.51-12.06 21.91 0 11.2 16.62 11.65 16.62 28.98 0 14.4-10.72 24.22-21.71 24.98C10.73 85.29.01 78.04.01 58.3 0 28.7 21.98 5.04 35.38 4.1c3.48-.24 5.9 1.72 5.9 4.39Zm58.7-4.08c0 5.07-12.06 11.51-12.06 21.91 0 11.2 16.62 11.65 16.62 28.98 0 14.4-10.99 24.24-21.98 25-13.13.91-23.85-6.34-23.85-26.08C58.7 24.62 80.41.97 94.08.02c3.48-.24 5.9 1.72 5.9 4.39Z" class="d"/%3E%3C/svg%3E')
		no-repeat;
	mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.53 84.45"%3E%3Cpath d="M41.28 8.49c0 5.07-12.06 11.51-12.06 21.91 0 11.2 16.62 11.65 16.62 28.98 0 14.4-10.72 24.22-21.71 24.98C10.73 85.29.01 78.04.01 58.3 0 28.7 21.98 5.04 35.38 4.1c3.48-.24 5.9 1.72 5.9 4.39Zm58.7-4.08c0 5.07-12.06 11.51-12.06 21.91 0 11.2 16.62 11.65 16.62 28.98 0 14.4-10.99 24.24-21.98 25-13.13.91-23.85-6.34-23.85-26.08C58.7 24.62 80.41.97 94.08.02c3.48-.24 5.9 1.72 5.9 4.39Z" class="d"/%3E%3C/svg%3E')
		no-repeat;
	-webkit-mask-size: initial;
	mask-size: initial;
	display: inline-block;
	width: 1em;
	height: 1em;
	padding-right: 1em;
	background-color: var(--tt-grey-lighterer);
}

blockquote.tt-quote-lg {
	display: inline-block;
	font-size: var(--tt-font-size-base-lg);
	font-size: var(--tt-font-size-base-lg);
	font-family: var(--header-font-family), sans-serif;
	font-variation-settings:
		'slnt' -8,
		var(--fw-normal);
	margin: 2em -1.6rem;
	padding: 4rem 4rem;
	background-color: var(--tt-white-main);
	color: var(--tt-grey-dark);
	max-width: 60ch;
	line-height: 1.6em;
	box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.04);
}

blockquote.tt-quote-lg::before {
	display: inline-block;
	content: '';
	-webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.53 84.45"%3E%3Cpath d="M41.28 8.49c0 5.07-12.06 11.51-12.06 21.91 0 11.2 16.62 11.65 16.62 28.98 0 14.4-10.72 24.22-21.71 24.98C10.73 85.29.01 78.04.01 58.3 0 28.7 21.98 5.04 35.38 4.1c3.48-.24 5.9 1.72 5.9 4.39Zm58.7-4.08c0 5.07-12.06 11.51-12.06 21.91 0 11.2 16.62 11.65 16.62 28.98 0 14.4-10.99 24.24-21.98 25-13.13.91-23.85-6.34-23.85-26.08C58.7 24.62 80.41.97 94.08.02c3.48-.24 5.9 1.72 5.9 4.39Z" class="d"/%3E%3C/svg%3E')
		no-repeat;
	mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.53 84.45"%3E%3Cpath d="M41.28 8.49c0 5.07-12.06 11.51-12.06 21.91 0 11.2 16.62 11.65 16.62 28.98 0 14.4-10.72 24.22-21.71 24.98C10.73 85.29.01 78.04.01 58.3 0 28.7 21.98 5.04 35.38 4.1c3.48-.24 5.9 1.72 5.9 4.39Zm58.7-4.08c0 5.07-12.06 11.51-12.06 21.91 0 11.2 16.62 11.65 16.62 28.98 0 14.4-10.99 24.24-21.98 25-13.13.91-23.85-6.34-23.85-26.08C58.7 24.62 80.41.97 94.08.02c3.48-.24 5.9 1.72 5.9 4.39Z" class="d"/%3E%3C/svg%3E')
		no-repeat;
	-webkit-mask-size: initial;
	mask-size: initial;
	width: 24px;
	height: 24px;
	margin-right: 0.8rem;
	background-color: var(--tt-grey-light);
}

.toggle-sentinel {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
	visibility: hidden;
}

cite {
	display: flex;
	text-align: right;
	margin-top: 24px;
	font-size: var(--tt-font-size-base);
	font-size: var(--tt-font-size-base);
	top: 1em;
	color: var(--tt-grey-lightish);
	font-variation-settings: var(--fw-light);
	font-style: normal;
}

cite::before {
	display: inline;
	content: '—';
	margin-right: 0.4em;
}

blockquote.tt-quote-news {
	font-size: var(--tt-font-size-base-lg);
	font-size: var(--tt-font-size-base-lg);
	font-family: var(--header-font-family), sans-serif;
	font-variation-settings: 'slnt' 0;
	font-variation-settings: var(--fw-normal);
	background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1713 582"%3E%3Cpath d="M126 576c1-2 3-2 5-2l1 4c-3 0-5 0-6-2Zm-2 2 1-1v2h-1v-1Zm1 1-1 3v-3Zm6 1h-1v-1l1 1zm9-1v1-1Z" class="d"/%3E%3Cpath fill="%23dfdfdf" d="M669 0h1038c6 0 6 0 6 6l-1 406v5l-11-2c-3-1-4 0-5 3-2 7-5 8-13 7-3-1-6-1-7 2-2 4-4 7-8 6-2 0-2 2-3 3-3 3-6 4-10 2-4-1-8-2-12 2h-3c-6 1-12-1-17-4-3-2-7-3-10 0-3 2-6 2-10 2-5 0-11 2-17-1h-1c-5 3-11 1-16 1h-8c-7-2-15-1-22 0-5 0-10 2-14-1l-3 1c-4 3-7 1-10 0h-3c-3 5-5 1-7 0l-8-2c-3-1-7-1-10-3-4-2-8-2-11 1-5 4-6 4-12 1l-8-7c-3-1-6-2-8 2l-6 4c-6 3-13 4-18 8-2 2-5 1-7 1l-12-5c-5-2-10-3-15 0l-9 3-16 4c-2 1-4 2-6 1-4-1-7-1-9 1-4 3-7 3-11 1h-7c-7 3-16 4-24 6-7 3-13 6-15 14h-1l-4-1c-4 2-8 1-12 0-5-2-11-3-16 0-2 0-4 1-5-1s-3-2-5-2h-24c-13-2-26 1-38 1-3 0-5 2-7 3l-13 12c-6 5-13 10-22 11l-13-1c-15-1-28-4-36-17l-2-2c-7-1-12-6-18-10-3-3-6-5-10-3-6 1-9-1-12-5-6-8-15-10-23-15h-3l-6-1c-8-5-17-5-25-7l-20-5c-12-4-25-6-37-4-3 1-5 0-7-1l-8-2c-3 0-4 1-5 3-3 8-6 9-13 8-5-1-7-1-9 4-1 3-3 5-6 4l-3 2c-4 4-8 4-13 3-3-1-5-1-7 1l-4 1c-7 1-13-1-18-4-4-3-8-3-12 1l-5 1c-9 2-18-2-26 1h-1l-29-2c-11 1-22 0-33 2h-3c-3-1-6-1-8 2l-8-4c-6-2-12-2-18-5-3-1-6 0-8 2-4 4-7 4-11 1l-7-6c-4-3-6-2-10 1-2 2-5 4-9 5-3 2-7 2-10 5-5 4-9 4-14 1l-3-1c-8-3-16-6-25 0l-5 1-16 4-7 1c-4-1-7-1-10 2-2 2-5 2-8 0-4-2-8-1-11 1-8 3-17 3-24 6h-4c-3-1-6 0-9 2l-5 1-3-1c-8 3-16 5-23 9-3 1-7 2-10-1-2-2-3 0-4 2-3 6-8 7-13 4-4-2-8-1-11 2-5 5-13 5-20 6l-1-1c-4-1-7-4-12-1h-2c-5-1-11-2-15-7-3-3-8-5-12-3s-8 1-11 0c-5-1-9-1-13-4l-4-1c-8 1-16-2-23-4-6-3-12-4-18-5-5-1-9 1-13-2-6-3-13 0-18-4l-3 1c-1 1-3 1-4-1-3-3-7-5-11-6-3-1-6-2-8-5-3-2-6-2-9-1-7 3-9 2-14-3l-5-7c-2-2-4-2-7 0l-11 4c-6 0-11 0-16 4-1 1-2 0-4-1-5-1-9-5-13-8-5-3-9-5-15-3-4 1-9 2-14 1h-18V2h1V1l5-1h535Z"/%3E%3Cpath d="M129 426h8l9-1c5 2 10 1 15 0 5-2 10 0 14 3s8 7 14 8l3 1c5-4 10-4 16-4 4-1 8-2 11-5 3-1 5-1 7 1l5 6c5 6 7 7 14 4 3-1 7-1 9 1 2 3 5 4 8 5 4 1 8 3 11 6 2 2 3 2 4 1l3-1c5 4 12 1 18 4 4 2 8 1 13 2l18 4c7 3 15 6 24 5l3 1c4 3 8 3 13 4 3 1 7 2 11 0s9 0 12 3c4 5 10 6 16 7h1c5-3 8 0 12 1l1 1c7-1 15-1 20-6 3-3 7-4 11-2 5 3 10 2 13-4 1-2 2-4 4-2 3 3 7 2 10 1 7-5 15-6 23-9l3 1 5-1c3-2 6-3 9-2h4c7-3 16-3 24-6 4-2 7-3 11-1 3 2 6 1 8-1 3-2 6-3 10-2h7l16-4 6-2c8-5 16-2 24 1l3 1c5 3 10 2 14-1 3-3 7-3 10-5l10-5c3-3 5-4 9-1l7 5c4 4 7 4 11 0 3-2 6-3 8-2l18 5c3 1 6 1 8 4 2-3 5-3 8-2h3c11-2 22-1 33-2l29 2h1c8-4 17 0 26-1l5-1c4-4 8-4 12-1 6 3 11 5 18 4l4-1c2-2 4-2 7-1 5 1 9 1 13-4l3-1c4 1 5-1 6-4 3-5 4-5 9-5 8 2 10 0 13-7 1-2 2-3 5-3l8 2 7 1c12-2 25 0 37 4l20 5c8 2 17 2 25 7l6 1h3c8 5 17 7 23 15 3 4 7 6 12 4 4-1 7 1 10 3 6 5 11 10 18 11l2 2c8 13 21 16 36 17l13 1c9-1 16-6 22-11l13-12c2-1 4-3 7-3 13 0 25-3 38-1h24c2 0 4 0 5 2s3 1 5 0c5-2 11-1 16 0 4 2 8 3 12 1l4 1-19 5c0 3 3 3 3 6l-2 2-12 5-16 6-3 1-6 2c-3 1-1 2-1 4l-4 1c-9 1-18 1-26 7l-4 1c-2-1-4 0-5 1-10 6-21 7-33 4-2-1-3-1-4-4 0-3-3-3-5-3l-11-1c-2 0-3 0-4-2 0-2-2-3-4-3l-10-1-7-2-1-2c-1-2-1-4-4-5h-2c-4-2-8-2-11-6-1-2-2-5-4-6-5-4-9-3-13-1s-7 5-11 5l-3-6c-1-8-7-11-13-14-4-2-8-2-12 0-1 2-3 2-6 3-7 2-11 0-14-7l-6-8c-2-2-3-3-6-2-4 2-8 1-11-3-7-7-14-7-22-4l-13 4c-2 0-4 0-6-2-1-4-4-4-8-4l-9 1c-7 0-13 2-18 5l-15 10-11 1c-5 2-7 0-9-3-1-2-3-3-6-3l-15 1c-9 1-18-1-27 4-3 2-6 2-10 0-3-1-7-2-10-1-9 4-19 2-29 4-4 0-8 1-11 3l-5 3c-6-3-11-3-17 0l-7 1-24-2c-5 0-9 1-14 3-4 2-9 3-14 0v-1c-1-2-2-3-5-2l-4 3-8 2c-6 1-7 1-8-5l-1-1-1 1c-9 8-20 12-31 14-5 1-10 2-13 5-7 6-15 4-22 3 0-2-3-2-4-3-3-5-7-6-11-3h-3c-6 2-10 6-14 11l-12 11h-1l-7 2c-2 0-3-1-4-3l-1-1-5-4c-6-4-13-7-21-9-9-1-18-4-25-10-3-2-7-2-11-1l-28 13-4 3-4 2c-8 2-16 1-23-2-6-3-13-5-19-5h-3c-11 0-22-1-32-5-4-2-9-1-14 0-6 3-13 2-19-2-7-4-14-4-21 1l-3 2h-12l-6-2c-8-3-16-3-24-3l-9-1-17-5c-9-2-16-6-22-14l-5-6c-2-2-4-4-7-1h-14l-19 5c-10 4-19 5-29 2-4-1-9-3-13-2h-4c-2 0-4 0-6 2v1l-1 1v-33Zm1161 42c2-8 8-11 15-14 8-2 17-3 24-6 3-2 5-1 7 0 4 2 7 2 11-1 2-2 5-2 9-1l6-1 16-4 9-3c5-3 10-2 15 0l12 4c3 1 5 2 7 0 5-4 12-5 18-8 3-1 5-2 6-4 2-4 5-3 8-2l8 7c6 3 7 3 12-1 3-3 7-3 11-1 3 2 7 2 10 3l8 2c2 1 5 5 7 0h3c3 1 6 3 10-1h3c4 3 9 1 14 1 7-1 15-2 22 0h8c5 0 11 2 16-1h1c6 3 12 1 17 1 4 0 7 0 10-3 3-2 7-1 10 1 5 3 11 5 17 4h3c4-4 8-3 12-2 4 2 7 1 10-2 1-1 1-3 3-3 4 1 6-3 8-6 1-3 4-3 7-2 8 1 11 0 13-7 1-3 2-4 5-3l11 2c3 9-3 15-8 20l-3 1c-5 1-9 7-14 8h-14l-2 1-10 2c-5 1-10 6-16 1h-9l-41 5-25 3c-4-2-7-1-11-1-1 0-3 1-4-1 0-3-3-3-5-3-7 0-13-1-17-9 0-2-2-1-4-1-7 0-13 2-19 5-11 6-23 9-35 3l-6-3c-4-2-9-3-13-3-7 0-13 3-19 6-8 4-18 5-27 4-8-1-17-1-25 1-5 1-11 2-15-2h-3c-10 7-22 10-33 14-7 3-14 3-20 0s-11-3-17-2l-7 2Z" class="b"/%3E%3Cpath d="m1116 497 7 2c-5 3-6 2-7-2Z" class="d"/%3E%3Cpath d="M0 453v1-1Z" class="b"/%3E%3Cpath d="M780 461v3c0 2-1 3-3 3s-2-1-2-3l5-3Zm830-4 1 1h-1v-1Zm0 3v-1l1 1h-1Z" class="d"/%3E%3C/svg%3E')
		repeat-y center top;
	color: var(--tt-grey-dark);

	line-height: 1.6em;
	text-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.04);
	background-size: 100% auto;
	height: 240px;
}

.form-body-container .textarea-container-wrap {
	margin: auto;
	width: 100%;
}
.textarea-container-wrap:not(:last-child),
.input-container:not(:last-child),
.upload-container:not(:last-child),
.flexcol:not(:last-child) {
	margin-bottom: var(--tight-content-spacer);
	/* width: 100%; */
}
textarea:not(:placeholder-shown) + label {
	box-shadow: 0 0.2rem 0.4rem 0.2rem var(--tt-formwhite);
}
.subscribe-email-tuple .input-container:not(:last-child) {
	margin-bottom: 0;
}

div > p:has(+ .input-container),
div > p:has(+ .textarea-container-wrap),
div > p:has(+ .upload-container),
div > p:has(+ .textarea-container) {
	margin-bottom: var(--spacer-1);
}

.label-secondary.base-sm {
	color: var(--tt-grey-dark);
}

.wp-block-list li,
.wp-block-list ul,
.wp-block-list ol {
	margin-left: var(--base-margin-15);
	padding-left: var(--base-margin-05);
}

.wp-block-separator:has(.separator-svg-container) {
	border: none;
	display: contents;
	& .separator-svg-container {
		display: flex;
		flex-direction: row;
		place-content: center;
		margin-block: var(--base-margin-3) var(--base-margin-4);
		gap: var(--base-margin);
		border: none;
	}
	.separator-svg {
		width: 1.44rem;
		height: 1.44rem;
		place-content: center;
		display: flex;
		position: relative;
		& svg {
			color: var(--tt-grey-light);
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}
}
.wp-block-separator + p > span.lead-words {
	text-transform: uppercase;
	font-variation-settings: var(--fw-bold);
}

/* Specific adjustments when one header directly follows another */
:is(h1.display, h2.header-2, h3.header-3, h4.header-4, h5.header-5, h6.header-6)
	+ :is(
		h1.display,
		h2.header-2,
		h3.header-3,
		h4.header-4,
		h5.header-5,
		h6.header-6
	) {
	margin-top: 0;
}

/* Remove top margin if a header follows another header */

.supporter-level-icon,
#ruby,
#gold,
#tin,
#silver,
#bronze {
	height: 1.6rem;
	aspect-ratio: initial;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	display: block;
	width: 1.6rem;
	align-content: center;
	place-self: center;
}

#Ruby {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23c72c48' stroke='%23f19d9d' stroke-linecap='round' stroke-linejoin='round' stroke-width='0.88'%3E%3Cpath d='M21.238 9.153a1.102 1.102 0 0 1-.231.54l-8.14 10.476c-.151.19-.36.326-.596.386a.98.98 0 0 1-.473 0a1.101 1.101 0 0 1-.672-.397L2.986 9.693a1.102 1.102 0 0 1-.067-1.267l2.886-4.494l.088-.11a1.102 1.102 0 0 1 .838-.397h10.53a.937.937 0 0 1 .254 0a1.1 1.1 0 0 1 .672.474l2.886 4.494a1.1 1.1 0 0 1 .165.76'/%3E%3Cpath d='m14.2 3.458l1.574 5.695l-3.503 11.39m-.473.012L7.777 9.153l2.016-5.695M2.754 9.153h18.484'/%3E%3C/g%3E%3C/svg%3E%0A");
}

#Tin {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23a5a9a6' stroke='%23100c08' stroke-linecap='round' stroke-linejoin='round' stroke-width='0.88'%3E%3Cpath d='M21.238 9.153a1.102 1.102 0 0 1-.231.54l-8.14 10.476c-.151.19-.36.326-.596.386a.98.98 0 0 1-.473 0a1.101 1.101 0 0 1-.672-.397L2.986 9.693a1.102 1.102 0 0 1-.067-1.267l2.886-4.494l.088-.11a1.102 1.102 0 0 1 .838-.397h10.53a.937.937 0 0 1 .254 0a1.1 1.1 0 0 1 .672.474l2.886 4.494a1.1 1.1 0 0 1 .165.76'/%3E%3Cpath d='m14.2 3.458l1.574 5.695l-3.503 11.39m-.473.012L7.777 9.153l2.016-5.695M2.754 9.153h18.484'/%3E%3C/g%3E%3C/svg%3E%0A");
}

#Silver {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23c7d1da' stroke='%23382e25' stroke-linecap='round' stroke-linejoin='round' stroke-width='0.88'%3E%3Cpath d='M21.238 9.153a1.102 1.102 0 0 1-.231.54l-8.14 10.476c-.151.19-.36.326-.596.386a.98.98 0 0 1-.473 0a1.101 1.101 0 0 1-.672-.397L2.986 9.693a1.102 1.102 0 0 1-.067-1.267l2.886-4.494l.088-.11a1.102 1.102 0 0 1 .838-.397h10.53a.937.937 0 0 1 .254 0a1.1 1.1 0 0 1 .672.474l2.886 4.494a1.1 1.1 0 0 1 .165.76'/%3E%3Cpath d='m14.2 3.458l1.574 5.695l-3.503 11.39m-.473.012L7.777 9.153l2.016-5.695M2.754 9.153h18.484'/%3E%3C/g%3E%3C/svg%3E%0A");
}

#Bronze {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23b07939' stroke='%23010b13' stroke-linecap='round' stroke-linejoin='round' stroke-width='0.88'%3E%3Cpath d='M21.238 9.153a1.102 1.102 0 0 1-.231.54l-8.14 10.476c-.151.19-.36.326-.596.386a.98.98 0 0 1-.473 0a1.101 1.101 0 0 1-.672-.397L2.986 9.693a1.102 1.102 0 0 1-.067-1.267l2.886-4.494l.088-.11a1.102 1.102 0 0 1 .838-.397h10.53a.937.937 0 0 1 .254 0a1.1 1.1 0 0 1 .672.474l2.886 4.494a1.1 1.1 0 0 1 .165.76'/%3E%3Cpath d='m14.2 3.458l1.574 5.695l-3.503 11.39m-.473.012L7.777 9.153l2.016-5.695M2.754 9.153h18.484'/%3E%3C/g%3E%3C/svg%3E%0A");
}

#Gold {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23dfc76c' stroke='%235b5659' stroke-linecap='round' stroke-linejoin='round' stroke-width='0.88'%3E%3Cpath d='M21.238 9.153a1.102 1.102 0 0 1-.231.54l-8.14 10.476c-.151.19-.36.326-.596.386a.98.98 0 0 1-.473 0a1.101 1.101 0 0 1-.672-.397L2.986 9.693a1.102 1.102 0 0 1-.067-1.267l2.886-4.494l.088-.11a1.102 1.102 0 0 1 .838-.397h10.53a.937.937 0 0 1 .254 0a1.1 1.1 0 0 1 .672.474l2.886 4.494a1.1 1.1 0 0 1 .165.76'/%3E%3Cpath d='m14.2 3.458l1.574 5.695l-3.503 11.39m-.473.012L7.777 9.153l2.016-5.695M2.754 9.153h18.484'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.fs-inherit {
	font-size: inherit;
}

p.overline + h1 {
	--font-size: var(--tt-font-size-display);
}

p.overline + h2 {
	--font-size: var(--tt-font-size-header-lg);
	font-size: var(--tt-font-size-header-lg);
}

p.overline + h3 {
	--font-size: var(--tt-font-size-header);
	font-size: var(--tt-font-size-header);
}

p.overline + h4 {
	--font-size: var(--tt-font-size-header-sm);
	font-size: var(--tt-font-size-header-sm);
}

p.overline + h5 {
	--font-size: var(--tt-font-size-base-lg);
	font-size: var(--tt-font-size-base-lg);
}

/* INPUT TYPES */

input[type='checkbox'] {
	display: none;
	/* Hide default checkbox */
}

input[type='checkbox']:not(.circle-checkbox) + label::before,
label:has(input[type='checkbox']:not(.circle-checkbox))::before,
.circle-checkbox + input[type='checkbox']:not(.circle-checkbox) + label::before,
.circle-checkbox-wrapper
	+ input[type='checkbox']:not(.circle-checkbox)
	+ label::before {
	content: '';
	position: absolute;
	display: inline-flex;
	max-width: 2.4rem;
	width: 1.6rem;
	max-height: 2.4rem;
	height: 1.6rem;
	left: calc(-1.16em - 0.8rem);
	/* transform: translateY(-50%); */
	top: calc(0.682em * 0.25);
	/* testing top-aligning boxes */
	top: 0.8rem;
	transform: translateY(-50%);
	/* testing top-aligning boxes */
	--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%23000' d='M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm16 0H5v14h14z'/%3E%3C/g%3E%3C/svg%3E");
	--svg: url('../../assets/img/unchecked.svg');
	background-color: var(--tt-purple-lighter);
	-webkit-mask-image: var(--svg);
	mask-image: var(--svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	box-sizing: border-box;
	cursor: pointer;
	transition: var(--quick-ease);
}

input[type='checkbox']:checked + label::before,
label:has(input[type='checkbox']:checked)::before {
	--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M24 0v24H0V0zM12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036c-.01-.003-.019 0-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%23000' d='M5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm11.95 6.796a1 1 0 0 0-1.414-1.415l-4.95 4.95l-2.121-2.121a1 1 0 1 0-1.415 1.414l2.758 2.758a1.1 1.1 0 0 0 1.556 0z'/%3E%3C/g%3E%3C/svg%3E");
	--svg: url('../../assets/img/checked.svg');
	background-color: var(--tt-purple-light);
	transition: var(--quick-ease);
	-webkit-mask-image: var(--svg);
	mask-image: var(--svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	box-sizing: border-box;
	cursor: pointer;
}

input[type='checkbox']:checked + .circle-checkbox::before,
.circle-checkbox:has(input[type='checkbox']:checked)::before {
	--svg: url();
}

.circle-checkbox-wrapper
	~ label.checkbox-label.checkbox-label.circle-checkbox::before {
	content: '';
	display: none;
}

.circle-checkbox-wrapper:has(.svg-icon) {
	display: flex;
	width: fit-content;
	margin: 0;
}

input[type='checkbox'] + label,
label:has(input[type='checkbox']) {
	position: relative;
	left: calc(1.16em + 1.2rem);
	transition: var(--quick-ease);
	display: inline-flex;
	width: calc(100% - 1.16em - 1.2rem);
	/* align-content: center; */
	/* padding: calc(2.4rem - var(--tt-font-size-xs)) 0;
   */
}

/* default button style overrides */
button {
	border: unset;
	background-color: unset;
	padding: unset;
	cursor: pointer;
}

.awaiting-response,
button.tt-button.awaiting-response {
	position: relative;
	overflow: hidden;
	pointer-events: none;
	color: transparent;
	cursor: not-allowed;
}

.awaiting-response.tt-button-accent {
	background-color: var(--tt-mint-lightest);
}
.awaiting-response + label {
	opacity: 0;
}

.awaiting-response::before,
.tt-button[type='submit'].awaiting-response::before,
.tt-button-accent[type='submit'].awaiting-response::before {
	content: '';
	/* mask: url(../../../assets/img/ring-resize.svg); */
	height: 100%;
	width: 100%;
	z-index: 1;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 1;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	background-color: inherit;
	border-radius: inherit;
}

/* Add separate rule for elements that have content defined elsewhere */
[class*='awaiting-response']::before:not([content='']) {
	opacity: 0;
}

.awaiting-response::after {
	content: '';
	background: url(../../assets/img/spinner-awaiting-response.svg);
	height: max(1em, 2.4rem);
	width: max(1em, 2.4rem);
	z-index: 5;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 1;
	pointer-events: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.awaiting-response::content {
	opacity: 0;
}

.tt-button {
	padding: 1em 1.5em;
	max-height: 5.8rem;
	height: 5.8rem;
	box-sizing: border-box;
	border-radius: var(--b-rad-md);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border: 0;
	font-family: var(--header-font-family), sans-serif;
	font-size: var(--tt-font-size-base);
	font-size: var(--tt-font-size-base);
	position: relative;
	transition: var(--quick-ease);
	font-variation-settings: var(--fw-medium);
	box-shadow: none;
	background-color: var(--tt-grey-lighterer);
	--background-color: var(--tt-grey-light);
	outline: none;
	cursor: pointer;
}

.tt-button > * {
	cursor: pointer;
}

.tt-button:not(+ .tt-button-accent):hover,
.tt-button:not(+ .tt-button-text):hover {
	box-shadow: 0 0 1px 0 var(--tt-purple-light);
}

.tt-button:not(.tt-button-accent):target {
	box-shadow: 0 0 2px 0 var(--tt-purple-main);
}

.tt-button:not(.tt-button-accent):hover::after {
	background-position: 4px 0;
}

#bug_report_form .form-message.base-xs.error-message {
	text-align: center;
}

img.thumbnail + .upload-label-container > .upload-label {
	color: var(--tt-grey-dark);
}

img.thumbnail + .upload-label-container .input-description {
	display: none;
}

/* DYNAMIC SHADOW STYLES */

/* BUTTON STYLES */
a:has(.tt-button-accent) {
	text-decoration: none;
}

.form-nextbutton.tt-button-accent,
.tt-button-accent {
	background-color: var(--tt-mint-main);
	--background-color: var(--tt-mint-main);
	font-variation-settings: var(--fw-bold);
	/* box-shadow:
    rgba(14, 63, 126, 0.04) 0px 0px 0px 1px,
    rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px,
    rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px,
    rgba(42, 51, 70, 0.04) 0px 6px 6px -3px,
    rgba(14, 63, 126, 0.04) 0px 12px 12px -6px,
    rgba(14, 63, 126, 0.04) 0px 24px 24px -12px; */
	color: var(--tt-black-main);
	/* padding: 15.7px 16px 13.21260512px 16px; */
	font-family: var(--base-font-family);
	min-height: 5.6rem;

	font-size: var(--tt-font-size-base);
	border: none;
	border-radius: var(--b-rad-md);
	overflow: visible;
	padding: 0 var(--base-margin);
	transition: var(--quick-ease-out);
}

.tt-button-accent.form-submit {
	font-size: var(--tt-font-size-base);
}

.tt-button-accent:hover {
	background-color: var(--tt-mint-light);
	cursor: pointer;
}

.tt-button-accent:disabled {
	background: var(--accent-button-disabled);
	cursor: not-allowed;
}

.tt-button.tt-button-accent {
	width: 100%;
	text-wrap: balance;
}

.navbar-links {
	line-height: var(--condensed-line-height);
	place-content: baseline;
	display: flex;
	flex-wrap: wrap;
	height: 1em;
	margin-top: calc((4.8rem - 1.08em) / 2);
	margin-bottom: auto;
	place-items: start;
	padding-inline: 0;
}

.multi-step-form-nextbuttons:has(button + button[type='submit']) {
	display: flex;
	flex-direction: row;
	gap: var(--spacer-2);
}

.multi-step-form-nextbuttons > button + .tt-button-accent {
	width: auto;
}

.tt-button-accent.hidden {
	visibility: hidden;
}

.overline {
	letter-spacing: 0.16em;
	font-variation-settings: var(--fw-bold);
	font-family: var(--header-font-family), sans-serif;
	font-size: var(--tt-font-size-xxs);
	text-transform: uppercase;
	line-height: var(--condensed-line-height);
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
	cursor: default;
	width: fit-content;
}
.overline:not(:has(:only-child)) :last-child {
	display: inline-flex;
	line-height: var(--semicondensed-line-height);
}

.overline-lg {
	letter-spacing: 0.16em;
	font-variation-settings: var(--fw-bold);
	font-size: var(--tt-font-size-base-xs);
	font-family: var(--header-font-family), sans-serif;
	line-height: 1;
	text-transform: uppercase;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
	cursor: default;
	width: fit-content;
}

.overline-xl {
	letter-spacing: 0.2em;
	font-variation-settings: var(--fw-xbold);
	font-size: var(--tt-font-size-base-sm);
	font-family: var(--header-font-family), sans-serif;
	line-height: 1;
	text-transform: uppercase;
	margin-bottom: 1em;
	margin-top: 0;
	padding: 0;
	cursor: default;
	width: fit-content;
}

.overline + :is(h1, h2, h3, h4, h5, h6, li, ul, ol, span, a:has(.post-title)),
header:not(#masthead):not(.entry-header) {
	margin-top: 0.5em;
}
.overline:has(+ h1) {
	margin-bottom: var(--base-margin);
}

.overline.fill {
	padding: 0.75em 1em 0.6em;
	line-height: 1;
}

.overline.purple {
	color: var(--tt-purple-light);
}

.overline.violet {
	color: var(--tt-violet-light);
}

.overline.violet > :last-child {
	color: var(--tt-violet-lighterer);
}

.overline.peach {
	color: var(--tt-peach-main);
}

.overline.fill.peach {
	background-color: var(--tt-peach-main);
	color: var(--tt-white-main);
}

.overline.mauve {
	color: var(--tt-mauve-light);
}

.overline.mauve > :last-child {
	color: var(--tt-mauve-lighterer);
}

.overline.wine,
.overline.wine + header + .entry-content + a.readmore {
	color: var(--tt-wine-light);
}
.overline.apple {
	color: var(--tt-apple-light);
}

.overline.wine > :last-child {
	color: var(--tt-wine-lighterer);
}

.overline.purple > :last-child {
	color: var(--tt-purple-lighterer);
}

.overline.grey {
	color: var(--tt-grey-lightish);
}

.overline.grey > :last-child {
	color: var(--tt-grey-lighter);
}

.readmore {
	text-decoration: none;
	cursor: pointer;
	color: var(--text-colour);
	display: inline;
	--text-colour: var(--tt-blue-lighter);
	--hover-colour: var(--tt-blue-main);
	align-items: baseline;
	padding: 0;
	position: relative;
	background: none;
	border: none;
	width: fit-content;
}

.readmore:hover {
	text-decoration-skip-ink: all;
	text-decoration: underline;
	text-underline-offset: 0.125em;
	color: var(--hover-colour);

	& .readmore-arrow {
		transform: translateX(0.4em);
		color: var(--hover-colour);
	}
	& .readmore-arrow svg {
		color: var(--hover-colour);
	}
}

.readmore-arrow {
	display: inline-flex;
	place-items: center;
	color: var(--preceding-color);
	margin-left: var(--base-margin-0375);
}

.readmore-arrow svg {
	width: auto;
	height: 0.64em;
	fill: currentColor;
	color: var(--preceding-color);
}

.readmore,
.readmore-arrow,
.readmore-arrow svg {
	transition: var(--quick-ease-out);
}

/* 
.readmore::after {
	content: '';
	display: inline-block;
	vertical-align: middle;
	color: inherit;
	font-size: inherit;
	height: 1em;
	width: 1em;
	aspect-ratio: 1;
	-webkit-mask: url(../../assets/img/readmore.svg) no-repeat center;
	mask: url(../../assets/img/readmore.svg) no-repeat center;
	-webkit-mask-size: contain;
	mask-size: contain;

	background-size: contain;
	background-color: currentColor;

	transition: var(--quick-ease-out);

	position: absolute;
	left: calc(100% - 0.4ch);
	top: calc(100% - 1em);
	transform: translateY(-33%);
}

.readmore:hover::after {
	left: 100%;
} */

.readmore.clean {
	text-decoration: none;
	cursor: pointer;
	color: inherit;
	display: inline;
	justify-content: end;
	align-items: center;
	transition: var(--quick-ease);
	position: relative;
	background: none;
	border: none;
	margin: unset;
	padding: unset;
	--preceding-color: var(--tt-blue-lighter);
	color: var(--preceding-color);
}

#masthead.site-header {
	height: var(--nav-height);
	width: 100%;
	pointer-events: none;
	transition: var(--quick-ease);
}
#masthead.site-header > * {
	pointer-events: auto;
}

.footnote-citation {
	overflow-wrap: anywhere;
	hyphens: auto;
	text-wrap: balance;
}

.faq-item {
	position: relative;
	padding: var(--base-margin);
	background-color: var(--tt-purple-lightest);
	border-radius: var(--b-rad-md);
	box-sizing: content-box;
	overflow: hidden;
	box-shadow: var(--card-shadow-xs);
}

.faq-question {
	position: relative;
	cursor: pointer;
	padding-right: 3.2rem;
	margin: 0;
	transition: var(--quick-ease);
}

.faq-question:has(+ .toggle-visible.visible) {
	margin-bottom: var(--base-margin);
}

.faq-item:has(.toggle-visible.visible) .faq-question::after {
	transform: translateY(-50%) rotate(270deg);
}

.faq-question::after {
	content: '';
	position: absolute;
	font-size: inherit;
	height: 1em;
	width: 1em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112.62 63.3'%3E%3Cpath class='tt-tail' fill='currentColor' d='M80.97,0l-6.63,6.78,20.18,20.16H0v9.42h94.52l-20.17,20.17,6.63,6.77,31.64-31.65L80.97,0Z'%3E%3C/path%3E%3Cpath class='tt-head' fill='currentColor' d='M112.62,31.65l-31.65-31.65l-6.63,6.78,20.18,20.16H0v9.42h94.52l-20.17,20.17,6.63,6.77Z'%3E%3C/path%3E%3C/svg%3E")
		center/contain no-repeat;
	transition: var(--quick-ease);
	right: var(--spacer-2);
	top: 50%;
	transform: translateY(-50%) rotate(90deg);
}

.faq-item.open > .faq-question::after {
	transform: translateY(-50%) rotate(270deg);
}

.faq-answer {
	overflow: hidden;
	color: var(--tt-grey-darkish);
	height: 0;
	opacity: 0;
	transform: translateY(2em);

	transition: height var(--quick-ease);
}

.faq-answer-inner {
	opacity: 0;
	transform: translateY(50%);
	transition:
		opacity 800ms ease,
		transform var(--quick-ease),
		line-height var(--quick-ease);
	line-height: calc(var(--base-line-height) * 3);
}
.faq-item.open .faq-answer-inner {
	opacity: 1;
	transform: translateY(0);
	line-height: var(--base-line-height);
	color: var(--tt-grey-dark);
}

.faq-item.open .faq-answer {
	height: auto;
	padding-top: var(--base-margin-05);
}

mark,
.action-header {
	mask-image: url('../../assets/img/highlight-mark.svg');
	background-position: center center;
	mask-size: cover;
	font-family: inherit;
	padding: 0 0.2em 0.08em;
	mask-repeat: no-repeat;
	mask-position: center center;
	overflow: visible;
	/* margin-left: -0.4em; */
	left: -0.2em;
	margin-right: -0.2em;
	display: inline;
	color: var(--tt-black-main);
	background-color: var(--tt-highlight);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	z-index: -1;
	position: relative;
	font-variation-settings: inherit;
}

.action-header {
	background: linear-gradient(
		to bottom,
		var(--tt-mint-25),
		var(--tt-highlight-campaigns)
	);
	font-variation-settings: var(--fw-semibold);
}

.wp-block-quote {
	border-left: none;
}

.site-header {
	position: fixed;
	top: 0;
	z-index: 1000;
	background-color: transparent;
}

.tab-container.simplified-form {
	background: none;
	max-width: var(--tt-form-width);
	margin-left: auto;
	margin-right: auto;
	border-radius: 0;
}

.tab-container.simplified-form .tab {
	padding-top: 0;
	padding-bottom: 0;
}

.tab-container.simplified-form div.form-body-container {
	flex-grow: unset;
	height: auto;
}

.tab-container.simplified-form .input-container,
.tab-container.simplified-form .textarea-container {
	width: 100%;
	outline: none;
}

/* .site-header:not(.navblog) {
  /* background-color: var(--tt-purple-main); */
/* background-color: inherit; */

.navbar {
	position: relative;
	height: 6.4rem;
	max-height: 6.4rem;
	margin-bottom: 8px;
	display: flex;
	flex-direction: row;
	/* align-items: center; */
	padding: var(--nav-item-padding) var(--tt-global-padding-left-right);
	top: 0;
	width: 100%;

	justify-content: space-between;
	margin: auto;
	z-index: 1000;
	background-color: var(--tt-purple-main);
	transition: var(--quick-ease);
	font-variation-settings: var(--fw-medium);
}

body.logged-in.admin-bar #masthead.site-header:has(.navbar.inactive) {
	top: calc(1.2rem + 32px - var(--nav-height));
	/* --nav-height: 1.2rem; */
}

#masthead.site-header:has(.navbar.inactive) {
	top: calc(1.2rem - var(--nav-height));
	/* --nav-height: 1.2rem; */
}

.logo {
	/* height: calc(var(--nav-icon-height) * 0.9); */
	max-height: calc(var(--nav-icon-height) * (0.9));
	margin-bottom: 0;
	aspect-ratio: 2.28704784;
	background-color: var(--tt-white-main);
	-webkit-mask-image: var(--logo-mask-url);
	mask-image: var(--logo-mask-url);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	text-decoration: none;
	text-decoration-line: none;
}

/* #navbar::before {
	content: '';
	position: absolute;
	top: -46px;
	left: 0;
	width: 100%;
	height: 46px;
	background-color: var(--tt-purple-main);
	z-index: -1;
} */

.nav-link {
	color: var(--tt-white-main);
	text-decoration: none;
	margin-bottom: 0;
	white-space: nowrap;
	transition: var(--quick-ease-out);
}
.nav-link.sm {
	font-size: var(--tt-font-size-base-sm);
	font-size: var(--tt-font-size-base-sm);
}

.nav-link[href='../donate'] {
	--text-colour: var(--tt-mint-main);
	color: var(--text-colour);
	background-color: var(--tt-purple-main);
	padding: 0.25em 0.5em;
	border-radius: var(--b-rad-sm);
	position: relative;
}
#nav-blog-the,
#blog-word svg,
#blog-word {
	transition: var(--quick-ease-out);
}
.nav-link:not(#user-dash):hover {
	color: var(--tt-purple-lighterer);
}
#nav-blog:hover #nav-blog-the,
#nav-blog:hover #blog-word svg,
#nav-blog:hover #blog-word {
	color: var(--tt-purple-lighterer);
	fill: var(--tt-purple-lighterer);
}

.nav-link + .chevron:has(svg):hover svg {
	color: var(--tt-purple-lighterer);
}
.nav-link-wrap {
	display: flex;
	align-items: center;
	position: relative;
	gap: 0.33em;
	transition: var(--quick-ease-out);
}
.nav-link-wrap .toggle-visible-button {
	transition: var(--quick-ease-out);
}
.nav-link-wrap:has(+ .toggle-visible.visible) > .toggle-visible-button {
	transform: rotate(-540deg);
	color: var(--tt-blue-light);
}

.nav-link-wrap:has(+ .toggle-visible.hidden) {
	margin-bottom: 0;
}

.nav-link-wrap:has(+ .toggle-visible.visible) {
	margin-bottom: var(--base-margin-05);
}

.nav-link-wrap:has(+ .toggle-visible.hidden) > .toggle-visible-button {
	transform: rotate(0);
	color: var(--tt-purple-lighterer);
}

.nav-link-wrap:has(+ .toggle-visible.visible)
	> .toggle-visible-button
	.chevron
	svg {
	color: var(--tt-blue-light);
}
.chevron-container,
.chevron-container .toggle-visible {
	position: relative;
	background: var(--tt-purple-main);
	/* padding: var(--spacer-1) var(--spacer-2); */
	border-radius: var(--b-rad-sm);
	background: inherit;
}
.chevron-container .nav-link.sm {
	--text-colour: var(--tt-purple-lighterer);
	--hover-colour: var(--tt-purple-lighterer);
	color: var(--text-colour);
	font-variation-settings: var(--fw-normal);
}
.chevron-container .nav-link.sm:not(#user-dash):hover {
	color: var(--hover-colour);
}
.chevron-container .toggle-visible {
	overflow: visible;
}
.chevron-container .toggle-visible::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	height: 100%;
	width: calc(100% + 1em);
	--background-colour: var(--tt-purple-lightest);
	background-color: inherit;
	z-index: -1;
	border-radius: var(--b-rad-sm);
}

.navbar-links li.nomargin:has(.toggle-visible-button) {
	display: grid;
	place-content: center;
	grid-auto-flow: row;
}

.navbar-links li.nomargin:has(.toggle-visible-button) .toggle-visible-button,
.navbar-links li.nomargin:has(.toggle-visible-button) > a {
	place-items: center;
	display: flex;
	height: fit-content;
}

#masthead .nav-link[href='../donate']:hover {
	color: var(--text-colour);
	padding-right: 1.64em;
}

#masthead .nav-link[href='../donate']::after {
	content: '';
	display: block;
	width: 0;
	height: 0.6em;
	mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSI3LjAyIDEwIDM1Ljk3IDMxLjIiPiA8cGF0aCBmaWxsPSJjdXJyZW50Y29sb3IiIGQ9Ik0yNSw0MS4yYy0wLjA3LDAtMC4xNDEtMC4wMTUtMC4yMDctMC4wNDVDMTMuNjY1LDM2LjEwNCw3LjAxNiwyNi4xNjEsNy4wMTYsMTkuNDY2CWMwLTUuMjE5LDQuMjUyLTkuNDY2LDkuNDc5LTkuNDY2YzMuMzM5LDAsNi4xMjgsMS42ODgsOC41MDYsNS4xNTRDMjcuMzc4LDExLjY4OCwzMC4xNjcsMTAsMzMuNTA2LDEwCWM1LjIyNywwLDkuNDc5LDQuMjQ3LDkuNDc5LDkuNDY2YzAsNi42OTUtNi42NDksMTYuNjM5LTE3Ljc3NywyMS42ODlDMjUuMTQxLDQxLjE4NSwyNS4wNyw0MS4yLDI1LDQxLjJ6Ij48L3BhdGg+IDwvc3ZnPg==');
	position: absolute;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	background: var(--tt-purple-dark);
	top: 50%;
	left: calc(100% - 0.875em);
	transform: translate(-50%, -50%) scale(1.5);
	z-index: 1;
	transition: var(--quick-ease-out);
}

#masthead .nav-link[href='../donate']:hover::after {
	background: var(--text-colour);
	width: 0.64em;
	height: 0.64em;
}

.hb {
	display: none;
	height: 32px;
	color: var(--tt-white-main);
}

nav ul {
	display: flex;
	flex-direction: row;
	gap: var(--base-margin-075);
	text-decoration: none;
	list-style: none;
	margin: 0;
	align-items: center;
	align-items: baseline;
	margin: 0;
}
/* #navbar ul li.nomargin {
	background: inherit;
} */
#navbar .chevron-container {
	background: var(--tt-purple-main);
}

li > div.speech-bubble > a.blog-logo {
	position: relative;
	overflow: visible;
	display: flex;
	flex-direction: row;
	justify-content: center;
	/* align-content: center; */
	/* align-items: center; */
	margin-right: unset;
	/* margin-top: 48px; */
	/* margin-bottom: 48px; */
}

.success-message-container p {
	margin: 0.5em 0;
}

.form-submit:disabled:hover {
	cursor: not-allowed;
	background-color: var(--tt-mint-lighterer);
}

a#nav-blog > #blog-word::before {
	/* position: absolute;
	content: '';
	height: 112.5%;
	width: 100%;
	background: var(--tt-purple-light);
	mask: url(../../assets/img/the-blog-shape.svg);
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	left: 50%;
	top: 50%;
	/* border-radius: 0.4em; */
	/* transform: translatey(-37.5%) translatex(-50%) rotate(-1.6deg);
	overflow: auto;
	z-index: -1;
	transition: var(--quick-ease);
	border-radius: 0; */
}

/* a#nav-blog:hover #blog-word::before {
	background: var(--tt-purple-dark);
} */

/* a#nav-blog > #blog-word {
	color: inherit;
	padding: 0.2em 0.4em;
	position: relative;
	margin-left: 0.2em;
	z-index: 1;
} */

a#nav-blog > #blog-word {
	width: 3ch;
	transform: translateY(-12.25%);
	color: var(--tt-white-main);
}

a#nav-blog > #blog-word svg {
	fill: var(--tt-white-main);
	transition: var(--quick-ease-out);
}

a {
	color: inherit;
	text-decoration-skip-ink: all;
	text-decoration-color: var(--tt-purple-main);
	transition: all var(--quick-ease-out);
	text-decoration-thickness: 0.125em;
	text-underline-offset: calc(0.125em * 0.5);
}

a:hover {
	color: var(--tt-purple-main);
	text-underline-offset: 0.125em;
	cursor: pointer;
}

a > span:hover {
	cursor: pointer;
}

.hz-card-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--medium-section-spacer);
}

.navbar-links .chevron-container .toggle-visible .inner-content-wrap {
	position: absolute;
}

.navbar-links
	.chevron-container
	.toggle-visible
	.inner-content-wrap
	.inner-content {
	width: fit-content;
}
.chevron-container .toggle-visible::before {
	content: none;
}
.navbar-links
	.chevron-container
	.toggle-visible
	.inner-content-wrap
	.inner-content::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	height: 100%;
	width: calc(100% + 1em);
	--background-colour: var(--tt-purple-lightest);
	background-color: inherit;
	background-color: var(--tt-purple-main);
	z-index: -1;
	border-radius: var(--b-rad-sm);
}

.hz-card-display_content {
	display: flex;
	flex-direction: column;
	gap: var(--loose-content-spacer);
}

/* .news-article-card {
	display: flex;
	flex-direction: column;
	gap: var(--base-margin-05);
	text-wrap: balance;
	background: var(--tt-neutral-ui-lightest);
	padding: var(--base-margin-15);
	border-radius: var(--b-rad-md);
	box-shadow: var(--card-shadow-sm);
} */

.success-icon.mint .header-3 {
	margin-bottom: 0;
}
.post-excerpt,
.newsroom-excerpt,
.campaign-excerpt {
	color: var(--tt-grey-main);
	line-height: var(--semicondensed-line-height);
	text-wrap: balance;
}

#footer-content-container {
	display: grid;
	grid-template-rows: auto auto;
	place-content: end;
	padding: var(--nav-item-padding) 1.6rem;
	gap: var(--spacer-2);
	grid-auto-columns: 100%;
	height: 100%;
}

.footer-container.flat #footer-content-container {
	display: flex;
	max-width: var(--tt-global-target-width);
	margin-inline: auto;
}

.authorisation {
	text-align: center;
	color: var(--tt-purple-light);
}

.page-header {
	position: relative;
	color: var(--tt-white-main);
}

.page-header::before {
	position: absolute;
	content: '';

	background-color: var(--tt-purple-main);

	overflow: clip;
	height: calc(var(--tt-font-size-display) + 24dvh + var(--h1-line-height));
	z-index: -1;
}

.page-header::after {
	position: absolute;
	content: '';
	width: 100dvw;
	top: -16dvh;
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%234d2a9a' fill-opacity='1' d='M0,320L48,320C96,320,192,320,288,293.3C384,267,480,213,576,208C672,203,768,245,864,229.3C960,213,1056,139,1152,117.3C1248,96,1344,128,1392,144L1440,160L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z'%3E%3C/path%3E%3C/svg%3E");
}

.nomarker::marker {
	content: none;
}
.footer-links-subnav {
	padding-left: 0;
	font-size: var(--tt-font-size-xs);
}
.footer-links-title {
	font-variation-settings: var(--fw-semibold);
	font-size: var(--tt-font-size-xs);
}
.tt-form .input-twofield {
	display: flex;
	flex-direction: row;
	gap: 0.8rem;
	width: var(--input-width-std);
	margin: auto;
}

.input-twofield:has(.input-container) {
	padding-top: var(--spacer-1);
}

.form-header {
	font-weight: 600;
	font-variation-settings: var(--fw-bold);
	color: var(--tt-mauve-main);
	padding-bottom: var(--base-margin);
	border-bottom: 0.8px solid var(--tt-mauve-main);
	box-sizing: border-box;
	margin-bottom: 0;
}

.form-group-header > .form-header + h6.header-6 {
	margin-top: var(--spacer-6);
}

.form-group-header > h6.header-6 {
	color: var(--tt-grey-dark);
}

.form-group-header > p.base-sm {
	color: var(--tt-grey-lightish);
}

.spinner {
	--spinner-ring: url(../../assets/img/ring-resize.svg);
	--stroke-color: var(--tt-grey-lightish);
	color: transparent !important;
	mask: var(--spinner-ring);

	mask-size: 1em;

	background-size: cover;
	background-repeat: no-repeat;
	display: block;
	position: relative;
	margin: auto;
	height: 100%;
	width: 100%;
	min-width: 1.6rem;
	min-height: 1.6rem;
	opacity: 1;
	mask-repeat: no-repeat;
	mask-position: center center;
}

.progress-info {
	width: calc(100% - 0.8rem);
	margin: var(--spacer-2) auto var(--base-margin-05);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row;
	gap: var(--spacer-2);
	line-height: var(--condensed-line-height);
	position: relative;
}

.spinner::before {
	animation: loading 6s infinite ease-in-out;
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	aspect-ratio: 1;
	height: 100%;
	transform: translate(-50%, -50%);
}

fieldset.form-step {
	border: none;
	display: flex;
	position: relative;
	flex-direction: column;
	gap: 32px;
	width: 400px;
	min-width: 100%;
	transition: transform 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}

fieldset.form-step > .form-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

fieldset > .form-group > h4.header-4,
fieldset > .form-group > h5.header-5,
fieldset > .form-group > h3.header-3,
fieldset > .form-group > h2.header-2,
fieldset > .form-group > h6.header-6,
fieldset > .form-group > p.base,
fieldset > .form-group > p.base-sm,
fieldset > .form-group > p.base-xs {
	margin-bottom: 0;
	margin-top: 0;
}

.radio-grid > label:hover {
	filter: hue-rotate(-0.08turn) brightness(0.8) contrast(1.6);
}

.radio-grid > label > input[type='radio']:checked {
	background-color: var(--tt-purple-lightest);
	border: 1.6px solid var(--tt-purple-main);
}

.input-wrapper {
	transition: var(--quick-ease);
	width: 100%;
}

.form-header-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.field-group > .header-text-tuple,
.header-text-tuple {
	margin-bottom: var(--spacer-2);
	text-wrap: balance;
}

.field-group > .header-text-tuple p {
	margin-top: 0;
	margin-bottom: 0;
	text-wrap: balance;
}

.header-text-tuple *:last-child {
	color: var(--tt-grey-light);
}

.input-container {
	--container-height: 5.6rem;
}

.input-container,
.textarea-container {
	border-radius: var(--b-rad-md);
	transition: all var(--quick-ease-out);
	margin-left: auto;
	margin-right: auto;

	border: 1px solid var(--tt-neutral-ui-lighter);

	background: var(--tt-formwhite);

	width: calc(100% - var(--spacer-1));
	text-align: left;
	--font-size: var(--tt-font-size-base);
	font-size: var(--tt-font-size-base);
	--label-scale: calc(var(--tt-font-size-base-sm) / var(--tt-font-size-base));
	--gap: var(--base-margin-025);
	/* Adjust as needed */

	/* computed size on screen based on font metrics */
	--font-screen-size: calc((var(--ascent) + var(--descent)));
	/* Calculate actual text heights */
	--text-height: calc(var(--font-size) * (var(--ascent) + var(--descent)));
	--cap-size: calc(var(--font-size) * var(--cap-height));

	/* Calculate the focused label height */
	--focused-label-height: calc(var(--text-height) * var(--label-scale));
	--focused-label-cap: calc(var(--cap-size) * var(--label-scale));

	/* Calculate positioning */
	--label-top: max(
		calc(
			(var(--container-height) - var(--focused-label-height)) / 2 -
				var(--gap)
		),
		0px
	);
	--input-top: calc(
		var(--label-top) + var(--focused-label-height) + var(--gap)
	);

	position: relative;
	height: var(--container-height);
	width: var(--input-width-std);
}

.floating-textarea-label {
	transition: var(--quick-ease-out);
	pointer-events: none;
}

.floating-label {
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	/* transform-origin: left center; */
	transition: var(--quick-ease-out);
	font-size: var(--font-size);
	font-family: var(--base-font-family);
	color: var(--tt-grey-main);
	pointer-events: none;
	white-space: nowrap;
}

.quasi-placeholder.visible + * + .floating-label,
.input-container:focus-within + label,
.input-container input:focus + label,
.input-container:not(:focus-within) input:not(:placeholder-shown) + label,
.floating-label:has(+ input:focus),
.floating-label:has(+ span.quasi-placeholder.visible),
.floating-label:has(+ input:not(:placeholder-shown)),
.floating-label:has(+ span.quasi-placeholder + input:not(:placeholder-shown)) {
	top: var(--tt-font-size-base-sm);
	font-size: var(--tt-font-size-base-sm);

	color: var(--tt-grey-lighterish);
}

.quasi-placeholder.visible + * + .floating-textarea-label,
.textarea-container:not(:focus-within) textarea:not(:placeholder-shown) + label,
.textarea-container:not(:focus-within) textarea:not(:placeholder-shown) ~ label,
.textarea-container:focus-within + label,
.textarea-container:focus-within ~ label,
.textarea-container textarea:focus + label,
.textarea-container textarea:focus ~ label {
	top: calc(
		2.9rem - ((var(--tt-font-size-base) * var(--font-screen-size)) * 0.5)
	);
	font-size: var(--tt-font-size-base-sm);
	font-size: var(--tt-font-size-base-sm);
	transform: translateY(-50%);
	color: var(--tt-grey-lighterish);
	line-height: var(--condensed-line-height);
}

/* .input-container:focus-within, */
.input-container:has(input:focus),
.textarea-container:has(textarea:focus),
.subscribe-email-tuple:focus + button,
.subscribe-email-tuple:focus-within + button {
	box-shadow: var(--tt-input-focus);
}

.subscribe-email-tuple > input:focus,
.subscribe-email-tuple > input:focus-visible {
	box-shadow: none;
}

.input-container:not(:focus-within):has(
		input:not(:placeholder-shown):not(:has(.error-icon))
	),
.textarea-container:not(:focus-within):has(
		textarea:not(:placeholder-shown):not(:has(.error-icon))
	) {
	box-shadow: 0 0 3.6px 2.4px rgba(76, 244, 163, 0.16);
}

.textarea-container:focus-within {
	box-shadow: var(--tt-input-focus);
}

.input-field,
.textarea-container textarea {
	height: 100%;
	padding-left: var(--spacer-2);
	padding-right: var(--spacer-2);
	border: none;
	border-radius: var(--borderRadius);
	width: calc(100% - 1.6rem);
	background: transparent;
	font-size: var(--font-size);
	font-family: var(--base-font-family);
	margin: 0;
	outline: none;
	box-shadow: 0 0 0 0;
	position: relative;
	box-sizing: border-box;
	padding-top: calc(2.9rem + (0.5 * var(--tt-font-size-base-sm)) - 1em);
	display: flex;
	align-content: start;
}

.textarea-container textarea {
	padding: 0 var(--spacer-2);

	border: none;
	background-color: transparent;
	border-radius: var(--borderRadius);
	width: 100%;
	font-size: var(--font-size);
	font-family: var(--base-font-family);
	outline: none;
	resize: none;
	transition: var(--quick-ease);
	position: absolute;
	/* transform: translateY(var(--tt-font-size-base)); */
	height: calc(100% - (2.9rem + (var(--tt-font-size-base-sm)) - 1em));
	place-self: end;
	margin-top: calc(2.9rem + (var(--tt-font-size-base-sm)) - 1em);
	line-height: 1.28571429;
	box-shadow: none;
	box-sizing: border-box;
	/* top: calc(var(--tt-font-size-base) * -1); */
}

/* section + section {
  padding: 25dvh 0;
  } */

section:is(:not(#footer)) {
	/* min-height: 100vh;
    min-height: 100vh; */
	position: relative;
	max-width: var(--tt-global-max-width);
}

/* remove arrows/spinners from input type number */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
input[type='number'] {
	-moz-appearance: textfield;
}

.textarea-container {
	background-color: var(--tt-formwhite);
	border-radius: var(--borderRadius);
	border: none;
	position: relative;
	outline: none;
	font-size: var(--tt-font-size-base);
	height: fit-content;
	min-height: calc((var(--font-screen-size) * 4 * var(--base-line-height)));
	margin-bottom: var(--spacer-2);
	--container-height: calc(100% - 2em - 8px);
}

.textarea-container:has(+ .description-after) {
	margin-bottom: var(--base-margin-025);
}

.textarea-container:has(+ .description-after) + .description-after {
	margin-bottom: var(--base-margin-05);
	line-height: var(--semicondensed-line-height);
}

.hidden:not(.toggle-visible) {
	display: none;
}

.textarea-container label {
	position: absolute;
	left: 8px;
	top: 2.8rem;
	transform: translateY(-50%);
	transform-origin: left center;
	transition: var(--quick-ease-out);
	font-size: var(--font-size);
	font-family: var(--base-font-family);
	color: var(--tt-grey-main);
	width: calc(100% - 1.6rem);
}

.tt-form .upload-container {
	display: grid;
	place-items: center;
	transition: var(--quick-ease-out);
	width: var(--input-width-std);
	margin: auto;
	position: relative;
	font-size: var(--tt-font-size-base);
	font-size: var(--tt-font-size-base);
	min-height: 5.6rem;
	height: fit-content;
	background-color: var(--tt-grey-lighterest);
	border-radius: var(--b-rad-md);
}

.upload-container label {
	gap: var(--spacer-2);
}

.upload-field {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.upload-label {
	margin-bottom: 0;
	line-height: 1.25;
	display: inline-block;
	width: fit-content;
}

.upload-label-container {
	display: flex;
	flex-direction: column;
}
.upload-label-container p:not(:last-child) {
	margin-bottom: var(--base-margin-0125);
}

.password-toggle {
	position: absolute;
	right: 50%;
	top: 50%;
	transform: translate(50%, -50%);
	width: 100%;
	height: 100%;
	justify-content: flex-end;
	display: flex;
	pointer-events: none;
}
.password-toggle-container {
	display: flex;
	cursor: pointer;
	width: max(1em, 1.6rem);
	height: max(1em, 1.6rem);
	right: 0.8rem;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: auto;
	position: relative;
}
.password-toggle .svg-icon {
	width: max(1em, 1.6rem);
	height: max(1em, 1.6rem);
	right: 50%;
	top: 50%;
	transform: translate(50%, -50%);
	position: absolute;
	transition: var(--quick-ease-out);
}
.password-toggle .svg-icon.show-text {
	color: var(--tt-grey-lightish);
}
.password-toggle .svg-icon.hide-text {
	color: var(--tt-grey-dark);
}
.password-toggle .svg-icon.hidden {
	display: none;
	width: 0;
	height: 0;
}
input.input-field[name='pwd'] {
	padding-right: 2.4rem;
}

input.input-field[name='pwd_confirm'] {
	padding-right: 4rem;
}

.password-match-icon {
	position: absolute;
	right: 2.8rem;
	top: 50%;
	transform: translateY(-50%);
	width: max(1em, 1.6rem);
	height: max(1em, 1.6rem);
}

.password-match-icon .password-match-icon-container {
	right: 50%;
	height: 100%;
	width: 100%;
	top: 50%;
	transform: translate(50%, -50%);
	position: absolute;
	transition: var(--quick-ease-out);
}

.password-match-icon .svg-icon.hidden {
	display: none;
}

.password-match-icon .svg-icon.visible {
	display: block;
	height: 100%;
	width: 100%;
}

.password-match-icon .svg-icon.tick {
	color: var(--tt-mint-main);
}
.password-match-icon .svg-icon.cross {
	color: var(--tt-apple-main);
	transform: scale(0.66);
}

.input-description {
	color: var(--tt-grey-light);
	margin-top: var(--spacer-3);

	line-height: var(--condensed-line-height);
}

.input-description.base-xs {
	grid-column: 2 / 2;
	font-variation-settings: var(--fw-light);
	color: var(--tt-grey-lightish);
	line-height: var(--condensed-line-height);
	text-wrap: balance;
	width: fit-content;
	display: flex;
}

.upload-field + label {
	font-variation-settings: var(--fw-normal);
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
	display: grid;
	grid-template-columns: 0.33fr 1fr;
	overflow: hidden;
	transition: var(--quick-ease-out);
	padding: var(--spacer-2) var(--spacer-3);
	justify-items: center;
	place-content: center;
}

.no-js .upload-field + label {
	display: none;
}

.upload-container:focus-within,
.upload-container:has(input:focus) {
	outline: 1px dotted var(--tt-grey-lightish);
	outline: -webkit-focus-ring-color auto 1px;
}

.upload-field + label svg,
.upload-field + label img {
	width: 1.5em;
	font-size: var(--tt-font-size-base-sm);
	font-size: var(--tt-font-size-base-sm);
	grid-row: 1 / -1;
	vertical-align: middle;
	fill: currentColor;
	margin: auto;
	display: flex;
	position: relative;
}

.upload-field + label {
	color: var(--tt-grey-main);
}

.upload-container:focus-within,
.upload-container:has(input:focus),
.upload-container:hover,
.upload-container:hover label {
	background-color: var(--tt-grey-lighterer);
	color: var(--tt-grey-dark);
}

form.subscribe-email-tuple {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0;
	max-width: var(--tt-form-width);
	margin-inline: 0;
}

form.subcribe-email-tuple
	form:not([data-multiple-fields='false']):has(input:required)
	.input-container[data-is-first='true']
	+ .tt-email-subscribe-button,
form:not([data-multiple-fields='false']):has(input:required)
	.input-container[data-is-first='true']
	+ .tt-email-subscribe-button {
	height: 5.6rem;
	place-self: end;
	margin-top: calc(var(--tt-font-size-xxs) + var(--spacer-1));
	width: 100%;
	outline: 1px solid var(--tt-mint-main);
}

.subscribe-email-tuple > .input-container:has(+ button.tt-button-accent) {
	box-shadow: none;
	z-index: 1000;
	margin-right: 0;
	border-radius: 8px 0 0 8px;
}

.subscribe-email-tuple.input-container .input-field {
	margin-right: 0;
}

.subscribe-email-tuple .error-message.error-message {
	grid-column: 1 / -1;
	color: var(--tt-wine-lighter);
}

.subscribe-email-tuple > :is(.input-container:focus-within),
.input-container input:focus,
.textarea-container textarea:focus,
.textarea-container textarea:focus-visible,
.textarea-container:focus-within(:placeholder-shown) {
	box-shadow: none;
}

.subscribe-email-tuple > .input-field,
.subscribe-email-tuple:has(.input-field):has(+ .tt-button-accent) {
	border-radius: 8px 0 0 8px;
	flex-grow: 1;
	box-shadow: none;
}

.subscribe-email-tuple > button,
.subscribe-email-tuple:has(.input-field):has(+ button.tt-button-accent)
	+ button.tt-button-accent {
	/* width: 100%; */
	border-radius: 0 var(--b-rad-md) var(--b-rad-md) 0;
	flex-grow: 0;
	box-shadow: none;
}

.background-gradient {
	opacity: 0.5;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.swiper {
	max-width: 100vw;
	pointer-events: auto;
}

.swiper::before {
	opacity: 0;
	content: '';
	position: absolute;
	width: 100vw;
	width: 100dvw;
	height: 100%;
	top: 0;
	left: 50%;
	pointer-events: none;
	transform: translateX(-50%);
	z-index: 2;
	transition: var(--quick-ease);
}
.swiper.overflow-right::before,
.swiper.overflow-left::before,
.swiper.overflow-left.overflow-right::before {
	opacity: 1;
}
/* .swiper.overflow-right::before {
	background: linear-gradient(to right, var(--transparent-to-white-25));
}
.swiper.overflow-left::before {
	background: linear-gradient(to left, var(--transparent-to-white-25));
}
.swiper.overflow-left.overflow-right::before {
	background: linear-gradient(to right, var(--white-to-transparent-to-white));
} */
/* .swiper.overflow-right,
.swiper.overflow-left {
	overflow: visible;
} */

.button-brick {
	background-color: var(--tt-neutral-ui-lighterish);
	color: var(--text-colour);
	--text-colour: var(--tt-purple-main);
	--hover-colour: var(--tt-purple-dark);
	padding: var(--base-margin-05) calc(0.8rem + 0.5em);
	transition: var(--quick-ease-out);
	border-radius: var(--b-rad-md);
	font-size: var(--tt-font-size-base-sm);
	font-variation-settings: var(--fw-semibold);
}

a.button-brick,
.button-brick a,
a:has(.button-brick) {
	text-decoration: none;
}

.button-brick .readmore-arrow svg {
	color: var(--text-colour);
}

.button-brick:hover,
.button-brick:hover .readmore-arrow {
	background-color: var(--tt-purple-lighterer);
	color: var(--hover-colour);
	text-decoration: none;
	& .readmore-arrow svg {
		color: var(--hover-colour);
	}
}

.button-ghost {
	cursor: pointer;
	display: block;
	box-sizing: border-box;
	padding: var(--base-margin-05) calc(0.8rem + 0.5em);
	text-decoration: none;
	background-color: transparent;
	font-family: var(--header-font-family), sans-serif;
	margin: 0 auto;
	text-align: center;
	font-variation-settings: var(--fw-medium);
	transition: var(--quick-ease-out);
	position: relative;
	white-space: nowrap;
	outline: 1px solid var(--text-and-outline-color);
	--text-and-outline-color: var(--tt-purple-main);
	color: var(--text-and-outline-color);

	border-radius: var(--b-rad-md);
	width: fit-content;
}

/* .button-ghost.readmore {
	padding-right: var(--base-margin-175);
} */

.button-ghost .button-ghost.ghost-sm {
	padding: calc(0.4rem + 0.5em) calc(0.8rem + 0.5em);
	font-size: var(--tt-font-size-base-sm);
	font-variation-settings: var(--fw-medium);
}

.button-ghost.apple {
	--text-and-outline-color: var(--tt-apple-darkish);
}

.button-ghost.white {
	--text-and-outline-color: var(--tt-purple-lighterest);
}

a:has(.button-ghost) {
	text-decoration: none;
	display: flex;
}

.button-ghost.apple:hover,
a.button-ghost.apple:hover {
	--text-and-outline-color: var(--tt-apple-dark);
	background-color: var(--tt-apple-lightest);
	color: var(--tt-apple-dark);
}

.button-ghost.arrow-right {
	padding-right: 2.3em;
}

.button-ghost:active {
	--text-and-outline-color: var(--tt-blue-darker);
	background: var(--tt-blue-lighterer);
}

.button-ghost:hover {
	border: none;
	font-variation-settings: var(--fw-semibold);
	letter-spacing: -0.00455em;
	--text-and-outline-color: var(--tt-blue-main);
	color: var(--text-and-outline-color);
}

.button-ghost:target::before {
	background: var(--tt-grey-lighter);
}

.button-ghost.wine {
	--text-and-outline-color: var(--tt-apple-main);
}

.button-ghost.wine:hover {
	--text-and-outline-color: var(--tt-apple-light);
}

.button-ghost.grey-2 {
	--text-and-outline-color: var(--tt-grey-lightish);
}

.button-ghost.grey-2:hover {
	--text-and-outline-color: var(--tt-grey-dark);
}

.button-ghost.purple {
	--text-and-outline-color: var(--tt-purple-main);
}

.button-ghost.purple:hover {
	--text-and-outline-color: var(--tt-purple-dark);
}

.button-ghost.mauve {
	--text-and-outline-color: var(--tt-violet-main);
}

.button-ghost.mauve:hover {
	--text-and-outline-color: var(--tt-violet-dark);
}

.arrow-right {
	position: relative;
	padding-right: 0.5em;
}

/* .arrow-right::before {
  content: '';
  position: absolute;
  font-size: inherit;
  width: calc(
    100% + (0.64em * 2.65613647)
  ); /* additional 2.65... is the width to height ratio of the arrow SVG */
/* height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: inherit;
  border-radius: inherit;
} */

.arrow-right::after {
	content: '';
	display: inline-block;
	position: absolute;
	font-size: inherit;
	width: calc(0.64em * 2.65613647);
	/* additional 2.65... is the width to height ratio of the arrow SVG */
	height: 0.64em;
	/* height adjusted to account for padding of main element */
	top: 50%;
	background-color: inherit;
	background-color: currentColor;
	background-size: contain;
	background-repeat: no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168.16 63.31'%3E%3Cpath class='tt-tail' fill='%23currentColor' d='M80.97,0l-6.63,6.78,20.18,20.16H0v9.42h94.52l-20.17,20.17,6.63,6.77,31.64-31.65L80.97,0Z'/%3E%3Cpath class='tt-head' fill='%23currentColor' d='M112.62,31.65l-31.65-31.65l-6.63,6.78,20.18,20.16H0v9.42h94.52l-20.17,20.17,6.63,6.77Z'/%3E%3C/svg%3E");
	transition: mask-position 0.2s ease;
	mask-repeat: no-repeat;
	left: calc(100% - 2em);
	/* left margin adjusted by negative 16px to avoid the padding value of the main element */
	transform: translatey(-50%);
}

.arrow-right:hover {
	cursor: pointer;
}

.arrow-right:hover::after {
	mask-position: 4px 0;
}

.button-solid-light {
	background-color: var(--tt-grey-lighter);
	border-radius: 8px;
	padding: 8px 16px;
	border: none;
	font-size: var(--tt-font-size-base);
	font-size: var(--tt-font-size-base);
	font-family: var(--base-font-family);
	font-weight: 400;
	color: var(--tt-grey-dark);
}

.nav-ghost {
	background-color: transparent;
	/* transition: none; */
}

.navbar-dark {
	color: var(--tt-white-main);
}

.navbar-light > *,
.navbar-light > * > *,
.navbar-light > ul.base > li > a {
	color: var(--tt-black-main);
}

#navbar.navbar-light > ul > li > a {
	color: var(--tt-black-main);
}

.navbar-light > a > .logo {
	filter: brightness(0.16);
}

/* UTILITY CLASSES */

.col {
	display: flex;
	flex-direction: column;
}

.zeromargin {
	margin-bottom: 0;
}

.display-none {
	display: none;
}

.flexrow {
	display: flex;
	flex-direction: row;
	gap: 0.8rem;
}

.flexcol {
	display: flex;
	flex-direction: column;
	/* gap: 8px; */
}

.flexcol:not(:last-child) {
	margin-bottom: 8px;
	margin-top: 0;
}

.col-tight {
	gap: var(--spacer-2);
}

.col-med {
	gap: var(--base-margin);
}

.col-loose {
	gap: var(--spacer-6);
}

.col-vloose {
	gap: var(--spacer-12);
}

.nomargin {
	margin-top: 0;
	margin-bottom: 0;
}

.nogap {
	gap: 0;
}

.svg-icon.up:has(svg) {
	transform: rotate(0deg);
}

.svg-icon.down:has(svg) {
	transform: rotate(180deg);
}

.svg-icon.right:has(svg) {
	transform: rotate(90deg);
}

.svg-icon.left:has(svg) {
	transform: rotate(-90deg);
}

.tight-cont-gap {
	gap: var(--tight-content-spacer);
}

.med-cont-gap {
	gap: var(--medium-content-spacer);
}

.loose-cont-gap {
	gap: var(--loose-content-spacer);
}

.vloose-cont-gap {
	gap: var(--vloose-content-spacer);
}

.grid {
	display: grid;
}

.rows-infinite {
	grid-template-rows: repeat(auto-fill, 1fr);
}

.rows-5 {
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}

.rows-4 {
	grid-template-rows: 1fr 1fr 1fr 1fr;
}

.rows-3 {
	grid-template-rows: 1fr 1fr 1fr;
}

.rows-2 {
	grid-template-rows: 1fr 1fr;
}

.rows-1 {
	grid-template-rows: 1fr;
}

.cols-infinite {
	grid-template-columns: repeat(auto-fill, 1fr);
}

.cols-5 {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.cols-4 {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.cols-3 {
	grid-template-columns: 1fr 1fr 1fr;
}

.cols-2 {
	grid-template-columns: 1fr 1fr;
}

.cols-1 {
	grid-template-columns: 1fr;
}

.gap-s-tight {
	gap: var(--tight-section-spacer);
}

.gap-s-med {
	gap: var(--medium-section-spacer);
}

.gap-s-loose {
	gap: var(--loose-section-spacer);
}

.gap-c-tight {
	gap: var(--tight-content-spacer);
}

.gap-c-med {
	gap: var(--medium-content-spacer);
}

.gap-c-loose {
	gap: var(--loose-content-spacer);
}

.purple-main {
	color: var(--tt-purple-main);
}

.purple-light {
	color: var(--tt-purple-light);
}

.purple-lighter {
	color: var(--tt-purple-lighter);
}

.purple-lightest {
	color: var(--tt-purple-lightest);
}

.mauve-main {
	color: var(--tt-mauve-main);
}

.mauve-light {
	color: var(--tt-mauve-light);
}

.grey-3 {
	color: var(--tt-grey-dark);
}

.grey-2 {
	color: var(--tt-grey-lightish);
}

.grey-1 {
	color: var(--tt-grey-light);
}

.form-message {
	height: min-content;
	opacity: 1;
	text-align: center;
	margin: var(--spacer-2) auto;
	font-size: var(--tt-font-size-xs);
	font-size: var(--tt-font-size-xs);
	padding: 0 0.5em;
	width: fit-content;
	text-wrap: balance;
	transition: var(--quick-ease);
	animation: fadeinopacity var(--quick-ease) forwards;
}

.error {
	color: var(--alert-red);
	mix-blend-mode: luminosity;
	opacity: 1;
}

.tt-form .field-message-wrapper {
	position: relative;
	width: min(var(--input-width-std), calc(100% - 0.4rem));
	max-width: min(40rem, 100%);
	height: 100%;
	margin: auto;
	transition: var(--quick-ease);
}
.error-message.error-message {
	transition: var(--quick-ease-out);
}

.error-message.error-message:not(:empty) {
	color: var(--alert-red);
	display: block;
	text-align: center;
	text-wrap: balance;
	width: fit-content;
	margin: 0 auto 0.5em;
	animation: fadeinopacity var(--quick-ease) forwards;
	line-height: var(--semicondensed-line-height);
	display: block;
	position: relative;
	transform: translateY(0.5em);
}

.validation {
	opacity: 1;
}

.success {
	color: var(--tt-white-main);
	backdrop-filter: invert(0.16);
	opacity: 1;
	margin-top: 0.5em;
}

.clickable {
	border: none;
	cursor: pointer;
}

.clickable:hover {
	filter: saturate(2);
}

/* END OF UTILITY CLASSES */

#back-to-top-wrap {
	position: relative;
	width: 2.4rem;
	height: 2.4rem;
	display: block;
}

#back-to-top {
	color: var(--tt-purple-lighter);
	/* background-color: var(--tt-purple-lighter); */
	position: relative;
	display: block;
	font-size: inherit;
}

#back-to-top-wrap .svg-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.pagination.base-sm {
	display: flex;
	/* grid-template-columns: repeat(auto-fit, minmax(24px, 64px)); */
	place-items: center;
}

.pagination.base-sm > a {
	text-decoration: none;
	text-decoration-line: none;
	text-decoration-skip-ink: none;
	text-decoration-thickness: unset;
	text-align: center;
	/* width: calc(100% + 16px); */
	min-width: 1em;
	position: relative;
	line-height: 1;

	color: var(--tt-purple-main);
	border-radius: 50%;
}

.page-numbers.current {
	color: var(--tt-purple-lightest);
	font-variation-settings: var(--fw-bold);
	z-index: 1;
	position: relative;
}

.page-numbers.current::before {
	background-color: var(--tt-purple-main);
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}

/* .pagination.base-sm > a:last-child {
  color: var(--tt-purple-main);
} */

/* .page-numbers:not(.next):not(.prev)::before {
  position: absolute;
  content: '';
  background-color: var(--tt-purple-main);
  width: 24px;
  height: 24px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: -1;
} */

.page-numbers {
	min-width: 1em;
	transition: var(--quick-ease-out);
	text-align: center;
	&:not(:last-child) {
		margin-right: var(--base-margin-075);
	}
}
.page-numbers:not(.prev):not(.next):not(.current):hover {
	color: var(--tt-purple-darker);
	transition: var(--quick-ease-out);
	&::before {
		content: '';
		position: absolute;
		height: 2.4rem;
		width: 2.4rem;
		border-radius: 50%;
		background-color: var(--tt-purple-lighter);
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: -1;
		transition: var(--quick-ease-out);
	}
}

/* ############# */
/* Citation Styling */
.campaign-footnotes-wrapper,
.post-footnotes-wrapper {
	margin-top: var(--medium-content-spacer);
	padding-top: var(--medium-content-spacer);
	border-top: 1px solid var(--tt-grey-lighter);
	color: var(--tt-grey-light);
}

.footnote {
	color: var(--tt-grey-light);
	font-size: var(--tt-font-size-xxs);
	line-height: var(--semicondensed-line-height);
	display: grid;
	grid-template-columns: 2.5ch 1fr;
	column-gap: var(--spacer-1);
}
.post-footnotes .footnote-number {
	min-width: 2ch;
	min-height: 2ch;
	display: inline;
	position: relative;
	text-align: center;
	aspect-ratio: 1;
	margin-left: -0.5ch;
	margin-right: 0.5ch;
	color: var(--tt-grey-main);
}

/* .post-footnotes .footnote-number::before {
	content: '';
	background: var(--tt-neutral-ui-lighter);
	height: 2ch;
	width: 2ch;
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 1ch;
	border-radius: 50%;
	transform: translateX(-50%) translateY(-50%);
	outline: 1px solid var(--tt-grey-lighterer);
} */

.campaign-footnotes-wrapper .overline + div,
.post-footnotes-wrapper .overline + div {
	margin-top: var(--base-margin);
}
.campaign-footnotes,
.post-footnotes {
	display: flex;
	flex-direction: column;
	gap: var(--base-margin-05);
}
/* ############# */

.svg-icon {
	height: 2.4rem;
	max-height: 2.4rem;
	width: 2.4rem;
	max-width: 2.4rem;
	align-self: center;
	position: relative;
	transition: var(--quick-ease);
	display: inline-block;
}

.svg-icon.svg-lg {
	height: min(6.4rem, 1.5em);
	max-height: min(6.4rem, 1.5em);
	width: min(6.4rem, 1.5em);
	max-width: min(6.4rem, 1.5em);
}

.svg-icon.svg-em {
	height: 1em;
	max-height: 1em;
	width: 1em;
	max-width: 1em;
}

.svg-icon > svg,
.svg-icon > img {
	height: 100%;
	width: 100%;
	align-self: center;
	position: absolute;
	top: 0;
	left: 0;
}

.global-wrap {
	background-size: cover;
	max-width: 100%;
	position: relative;
	background-position: center;
	background-repeat: no-repeat;
	/* padding-top: 24vh; */
	padding-top: clamp(128px, 16dvw + 80px, 24dvh);
	margin-bottom: calc(var(--footer-height) + var(--base-margin-2));
	overscroll-behavior: none;

	background: var(--tt-white-main);
}

main {
	position: relative;
	z-index: 1;
}

sup {
	position: relative;
	vertical-align: baseline;
	top: -0.75em;
	line-height: 0;
	font-size: 50%;
	padding-inline: 0.125em;
}

form label[for].filePicker {
	position: relative;
	background-color: rgb(49, 4, 92);
	color: white;
	font-size: 1rem;
}

form label[for].filePicker input[type='file'] {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
}

.bg-container.max {
	position: relative;
	z-index: -1;
}

.bg-container.max::before {
	content: '';
	position: absolute;
	width: 100dvw;
	left: 50%;
	top: 50%;
	height: 1000vh;
	transform: translate(-50%, -50%);
	z-index: -2;
	background: url('blurrybg-8.png'), var(--tt-white-main);
}

/* MULTI-STEP FORM STYLES */
#regForm {
	width: 360px;
}

.success-message-container {
	width: 100%;
	margin: auto;
	text-align: left;
}

.success-message-container p {
	color: var(--tt-grey-dark);
}

.success-message-container .header-4 {
	color: var(--tt-mint-dark);
	margin-bottom: 0;
}

.success-icon {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: var(--tt-font-size-header-sm);
	font-size: var(--tt-font-size-header-sm);
}

#tick-form-success-icon {
	font-size: var(--tt-font-size-header-sm);
	font-size: var(--tt-font-size-header-sm);
}

.restart-button {
	background-color: var(--tt-purple-lighterest);
	color: var(--tt-grey-darkest);
	gap: var(--spacer-2);
	font-variation-settings: var(--fw-medium);
	margin-top: 0.5em;
}

.restart-button:hover {
	background-color: var(--tt-purple-lighterer);
}

.restart-button:hover .svg-icon {
	animation: infinite 1.6s restart-spin var(--normal-ease-inout);
}

.restart-button .svg-icon {
	position: relative;
	z-index: 1;
	height: 1em;
	width: 1em;
	color: var(--tt-purple-main);
}

@keyframes restart-spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.tab-container:not(.simplified-form):not(.campaign-form) {
	background-color: var(--tt-form-bg);
	/* background-color: var(--tt-white-main); */
	border-radius: var(--b-rad-lg);
	position: relative;
	width: var(--tt-form-width);
	box-shadow: var(--card-shadow-sm);
	max-width: 100%;
	align-self: self-start;
	margin-inline: auto;
}
.tab-container:not(.simplified-form) .tab-container-inner {
	overflow: hidden;
	border-radius: var(--b-rad-lg);
	transition: none;
	width: var(--tt-form-width);
}
.tab-container {
	border-radius: var(--b-rad-lg);
	overflow: hidden;
}

#universal-modal-content,
#universal-modal-wrapper {
	max-width: min(var(--tt-form-width), 85vw);
	width: 100%;
	overflow-y: hidden;
	background: unset;
	padding: 0;
	border-radius: var(--b-rad-sm);
}

#universal-modal-content .tabs-wrap {
	max-height: 90vh;
	max-height: 90dvh;
	overflow-y: auto;
	overflow-x: hidden;
}
#universal-modal-content .tabs-wrap::-webkit-scrollbar,
#universal-modal-content .tabs-wrap::-webkit-scrollbar-thumb {
	display: auto;
	transition: var(--quick-ease-out);
}

#universal-modal-content .tabs-wrap::-webkit-scrollbar-thumb:hover {
	background: var(--tt-purple-lighter);
	transition: var(--quick-ease-out);
	cursor: pointer;
}

#universal-modal-content .tabs-wrap::-webkit-scrollbar-thumb:active {
	background: var(--tt-purple-light);
	transition: var(--quick-ease-out);
	cursor: pointer;
}
#universal-modal-content .tab-container {
	margin: auto;
}

#universal-modal-wrapper {
	border-radius: var(--b-rad-lg);
	box-shadow: var(--card-shadow-lg);
}

#universal-modal-wrapper .tabs-wrap .tab {
	scrollbar-color: var(--tt-neutral-ui-lightish) var(--tt-neutral-ui-lighter);
	scrollbar-width: 0.8rem;
	padding: var(--spacer-6);
}

::-webkit-scrollbar {
	border-radius: 2.4rem;
	width: 0.8rem;
	scrollbar-width: 0.8rem;
	scrollbar-color: var(--tt-neutral-ui-lightish) var(--tt-neutral-ui-lighter);
}
::-webkit-scrollbar-track {
	border-radius: 2.4rem;
	background: var(--tt-neutral-ui-lighter);
	padding-right: var(--base-margin);
}
::-webkit-scrollbar-thumb {
	background: var(--tt-neutral-ui-lightish);
	border-radius: 2.4rem;

	transition: var(--quick-ease-out);
}

.form-grid
	.input-container.subscribe-email-tuple[data-is-first='true']:has(input) {
	margin-right: 0;
	outline: none;
}

.subscribe-email-tuple.input-container[data-is-first='true'] {
	outline: none;
	margin-bottom: 0;
}

/* Mark input boxes that gets an error on validation: */
.input-container:has(input.invalid),
.tt-radio.error {
	box-shadow:
		0 0 2.4px 0 var(--alert-red-dim),
		0 0 1.2px 0 var(--alert-red-dim),
		0 0 0.8px 0 var(--alert-red);
}

#bug_report_form {
	max-width: unset;
}

/* #bug_report_form .tabs-wrap .tab {
	padding: var(--spacer-8);
} */

.tab {
	flex: 0 0 100%;
	width: 100%;
	padding: var(--base-margin-125);
	justify-content: space-between;
}

/* button {
  background-color: var(--tt-mauve-main);
  color: var(--tt-white-main);
  border: none;
  padding: 0.4em 1.2em;
  border-radius: 8px;
  font-size: var(--tt-font-size-base);
font-size: var(--tt-font-size-base);
  cursor: pointer;
  font-family: var(--header-font-family);
}

button:hover {
  opacity: 0.8;
} */
.header-tab-tuple .tab-header {
	text-align: left;
	font-size: var(--tt-font-size-header-sm);
	font-variation-settings: var(--fw-medium);
	color: var(--tt-black-main);
	line-height: var(--condensed-line-height);
	text-wrap: balance;
	margin-bottom: 0;
}

#prevBtn {
	background: unset;
	/* aspect-ratio: 1; */

	transition: var(--quick-ease-out);
	border-radius: 50%;
	/* height: 3.2rem; */
}

#prevBtn div > svg {
	color: var(--tt-grey-light);
}

#prevBtn {
	align-items: center;

	margin-top: auto;
	opacity: 1;

	max-width: 5.2rem;
	width: 5.2rem;

	margin-bottom: auto;
	padding: 0;
	transition: var(--gentle-ease);
}

#prevBtn.notshown {
	opacity: 0;

	width: 0;
	max-width: 0;
}

#prevBtn:hover > div > svg {
	color: var(--tt-grey-lightish);
	transition: var(--quick-ease-out);
}

/* Make circles that indicate the steps of the form: */
.step {
	height: 12px;
	width: 12px;

	background-color: var(--tt-grey-lighterer);
	border: none;
	border-radius: 50%;
	display: inline-block;
	transition: var(--gentle-ease);
}

.step:not(:last-of-type) {
	margin-right: 2.4px;
}

.step.active {
	background-color: var(--tt-mauve-lighterer);
	border: 1px solid var(--tt-mauve-lighter);
}

/* Mark the steps that are finished and valid: */
.step.finish {
	background-color: var(--tt-mauve-lighterest);

	cursor: pointer;
}

.multi-step-form-nav-strap.hasmargin {
	display: flex;
	justify-content: space-between;
	font-size: var(--tt-font-size-base-sm);
	font-size: var(--tt-font-size-base-sm);
	margin: calc(2.4rem - 1em - 0.4rem) 3.2rem 2.4rem;
	gap: 4.8rem;
}

.multi-step-form-step-indicator {
	text-align: center;
	display: flex;
	gap: 0.24rem;
	margin: 0 0 auto 0;
	position: relative;
	height: fit-content;
}

/* .tab:has(.multi-step-form-header .multi-step-form-step-indicator .step1):has(
    .multi-step-form-nextbuttons .tt-button-accent.form-submit
  )
  .multi-step-form-step-indicator
  .step1 {
  display: none;
} */
.step1:not(:has(+ .step2)) {
	display: none;
}

.multi-step-form-nextbuttons {
	display: flex;
	/* gap: 16px; */
	width: 100%;
}

.multi-step-form-nextbuttons #prevBtn:hover .svg-icon.left svg {
	color: var(--tt-purple-lighter);
}

.multi-step-form-nextbuttons > :first-child:not(:last-child) {
	margin-right: 1.6rem;
}

.form-footer-container > .multi-step-form-nextbuttons > button[type='submit'] {
	flex-grow: 1;
	margin-right: 0;
}
.tt-form.single-question .tab:not(.final-tab) .form-footer-container {
	display: none;
}

.tt-form.single-question .radio-group input[type='radio'] {
	background: var(--tt-purple-lighterest);
}
.tt-form.single-question .radio-group label {
	color: var(--tt-blue-dark);
}

.multi-step-form-nextbuttons:has(button[type='submit']) {
	display: grid;
	grid-template-rows: 1fr auto;
}

#nextBtn {
	flex-grow: 1;
}

#signup-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	animation: fadeinopacity var(--gentle-ease-out) forwards;
	z-index: 1000;
}

#signup-modal-form-wrapper {
	position: absolute;
	z-index: 1001;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: var(--tt-white-main);
	max-width: min(400px, 88dvw);
	animation: up var(--gentle-ease) forwards;
}

.header-form-container {
	display: flex;
	flex-direction: row;
	gap: 0.8rem;
	justify-content: space-between;

	/* margin: 1.6rem 0; */
	text-align: left;
}

.header-tab-tuple {
	display: flex;
	flex-direction: column;
	gap: var(--spacer-2);
}

.form-subheader {
	color: var(--tt-grey-lightish);
	/* padding-bottom: var(--base-margin-05); */
	text-wrap: balance;
	line-height: var(--semicondensed-line-height);
	font-size: var(--tt-font-size-base-sm);
}

.form-nextbutton {
	background-color: var(--tt-purple-lighterer);
	color: var(--tt-black-main);
	width: 100%;
	transition: all var(--quick-ease-out);
}

.form-nextbutton:hover {
	background-color: var(--tt-purple-lighter);
}

.message-container {
	text-align: center;
	margin: auto;
	grid-column: 1/-1;
}

.warning-message-container {
	font-size: var(--tt-font-size-base-sm);
	font-size: var(--tt-font-size-base-sm);
}

.warning-message {
	color: var(--alert-red);
	line-height: 1;
	text-align: center;
	position: relative;
	transition: var(--quick-ease);
	width: fit-content;
	text-wrap: balance;
}

.footer-content .logo {
	width: min(100%, 20rem);
	max-height: unset;
	/* padding: clamp(1.6rem, 2vw, 2.4rem); */
	aspect-ratio: 2.28704784;
	background-color: var(--tt-white-main);
	-webkit-mask-image: var(--logo-mask-url);
	mask-image: var(--logo-mask-url);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: cover;
	mask-size: cover;
	mask-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	text-decoration: none;
	text-underline-offset: 0;
	margin: auto;
}

a:has(.tt-logo),
a:has(.logo) {
	text-decoration: none;
	overflow-clip-margin: border-box;
}

.footer-content a:has(.logo) {
	place-content: end;
}

.white {
	color: var(--tt-white-main);
}

.black {
	color: var(--tt-black-main);
}

.purple {
	color: var(--tt-purple-main);
}

.mint {
	color: var(--tt-mint-main);
}

.mint-darker {
	color: var(--tt-mint-darker);
}

.sub {
	color: var(--tt-grey-dark);
}
.subheading-sm.tab-subhead {
	margin-bottom: var(--base-margin-025);
}
.tab-subhead-sm {
	font-size: var(--tt-font-size-base);
	font-variation-settings: var(--fw-midweight);
	text-wrap: balance;
	line-height: var(--semicondensed-line-height);
	margin-bottom: var(--base-margin-025);
	color: var(--tt-black-main);
}

#colophon > * {
	pointer-events: auto;
}

#footer-mini-wrapper {
	background-color: transparent;
	border-top: 0.8px solid var(--tt-grey-light);
	height: var(--nav-height);

	display: flex;
	position: relative;
	justify-content: space-between;
	z-index: 100;
	padding: 0 var(--tt-global-padding-left-right);
	overflow: visible;
	display: grid;
	grid-template-columns: auto auto;
	place-items: left center;
	gap: 1.6rem;
}

#footer-mini-tagline {
	color: var(--tt-purple-main);
	text-align: left;
	text-wrap: balance;
	font-weight: bolder;
	place-self: center start;
}

#footer-mini-authorisation {
	color: var(--tt-grey-light);
	text-align: right;
	text-wrap: balance;
	place-self: center end;
}

.tab-par,
.tab-subhead {
	margin: 0;
}

.radio-group {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(var(--spacer-2), 12px, var(--base-margin));
}

/* For 1 item */
.radio-group:has(:first-child:last-child) {
	grid-template-columns: 1fr;
}

/* For 2 items */
.radio-group:has(:nth-child(2):last-child) {
	grid-template-columns: repeat(2, 1fr);
}

/* For 3 items */
.radio-group:has(:nth-child(3):last-child) {
	grid-template-columns: repeat(3, 1fr);
}

/* For 4 or more items */
.radio-group:has(:nth-child(4)) {
	grid-template-columns: repeat(2, 1fr);
}

/* For 6 items */
.radio-group:has(:nth-child(6):last-child) {
	grid-template-columns: repeat(3, 1fr);
}

.tt-form.single-question .radio-group {
	grid-template-columns: 1fr;
}

input[type='radio'] {
	appearance: none;
}

.radio {
	border-radius: var(--b-rad-sm);
	box-shadow: none;
	transition: var(--quick-ease);
	box-shadow: none;
	position: relative;
}

.tt-radio {
	position: absolute;
	appearance: none;
	border-radius: var(--b-rad-md);
	width: 100%;
	height: 100%;
	z-index: 0;
	transition: var(--quick-ease-out);
	box-shadow: none;
	outline: 0.1rem solid var(--tt-neutral-ui-lighter);
	color: transparent;
	border-width: 0px;
}

.form-body-container {
	overflow: visible;
}

.form-body-container .field-group:first-child > *:first-child {
	margin-top: 0;
}

.tt-radio:not([id='donation-value_other']) {
	background-color: var(--tt-radio-bg);
	cursor: pointer;
	transition: var(--quick-ease-out);
}

.tt-radio:not([value='other']):hover {
	box-shadow: var(--tt-radio-hover);
	color: var(--tt-black-main);
	background-color: var(--tt-radio-bg-hover);
	outline-color: var(--tt-purple-lightest);
}

.tt-radio:checked:not([id='donation-value_other']),
.tt-radio[checked]:not([id='donation-value_other']) {
	box-shadow: var(--tt-checked-button);
	background-color: var(--tt-purple-lightest);
	font-variation-settings: var(--fw-bold);
	color: var(--tt-black-main);
	outline: none;
}

.tt-radio[checked]:not([id='donation-value_other']) + .radio-label,
label:has(> .tt-radio[checked]:not([id='donation-value_other']))
	.tt-radio[checked]:not([id='donation-value_other']) {
	font-variation-settings: var(--fw-bold);
	color: var(--tt-black-main);
}

#donation-value_other:checked {
	box-shadow: var(--tt-checked-button);
	font-variation-settings: var(--fw-bold);
	color: var(--tt-black-main);
	outline: none;
	border: none;
}

.radio-button .radio-label {
	padding: var(--spacer-2);
	text-wrap: balance;
}

.tt-radio:checked + .radio-label {
	font-variation-settings: var(--fw-bold);

	color: var(--tt-black-main);
}

.input-like-label {
	z-index: 2;
}

.other-option input[type='radio'] {
	z-index: 1;
}

.label::after {
	content: '*';
	margin-left: 0.02em;
}

.radio-label {
	position: relative;
	z-index: 2;
	transition: var(--gentle-ease-out);
	font-variation-settings: var(--fw-normal);
	color: var(--tt-grey-dark);
	text-align: center;
	line-height: var(--condensed-line-height);
	cursor: pointer;
}

.radio-button {
	background-color: var(--tt-grey-lightest);
	border-radius: var(--b-rad-md);
	text-align: center;
	transition: var(--quick-ease-out);
	position: relative;
}

.radio-button:hover {
	background-color: var(--tt-grey-lighterer);
}

.radio-button.base {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 5.6rem;
}

.main-carousel {
	padding-right: 2.4rem;
	width: 100%;
}

.flickity-resize .carousel-cell {
	min-height: 100%;

	height: fit-content;
	/* height: 100%; */
}

input:disabled {
	color: var(--tt-grey-darkerish);
}
.input-container:has(input:disabled),
.textarea-container:has(textarea:disabled) {
	background-color: transparent;
	& label.floating-label {
		color: var(--tt-grey-lightish);
	}
}

form.simplified-form .input-container:has(input:disabled),
form.simplified-form .textarea-container:has(textarea:disabled) {
	--alpha: 0.78;
	--tt-formwhite-hsla: hsla(
		0,
		0%,
		98.82%,
		var(--alpha)
	); /* uses HSL values */
	background-color: var(--tt-formwhite-hsla);
	border: none;
	height: 5.8rem;
	width: calc(100% + 2px);
}

.other-input {
	height: 100%;
	width: 100%;
	outline: none;
	padding: 0.8rem;
	border-radius: 0.8rem;
	border: none;
	z-index: 2;
	background-color: var(--tt-formwhite);
	font-size: var(--tt-font-size-base);
	font-size: var(--tt-font-size-base);
	font-family: var(--base-font-family);
	color: var(--tt-grey-dark);
	text-align: center;
	transition: var(--gentle-ease-out);
}

.other-input:focus {
	box-shadow: var(--tt-checked-button);
}

.other-input:hover {
	background-color: var(--tt-grey-lighterer);
}

.other-input:checked {
	background-color: initial;
	border: none;
	box-shadow: none;
	font-variation-settings: var(--fw-normal);
}

.checkbox-wrapper > :not(:last-child) {
	margin-bottom: 0.4rem;
}

.checkbox-container {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.8rem;
	width: 100%;
	margin: 0.4rem 0.36rem;
}

.tt-form .checkbox-label {
	transition: var(--quick-ease);
	font-variation-settings: var(--fw-medium);
	text-wrap: balance;

	line-height: var(--semicondensed-line-height);
	/* margin-bottom: var(--spacer-2); */
	text-align: left;
}

.checkbox-description {
	color: var(--tt-grey-main);
	font-variation-settings: var(--fw-normal);
	margin-inline: 0.36rem;
}

input[type='checkbox']:checked + .checkbox-label,
input[type='checkbox']:checked + label,
.checkbox-label:has(input[type='checkbox']:checked),
label:has(input[type='checkbox']:checked) {
	color: var(--tt-purple-light);
	min-height: var(--spacer-3);
}

input[type='checkbox']:not(:checked) + .checkbox-label,
input[type='checkbox']:not(:checked) + label,
.checkbox-label:has(input[type='checkbox']:not(:checked)),
label:has(input[type='checkbox']:not(:checked)) {
	color: var(--tt-grey-lightish);
	font-variation-settings: var(--fw-normal);
	min-height: var(--spacer-3);
}

.checkbox-explainer-icon {
	width: 1.6rem;
	height: 1.6rem;
	cursor: pointer;
	color: var(--tt-grey-lighterer);
	z-index: 5;
}

.checkbox-message {
	color: var(--tt-grey-lightish);
	font-variation-settings: var(--fw-light);
	margin-left: 2.8rem;
	text-wrap: balance;
	line-height: var(--semicondensed-line-height);
}

a:has(.logo) {
	height: 100%;
	text-decoration: none;
	text-decoration-skip-ink: none;
	text-decoration-thickness: unset;
	aspect-ratio: 2.28704784;
	margin-left: 0;
	transition: revert;
}

.shown {
	opacity: 1;
	transform: scaleX(1);
	max-width: auto;
	font-size: 0.4rem;
}

.notshown {
	/* display: none; */
	/* opacity: 0;
  padding: 0;
  max-width: 0;
  transform: scaleX(0);
  font-size: 0; */
}

.form-footer-container {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	justify-content: space-between;
	margin-top: var(--tight-content-spacer);
}

section:not(:first-of-type) {
	min-height: 80vh;
	/* display: grid; */
	place-items: center;
	place-content: center;
}

.header-gradient-accent.header-gradient-accent {
	text-underline-offset: 0;
	text-underline-position: unset;
	background: linear-gradient(
		114deg,
		var(--tt-mauve-main),
		var(--tt-purple-light),
		var(--tt-wine-main)
	);
	background-clip: text;
	color: transparent;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	position: relative;
}

.post-title {
	text-decoration: none;
	background: none;
	line-height: var(--condensed-line-height);
	position: relative;
	text-wrap: balance;
}

.header-gradient-accent.header-gradient-accent:hover {
	transition-delay: 0.2s;
	white-space: nowrap;
}

.base-lg {
	font-size: var(--tt-font-size-base-lg);
	font-size: var(--tt-font-size-base-lg);
}

.notfound {
	opacity: 0.2;
	color: var(--tt-purple-main);
	pointer-events: none;
	align-self: flex-end;
	margin: 0;
}

/* Can be customized per element or globally */
/* --exit-duration: 0.32s; */
/* transition: var(--quick-ease); */

/* .animated.entering,
.animated.hidden {
  transform: translateY(8vh);
  opacity: 0;
}

.animated.visible {
  transform: translateY(0);
  opacity: 1;
}

.animated.exiting,
.animated.exited {
  transform: translateY(-8vh);
  opacity: 0;
}

/* Pseudo-element handling */
/* .animated::before,
.animated::after {
  transition: inherit; */

html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

.lenis.lenis-smooth iframe {
	pointer-events: none;
}

.hamburger.expanded > .line {
	background-color: var(--tt-purple-lighter);
}

.hamburger.expanded > .line:nth-child(1) {
	transform: translateX(0.6rem) rotate(45deg);
}

.hamburger.expanded > .line:nth-child(2) {
	display: none;
}

.hamburger.expanded > .line:nth-child(3) {
	transform: translateX(-0.6rem) rotate(-45deg);
}

.char-counter {
	position: absolute;
	right: var(--spacer-1);
	bottom: calc(-1.5em - var(--spacer-1));
	margin: 0;
	color: var(--tt-grey-lightish);
	transition: var(--quick-ease-out);
}

textarea.blurred:not(:focus) .char-counter.invalid-count,
textarea.blurred:not(:focus) + * + .char-counter.invalid-count {
	color: var(--alert-red);
}

textarea ~ .char-counter.valid-count {
	color: var(--tt-mint-dark);
}

/* FOOTER STYLES */
:host {
	max-width: 100dvw;
	--footer-container-background-color: var(--tt-purple-main);
	--footer-container-background-color-hover: var(--tt-peach-main);
}

.footer-container {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--tt-purple-darker);
	color: white;
	width: 100%;
	/* height: clamp(360px, 400px, 480px); */
	z-index: 9999;
	/* Ensure it's above other content */
	/* background-color: var(--tt-purple-darker);
  box-shadow: 0px -240px 0 0 var(--tt-purple-darker); */
	z-index: 0;
}

.footer-container.flat {
	/* height: max(12rem, calc(9rem * (0.9 * (var(--dvh-1) / var(--dvw-1))))); */
	place-content: end;
	min-height: 10.4rem;
	/* height: calc(14.4rem * (var(--dvh-1) / var(--dvw-1))); */
}

.footer-container::before {
	position: absolute;
	bottom: 50%;
	left: 0;
	content: '';
	width: 100%;
	background: var(--tt-purple-darker);
	/* mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221439%22%20height%3D%22309%22%20viewBox%3D%220%200%201439%20309%22%20fill%3D%22none%22%20transform%3D%22scale(1%20-1)%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22m-147.375%20229.05%2072.24%2022.905c72.24%2022.905%20216.718%2068.715%20361.197%2053.445s288.959-91.62%20433.438-99.255%20288.96%2053.445%20433.44%2076.35%20288.96%207.635%20361.2%200l72.24-7.635V0H-147.375z%22%20fill%3D%22%234D2A9A%22%2F%3E%3C%2Fsvg%3E'); */
	/* mask-size: cover; */
	/* mask-position: center; */
	height: clamp(20.1rem, 34.1rem, 46.1rem);
	height: var(--footer-height);
}

.clip-container {
	position: relative;
	height: var(--target-height);
	width: 100%;
	z-index: 0;
	--target-height: 88px;
	/* box-shadow: 0 calc(var(--element-height) * 0.24)
    calc(var(--element-height) * 0.16) 0 var(--tt-purple-darker); */
}

.clip-container::before {
	content: '';
	position: absolute;
	width: 100dvw;
	bottom: -1px;
	height: var(--target-height);
	mask: url(../../assets/img/Wave-Header_Vector-2.svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	/* -webkit-mask-size: 100%, var(--element-height); */
	mask-position: center bottom;
	z-index: -1;
	/* transform: scaleY(calc(var(--element-height) / var(--target-height))); */
	background: var(--tt-purple-darker);
	transform-origin: center bottom;
	mask-size: 100% var(--element-height);
}

.clip-container::after {
	content: '';
	position: absolute;
	top: calc(100%);
	left: 0;
	width: 100%;
	height: var(--footer-height);
	background-color: var(--tt-purple-darker);
	z-index: 1;
}

.global-wrap.flat .clip-container {
	--target-height: 40px;
}

.global-wrap {
	/* padding-bottom: 480px; */
	z-index: 5;
}

.global-wrap.flat {
	margin-bottom: var(--footer-height);
}

/* :where(footer):not(.el-dialog__footer)::before {
	content: '';
	position: absolute;

	bottom: 0;

	width: 100%;
	height: 100vh;
	background-image: linear-gradient(
		164deg,
		var(--tt-purple-dark),
		var(--tt-purple-darker),
		var(--tt-purple-darkest)
	);
} */

#footer {
	position: fixed;
	bottom: 0;
	left: 0;
	height: clamp(360px, 400px, 480px);
}

/* .footer-container::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100vw;
  width: 100%;
  height: 100vh;
  background-color: var(--tt-purple-darker);
  z-index: -5;
} */

.footer-content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 auto;
	place-content: center;

	z-index: 0;
	pointer-events: auto;
	padding-bottom: max(1dvh, 2.4rem);
	gap: clamp(var(--spacer-2), 2.4dvh, 28px);
}

.footer-content.flat {
	display: grid;
	--footer-logo-width: clamp(104px, 20dvw, 192px);
	--footer-logo-height: calc(var(--footer-logo-width) / 2.28705845);
	grid-template-columns: var(--footer-logo-width) auto;
	justify-content: space-between;
	height: min-content;
	margin: 2.4rem auto;
	padding: unset;
	width: 100%;
}

.favicon-line {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	gap: var(--base-margin);
	width: 100%;
	pointer-events: auto;
	color: var(--tt-purple-lighter);
}

.fav-container.flat {
	height: 2rem;
	width: 2rem;
}

.favicon-line.flat {
	display: grid;
	grid-template-columns: repeat(5, 24px);
	gap: var(--base-margin);
	place-items: center end;
	width: fit-content;
	margin-bottom: var(--base-margin-025);
}

.authorisation.flat {
	font-size: var(--tt-font-size-xxs);
	font-size: var(--tt-font-size-xxs);
	text-align: center;
	z-index: 1;
	margin-left: 0;
	place-content: center;
	display: flex;
	margin-top: var(--base-margin-025);
}

.authorisation.flat > p {
	text-wrap: balance;
}

a.footer-links {
	line-height: normal;
}

#blog-logo-link,
.bloglogo,
#footer-site-logos a {
	height: 8.745rem;
	display: block;
}

.tt-logo.whitelogo.flat {
	margin-bottom: 0;
	aspect-ratio: 2.28705845;
	--footer-logo-width: clamp(104px, 20dvw, 192px);
	width: var(--footer-logo-width);
}

.fav-container {
	position: relative;
	width: 3.2rem;
	height: 3.2rem;

	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: var(--quick-ease-out);
	pointer-events: auto;
	z-index: 0;
}

.fav-container:hover svg {
	transform: scale(1.1);
	cursor: pointer;
	color: var(--tt-purple-light);
}

a:has(.fav-container):hover {
	color: var(--tt-purple-light);
}

.footer-links-container {
	text-align: left;

	justify-content: space-between;
}

.footer-non-logos {
	max-width: var(--tt-global-target-width);
	width: var(--tt-global-target-width);
}

.fixedbutton {
	position: fixed;
	color: var(--tt-white-main);

	visibility: visible;
	opacity: 1;
	animation: gentleBounce 2000ms infinite ease-in-out;
	z-index: 1;
}

#back-to-top:hover {
	color: var(--tt-wine-lighter);
	animation-play-state: paused;
}

#back-to-top:hover::before {
	content: 'Back to top';
	color: var(--tt-wine-lighter);
	font-size: inherit;
	position: absolute;
	white-space: nowrap;
	bottom: calc(10% - 2em);
	transform-origin: center;
	transform: translateX(-50%);
	text-align: center;
	animation: up-fixed var(--quick-ease-out) forwards;
	left: 0;
}

.fav-container > svg {
	position: absolute;
	height: 100%;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;

	pointer-events: auto;
	z-index: 9999;
}

.footer-links {
	color: var(--tt-purple-lighter);
}

.footer-links:hover {
	color: var(--tt-purple-light);
}

.footer-content > a {
	pointer-events: auto;
	margin: auto 0;
	/* filter: drop-shadow(0 0.8rem 1.6rem var(--tt-purple-darkest)); */
	width: 100%;
}

.footer-flat-right-column-container {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--spacer-2);
	/* height: calc(var(--footer-logo-width) / 2.28705845); */
	place-content: end;
}

/* END FOOTER STYLES */

.invisible {
	height: 0;
	opacity: 0;
	overflow: clip;
	transition: var(--quick-ease);
}

#nav-blog-the {
	margin: 0 var(--base-margin-025) 0 0;
}
#nav-blog-the,
#blog-word {
	transition: var(--quick-ease-out);
}

#user-dash {
	position: relative;
	width: 2.4rem;
	height: 2.4rem;
	display: block;
	transform: translateY(calc(-1.2rem + 0.504em));
}

#user-dash:hover,
#user-dash:hover::before {
	color: var(--tt-purple-lightest);
}

#user-dash svg {
	width: 100%;
	height: 100%;
	position: absolute;
}

.chevron {
	width: 1.2rem;
	justify-items: center;
	align-self: end;
}

.navbar-links li:has(.chevron) {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: var(--spacer-2);
	color: inherit;
}

.navbar-links .chevron {
	font-size: inherit;
	height: 1em;
	place-self: center;
}

.nav-link + .chevron:has(svg) svg {
	color: var(--tt-white-main);
}

.conditional-input:not(.reveal) {
	display: none;
}

.conditional-input.reveal {
	animation: appear var(--quick-ease) forwards;
}

.close-banner {
	position: absolute;
	right: var(--nav-global-padding);
	height: 2.4rem;
	width: 2.4rem;
	top: calc((var(--nav-height) - 1.2rem) / 2);
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--tt-peach-main);
	cursor: pointer;
	border-radius: 50%;
	background-color: var(--tt-white-main);
	transition: var(--quick-ease);
	z-index: 2;
}

.close-banner > svg {
	cursor: pointer;
	transform: scale(1.2);
}

.announcement-banner {
	background-color: var(--tt-peach-main);
	transition: var(--quick-ease);
	margin: auto;
	height: calc(var(--nav-height) - 1.2rem);
	place-content: center;
	display: flex;
	position: relative;
	z-index: 2;
}

.announcement-banner:hover {
	transition: var(--quick-ease);
	background-color: var(--tt-wine-light);
}

/* Hide the announcement banner when the navbar is inactive */
:has(.navbar.inactive) .announcement-banner {
	/* transform: translateY(-100%); */

	height: 0;
	overflow: hidden;
}

:has(.navbar.inactive) .close-banner {
	transform: translateY(-64px);
}

.banner-bar {
	display: flex;
	padding: var(--nav-item-padding) var(--nav-global-padding);
	justify-content: center;
	gap: var(--medium-content-spacer);
}

.announcement-message {
	margin: 0;
	color: var(--tt-white-main);
	margin: auto;
	height: min-content;
}

.banner-button.readmore {
	margin: 0;
	color: var(--tt-white-main);
}

.announcement-banner {
	transition: var(--gentle-ease);
	height: var(--current-height, auto);
	opacity: 1;
}

.announcement-banner.hidden {
	display: none;
}

.announcement-banner.showing {
	opacity: 0;
	height: 0;
}

.announcement-banner.hiding {
	opacity: 0;
	height: 0;
}

/* CSS */

div.hidden {
	display: none;
	padding: 0;
	overflow: hidden;
}

text {
	font-family: var(--base-font-family);
	font-size: var(--tt-font-size-base-sm);
	font-size: var(--tt-font-size-base-sm);
	transform: scale(1);
}

.wp-block-b-chart-chart,
.wp-block-b-chart-chart > * {
	font-family: var(--base-font-family);
}

.error-404-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: auto;
	width: 100%;
}
.tt-prose {
	max-width: min(var(--prose-width), 100%);
}
.tt-prose .header-1,
.tt-prose .display {
	font-size: var(--tt-font-size-header-lg);
}

.tt-prose .header-2,
.tt-prose .header-2 strong,
.tt-prose .header-2 b {
	font-variation-settings: var(--fw-medium);
	font-size: var(--tt-font-size-header-sm);
}

.tt-prose .header-3 {
	font-size: var(--tt-font-size-base-lg);
	font-variation-settings: var(--fw-medium);
}

.tt-prose .header-4 {
	font-size: var(--tt-font-size-base);
	font-variation-settings: var(--fw-bold);
	color: var(--tt-black-main);
}

.tt-prose h5.header-5 {
	font-size: var(--tt-font-size-base-sm);
}

.tt-prose p:has(+ h2),
.tt-prose ol:has(+ h2),
.tt-prose ul:has(+ h2),
.tt-prose li:has(+ h2) {
	margin-bottom: var(--base-margin-4);
}
.tt-prose p:has(+ h3),
.tt-prose ol:has(+ h3),
.tt-prose ul:has(+ h3),
.tt-prose li:has(+ h3),
.tt-prose h2:has(+ h3.header-3) {
	margin-bottom: var(--base-margin-25);
}

.tt-prose p + h3.header-3:has(+ p),
.tt-prose p + h4.header-4:has(+ p),
.tt-prose ul + h3.header-3:has(+ p),
.tt-prose ul + h4.header-4:has(+ p),
.tt-prose ol + h3.header-3:has(+ p),
.tt-prose ol + h4.header-4:has(+ p),
.tt-prose li + h3.header-3:has(+ p),
.tt-prose li + h4.header-4:has(+ p) {
	margin-bottom: var(--base-margin-05);
}

.tt-prose h2.header-2,
.tt-prose h3.header-3,
.tt-prose h4.header-4,
.tt-prose h5.header-5,
.tt-prose h6.header-6 {
	line-height: var(--semicondensed-line-height);
	line-height: var(--prose-header-line-height);
}

.tt-prose a {
	text-decoration-color: var(--tt-purple-light);
	text-decoration-thickness: 0.1em;
	text-underline-offset: 0.1em;
	font-variation-settings: var(--fw-semibold);
}
.tt-prose a:hover {
	text-decoration-color: var(--tt-purple-lighter);
	color: var(--tt-purple-darkish);
}

nav > div > ul > li:not(#user-dash):hover {
	background-color: var(--tt-purple-lighter);
}

.toggle-visible-button {
	cursor: pointer;
}

.toggle-visible {
	overflow: hidden;
	transition: var(--quick-ease);
	height: 0;
}

.toggle-visible.visible {
	height: var(--visible-height, 100%);
	opacity: 1;
}

.toggle-visible .inner-content-wrap {
	position: relative;
	/* transition: height var(--quick-ease); */
	width: 100%;
}
.inner-content:has(.nav-link) {
	gap: var(--base-margin-0375);
}

.toggle-visible.visible:has(.toggle-visible.visible) {
	transition: var(--quick-ease);
	height: var(--visible-height), calc(100% + 1px);
}

.toggle-visible.visible:has(.toggle-visible.hidden):not(
		:has(.toggle-visible.visible)
	) {
	--visible-height: unset !important;

	/* --visible-height: 100%; */
	height: var(--visible-height), 100%;
}

.toggle-visible .inner-content-wrap .inner-content {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	padding-bottom: 0.36rem;
}

:where(.inner-content p:last-of-type) {
	margin-bottom: 0;
}

#moderation-modal {
	display: none;
}

.toggle-visible.hidden {
	visibility: hidden;
	opacity: 0;
	display: inherit;
	margin: 0 !important;
	/* width: 100%; */
	height: 0 !important;
	transition:
		opacity var(--quick-ease),
		height var(--quick-ease),
		margin var(--quick-ease),
		visibility 0s var(--quick-ease);
}

.wp-block-group {
	margin: var(--loose-section-spacer) 0;
}

.expand-icon {
	mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDE2IDE2Ij4KPHBvbHlnb24gZmlsbD0iY3VycmVudGNvbG9yIiBwb2ludHM9IjgsMTMuODI5IDAuMDg2LDUuOTE0IDIuOTE0LDMuMDg2IDgsOC4xNzEgMTMuMDg2LDMuMDg2IDE1LjkxNCw1LjkxNCI+PC9wb2x5Z29uPgo8L3N2Zz4=');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 2.4rem;
	height: 2.4rem;
	transition: var(--quick-ease);
	mask-size: 50%;
	mask-repeat: no-repeat;
	mask-position: center;
	background-color: var(--tt-purple-light);
	animation: rotate-icon-up-down forwards var(--quick-ease-out);
}

.collapse-icon {
	mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDE2IDE2Ij4KPHBvbHlnb24gZmlsbD0iY3VycmVudGNvbG9yIiBwb2ludHM9IjEzLjA4NiwxMi45MTQgOCw3LjgyOSAyLjkxNCwxMi45MTQgMC4wODYsMTAuMDg2IDgsMi4xNzEgMTUuOTE0LDEwLjA4NiI+PC9wb2x5Z29uPgo8L3N2Zz4=');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 2.4rem;
	height: 2.4rem;
	transition: var(--quick-ease);
	mask-size: 50%;
	mask-repeat: no-repeat;
	mask-position: center;
	background-color: var(--tt-purple-lighter);
	animation: rotate-icon-down-up forwards var(--quick-ease-out);
}
@keyframes rotate-icon-down-up {
	0% {
		transform: rotate(180deg);
	}
	40% {
		transform: rotate(162deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}
@keyframes rotate-icon-up-down {
	0% {
		transform: rotate(-180deg);
	}
	40% {
		transform: rotate(-162deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.input-container:has(+ .input-container),
.input-container:has(+ .textarea-container),
.textarea-container:has(+ .input-container),
.textarea-container:has(+ .textarea-container) {
	margin-bottom: var(--tightest-content-spacer);
}

.input-container:has(+ .checkbox-label),
.input-container:has(+ div .checkbox-label),
.textarea-container:has(+ .checkbox-label),
.textarea-container:has(+ div .checkbox-label) {
	margin-bottom: var(--spacer-2);
}

.textarea-container:has(.char-counter) {
	margin-bottom: calc(var(--tt-font-size-xs) + var(--spacer-1));
}

/* form:has(input:required)::before {
  content: 'Fields marked with an * are required';
  font-size: var(--tt-font-size-xs);
font-size: var(--tt-font-size-xs);
  color: var(--tt-grey-lightish);
  display: block;
  margin-bottom: var(--spacer-1);
} */
form:has(input:required) .input-container {
	--is-first: 0;
}

form:not([data-multiple-fields='false'])
	div[data-is-first='true']:not(:only-child) {
	position: relative;
	margin-top: calc(var(--tt-font-size-xxs) + var(--spacer-1));
}
form:not([data-multiple-fields='false'])
	div[data-is-first='true']:not(:only-child)::before {
	content: 'Fields marked * are required';
	font-size: var(--tt-font-size-xxs);
	font-size: var(--tt-font-size-xxs);
	color: var(--tt-grey-lightish);
	display: block;
	margin-bottom: var(--spacer-1);
	position: absolute;
	z-index: 1;
	height: 1em;
	width: fit-content;
	/* transform: translateY(-1.75em); */
	font-variation-settings: var(--fw-light);
	white-space: nowrap;
	top: calc(-1em - 4px);
	line-height: 1;
}

form:not([data-multiple-fields='false'])
	input:required
	+ label.floating-label::after,
form:not([data-multiple-fields='false']) textarea:required + label::after {
	content: '*';
	color: inherit;
	opacity: 0.5;
}

.tt-button:hover {
	cursor: pointer;
}

.tt-button:not(.awaiting-response):hover::after {
	background-position: 4px 0;
}

@supports (margin-bottom: var(--post-title-spacing)) {
	h6:has(> .post-title),
	h5:has(> .post-title),
	h4:has(> .post-title),
	h3:has(> .post-title),
	h2:has(> .post-title),
	h6:has(> a .post-title),
	h5:has(> a .post-title),
	h4:has(> a .post-title),
	h3:has(> a .post-title),
	h2:has(> a .post-title) {
		margin-bottom: var(--post-title-spacing);
	}
}
@supports not (margin-bottom: var(--post-title-spacing)) {
	h6:has(> .post-title),
	h5:has(> .post-title),
	h4:has(> .post-title),
	h3:has(> .post-title),
	h2:has(> .post-title),
	h6:has(> a .post-title),
	h5:has(> a .post-title),
	h4:has(> a .post-title),
	h3:has(> a .post-title),
	h2:has(> a .post-title) {
		margin-bottom: max(0.5em, 0.8rem);
	}
}

a:has(.post-title) {
	text-decoration: none;
}

a:has(.post-title) .post-title {
	margin-bottom: 0;
}

a:has(.post-title):hover,
.entry-title:hover,
a.post-title:hover,
a.entry-title:hover {
	color: var(--tt-purple-main);
	cursor: pointer;
}

#bug-button {
	display: block;
	position: fixed;
	height: 1.6rem;
	width: 1.6rem;
	opacity: 0.5;
	z-index: 1000;
	left: 2.4rem;
	bottom: 2.4rem;
	transition: var(--quick-ease);
}

#bug-button svg {
	color: var(--tt-purple-main);
}

#bug-button:hover {
	opacity: 1;
}

#bug-button:hover::after {
	content: 'Report a bug';
	position: absolute;
	left: 50%;
	top: calc(50% - 2.5em - 0.8rem);
	transform: translate(-50%, -50%);
	background: var(--tt-purple-main);
	color: var(--tt-white-main);
	padding: var(--spacer-2);
}

#bug-button::before {
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	height: 2.4rem;
	width: 2.4rem;
	background: var(--tt-purple-lighter);
	border-radius: 50%;
	z-index: -1;
	transform: translate(-50%, -50%);
}

.success-message,
.error-message {
	position: relative;
	/* left: 0.5em; */
	/* not sure why this was set here, but we will see what breaks by disabling it! */
}

.success-message {
	color: var(--tt-mauve-main);
}

.error-message {
	color: var(--alert-red);
}

.error-icon {
	height: 0.8rem;
	width: 0.8rem;
	display: block;
	position: absolute;
	z-index: 10;
	top: 2.8rem;
	left: calc(100% - 1.2rem);
	transform: translate(-50%, -50%);
	background: var(--tt-apple-light);
	mask: url('../../assets/img/crossed.svg');
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	font-size: var(--font-size);
}

.input-container:has(.error-icon),
.textarea-container:has(.error-icon) {
	box-shadow:
		0 0 0.12rem 0 var(--alert-red),
		0 0 0.64rem -0.56rem var(--alert-red),
		0 0 0.56rem -0.36rem var(--alert-red);
}
.input-container:has(.error-icon) .floating-label {
	color: var(--alert-red);
}

.success-message:not(:empty):not(:blank)::after,
.error-message:not(:empty):not(:blank) {
	position: absolute;
	/* display: inline-block; */
	left: -1em;
	top: 0;
	height: 1em;
	width: 1em;
	/* transform: translateX(-50%); */
}

.success-message:not(:empty):not(:blank)::after {
	content: url('../../assets/img/valid.svg');
}

.error-message:not(:empty):not(:blank)::after {
	content: url('../../assets/img/crossed.svg');
}

.input-twofield .input-container {
	width: 100%;
	margin-top: 0;
}

.quasi-placeholder {
	position: absolute;
	left: 0.8rem;
	top: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	color: var(--tt-grey-lightish);
	pointer-events: none;
	width: calc(100% - 1.6rem);

	font-size: var(--tt-font-size-base);

	text-align: left;
	animation-delay: 0.16s;

	padding-top: 0;

	line-height: 1.28571429;
	position: absolute;
	pointer-events: none;
	flex-wrap: wrap;
	display: flex;
	height: 5.6rem;

	padding-top: calc(2.9rem + (0.5 * var(--tt-font-size-base-sm)) - 1em);
	align-content: center;
}
.quasi-placeholder::before {
	content: '';
	margin-bottom: -0.2839em;
	display: table;
}

.quasi-placeholder::after {
	content: '';
	margin-top: -0.3019em;
	display: table;
}

.textarea-container .quasi-placeholder {
	height: auto;
	padding-top: calc(2.9rem + (var(--tt-font-size-base-sm) - 1em));
}

.quasi-placeholder.visible {
	animation: fadeInFloatingLabel var(--quick-ease-out) forwards;

	overflow: visible;
}

.quasi-placeholder:not(.visible) {
	transform: var(--quasiPlaceholderHiddenTransform);
}

/* reset for chrome autofill colour */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
	/* -webkit-box-shadow: 0 0 0px 1000px var(--tt-formwhite) inset !important; */
	-webkit-background-clip: text;
	/* This is a bonus from here: https://github.com/nextui-org/nextui/issues/1346#issuecomment-1855635162*/
	transition: background-color 5000s ease-in-out 0s;
	color: var(--tt-black-main) !important;
	font-size: var(--tt-font-size-base) !important;
	font-variation-settings: var(--fw-normal) !important;
	font-family: var(--header-font-family), sans-serif !important;
}
input:-webkit-autofill::first-line {
	font-size: 19px !important;
}

:is(:-webkit-autofill, :autofill) {
	background-color: var(--tt-formwhite);
	font-size: var(--tt-font-size-base) !important;
}

.form-footer a {
	margin: var(--spacer-1) auto 0;
	text-align: center;
	display: block;
	color: var(--tt-grey-lightish);
	text-decoration: none;
	transition: var(--quick-ease);
	font-variation-settings: var(--fw-normal);
	position: relative;
}

.form-footer a:hover {
	color: var(--tt-purple-main);
	letter-spacing: -0.0112em;
	font-variation-settings: var(--fw-medium);
}

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10000;
	transition: var(--quick-ease);
}

.radio-button.other-option + .input-container:has(input.other-input) {
	grid-column: 1 / -1;
	transition: var(--quick-ease);
	display: none;
}

.radio-button.other-option:has(input:checked)
	+ .input-container:has(input.other-input) {
	visibility: visible;
	display: block;
	grid-column: 1 / -1;
	animation: appear var(--quick-ease);
}

.radio-button.other-option + .input-container > input.other-input {
	text-align: left;
	padding-top: calc((var(--container-height) * 0.5) - 0.5em);
}

.modal-wrapper {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	max-width: var(--tt-form-width);
	z-index: 10001;
	pointer-events: auto;
}

.modal-inner {
	background: var(--tt-white-main);
	padding: var(--base-margin);
	border-radius: var(--spacer-2);
	width: 100%;
	max-height: 90dvh;
	overflow-y: auto;
}

.tt-form .button-container {
	margin-top: var(--base-margin);
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	/* max-width: 36rem; */
}

.error-message:empty,
.error-message.hidden {
	/* display: block;
  animation: fadeOut var(--quick-ease);
  opacity: 0;
  height: 0;
  width: 100%;
  margin: 0 auto;
  transform: translateY(100%);
  */
	display: none;
}

.error-message:not(:empty):not(:blank) {
	opacity: 1;
	max-height: 100%;
	transform: translateY(4px) translateX(-50%);
	position: relative;
	text-align: center;
}

.multi-step-form-header {
	margin-bottom: var(--base-margin);
}

.tab-par {
	line-height: var(--semicondensed-line-height);
	margin-bottom: var(--base-margin-05);
	margin-top: var(--base-margin-025);
}
form:not(.simplified-form) .tab-par {
	color: var(--tt-grey-main);
}

.form-nextbutton:disabled {
	/* background: var(--tt-blue-lighterest); */
	color: var(--tt-purple-darkish);
	background: var(--tt-neutral-ui-lighter);
}

.form-nextbutton:disabled:hover {
	color: var(--tt-grey-main);
	background: var(--tt-grey-lighterest);
	cursor: not-allowed;
}

.form-nextbutton:disabled::after {
	background: transparent;
	content: '';
	z-index: 1;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: inherit;
	/* background: var(--tt-grey-lightish); */
	opacity: 0.1;
	pointer-events: auto;
}

.input-container:has(input:focus) .error-message,
.input-container:has(input:focus) + .error-message {
	visibility: hidden;
}

.post-card {
	background: var(--tt-white-main);
	padding: var(--spacer-10);
	border-radius: var(--b-rad-md);
	width: var(--cols-10);
	box-shadow: var(--card-shadow);
}

.circle-checkbox {
	display: none;
}

.circle-checkbox + svg {
	display: inline-block;
	transition: var(--quick-ease);
	z-index: 1;
	cursor: pointer;
}

.circle-checkbox-bg {
	fill: var(--bg-colour);
	--bg-colour: var(--tt-white-main);
}

.circle-checkbox-fg {
	fill: var(--fg-colour);
	--fg-colour: var(--tt-grey-light);
	transition: var(--quick-ease);
}

.circle-checkbox:checked + svg .circle-checkbox-fg {
	--fg-colour: var(--tt-purple-main);
}

.circle-checkbox:not(:checked) + svg .circle-checkbox-fg {
	--fg-colour: var(--tt-white-main);
}

.circle-checkbox:not(:checked) + svg {
	box-shadow: 0 0 0.2rem var(--tt-grey-dark);
	border-radius: 50%;
}

.circle-checkbox:checked + svg {
	box-shadow: 0 0.1rem 0.2rem var(--tt-mauve-lighter);
	border-radius: 50%;
}

.circle-checkbox:checked + svg.circle-checkbox-bg {
	--bg-colour: var(--tt-purple-lightest);
}

p:has(+ div),
p:has(+ form) {
	margin-bottom: var(--spacer-1);
}

p:has(+ ul),
p:has(+ ol),
p:has(+ table) {
	margin-bottom: var(--base-margin);
}
p:has(+ figure) {
	margin-bottom: var(--base-margin-2);
}

div > p:has(+ div > p) {
	margin-bottom: var(--base-margin);
}

.footer-content .authorisation > p {
	text-wrap: balance;
	margin-bottom: 0;
}

.recent-post-card .readmore {
	width: fit-content;
	padding-left: 0;
	margin-left: 0;
	margin-top: 1em;
	height: 1em;
}

.recent-post-card-text {
	display: flex;
	flex-direction: column;
	gap: var(--spacer-2);
}

.recent-post-card-text > *:not(.overline),
.recent-post-card-text > *:not(.readmore) {
	margin: 0;
}

p:empty {
	display: none;
}

/* form:has(input:required) :not(.input-twofield) > .input-container:first-of-type */
form:not([data-multiple-fields='false']):has(input:required)
	.input-container[data-is-first='true']:not(:only-child),
form:not([data-multiple-fields='false']):has(input:required)
	.input-container[data-is-first='true']:not(:only-child)
	+ button:last-child,
form:not([data-multiple-fields='false']):has(textarea:required)
	.textarea-container[data-is-first='true']:not(:only-child),
form:not([data-multiple-fields='false']):has(radio-group:required)
	.radio-group[data-is-first='true']:not(:only-child) {
	margin-top: calc(var(--tt-font-size-xxs) + var(--spacer-1));
}

.input-container[data-is-first='true'] + button:last-child {
	border-radius: 0 var(--b-rad-md) var(--b-rad-md) 0;
	/* outline: 1px solid var(--tt-mint-main); */
}

.input-container[data-is-first='true']:has(+ button:last-child) {
	border-radius: var(--b-rad-md) 0 0 var(--b-rad-md);
	outline: 1px solid var(--tt-grey-light);
}

.field-subheader:has(+ input:required)::after,
.field-subheader:has(+ div:has(input:required))::after,
.field-subheader:has(+ div > div:has(input:required))::after {
	content: '*';
	color: var(--tt-red-main);
}

.header-subheader-tuple:has(+ div input:required) .tab-subhead-sm::after,
.tab-subhead-sm:has(+ div textarea:required)::after {
	content: '*';
	color: var(--tt-grey-light);
}

.error-icon,
.error-message:not(:empty):not(:blank)::after {
	position: absolute;
	right: var(--spacer-2);
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
	font-size: inherit;
	width: 1em;
	height: 1em;
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="46.41 46.41 172.27 167.74"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(9.14286,9.14286)"><path d="M20.373,5.485c0.389,-0.389 1.025,-0.389 1.414,0l1.095,2.797c0.389,0.389 0.389,1.025 0,1.414l-3.564,3.564c-0.922,0.922 -0.825,2.445 0.208,3.241l4.1,3.164c0.389,0.389 0.389,1.025 0,1.414l-2.157,2.051c-0.389,0.389 -1.025,0.389 -1.414,0l-3.162,-3.162c-1.182,-1.182 -3.1,-1.182 -4.282,0l-3.162,3.162c-0.389,0.389 -1.025,0.389 -1.414,0l-1.414,-1.414c-0.389,-0.389 -0.389,-1.025 0,-1.414l5.301,-5.302l-5.304,-5.303c-0.389,-0.389 -0.389,-1.025 0,-1.414l1.414,-1.414c0.389,-0.389 1.025,-0.389 1.414,0l5.303,5.303z" fill="%23e89692"/><path d="M20.011,22.924c-0.384,0 -0.769,-0.146 -1.061,-0.438l-4.95,-4.95l-4.949,4.949c-0.586,0.583 -1.536,0.584 -2.122,0l-1.414,-1.414c-0.585,-0.585 -0.585,-1.536 0,-2.121l4.95,-4.95l-4.95,-4.95c-0.585,-0.585 -0.585,-1.536 0,-2.121l1.414,-1.415c0.584,-0.584 1.534,-0.585 2.122,0l4.949,4.951l4.95,-4.95c0.584,-0.584 1.537,-0.584 2.121,0l1.414,1.415c0.585,0.585 0.585,1.536 0,2.121l-4.95,4.949l4.95,4.95c0.585,0.585 0.585,1.536 0,2.121l-1.414,1.414c-0.292,0.292 -0.677,0.439 -1.06,0.439zM14,16.329c0.128,0 0.256,0.049 0.354,0.146l5.304,5.303c0.195,0.195 0.512,0.195 0.707,0l1.414,-1.414c0.195,-0.195 0.195,-0.512 0,-0.707l-5.304,-5.304c-0.094,-0.094 -0.146,-0.221 -0.146,-0.354c0,-0.133 0.053,-0.26 0.146,-0.354l5.304,-5.303c0.195,-0.195 0.195,-0.512 0,-0.707l-1.414,-1.415c-0.195,-0.195 -0.512,-0.195 -0.707,0l-5.304,5.304c-0.094,0.094 -0.221,0.146 -0.354,0.146c-0.133,0 -0.26,-0.053 -0.354,-0.146l-5.302,-5.303c-0.196,-0.194 -0.514,-0.192 -0.708,0l-1.414,1.415c-0.195,0.195 -0.195,0.512 0,0.707l5.304,5.303c0.094,0.094 0.146,0.221 0.146,0.354c0,0.133 -0.053,0.26 -0.146,0.354l-5.304,5.304c-0.195,0.195 -0.195,0.512 0,0.707l1.414,1.414c0.196,0.194 0.514,0.192 0.708,0l5.303,-5.303c0.097,-0.098 0.225,-0.147 0.353,-0.147z" fill="%23373b43"/></g></g></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	content: '';
}

.tabs-wrap {
	display: grid;
	transition: var(--gentle-ease);
	width: 100%;
	height: 100%;
	grid-auto-columns: 100%;
	grid-auto-flow: column;
	grid-template-rows: 1fr;
	margin-left: auto;
	margin-right: auto;
}
.simplified-form .tabs-wrap {
	gap: 16px;
}

.tab.flexcol {
	display: flex;
	gap: 0;

	height: 100%;
	/* Ensure the container takes full height */
	/* min-height: 100%; */
}

.tt-form:has(.tabs-wrap) {
	background: none;
}

.tt-form:has(.tabs-wrap):not(.campaign-form) .tab {
	background: var(--tt-form-bg);
}

.tt-form.nobg:has(.tabs-wrap) .tab {
	background: transparent;
}
.simplified-form.tt-form:has(.tabs-wrap) .tab {
	background: transparent;
	place-content: center;
	padding: 0.8rem;
}

.tt-form.outline:has(.tabs-wrap) .tab {
	border: 1px solid var(--tt-grey-light);
}

/* form:not(.simplified-form) .tabs-wrap .tab:not(:first-child) {
	margin-left: var(--base-margin);
} */

.tabs-wrap .tab.flexcol {
	margin-bottom: auto;
	margin-top: auto;
}
/* Target the first and last child elements */
.tab.flexcol .form-header-container,
.tab.flexcol .form-footer-container {
	height: fit-content;
	flex-grow: 0;
}

/* li.nomargin:has(#user-dash) {
	transform: translateY(25%);
} */

/* Target the middle child element */
.tab.flexcol .form-body-container {
	min-height: 0;
	height: 100%;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.simplified-form .tab {
	justify-content: start;
}

.field-group {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	place-content: start;
}

/* .field-group > div, */
.field-group:has(+ .field-group),
.field-group:not(:last-child) {
	margin-bottom: var(--base-margin);
}

.tab-subhead-sm + .input-twofield:has(.input-container) {
	padding-top: 0;
}

.form-message-text-sm {
	padding: var(--spacer-3);
	background: var(--tt-grey-lighter);
	color: var(--tt-grey-dark);
	margin-bottom: var(--spacer-2);
}

.input-twofield + .input-twofield:has(.input-container:not(:first-child)),
.tab-subhead-sm {
	margin-top: 0.4rem;
}

.input-twofield {
	display: grid;
	gap: 0;
}

.footer-container.full-stuff #footer-site-logos a:not(:has(.whitelogo)) {
	height: 2.4rem;
}
.footer-container.full-stuff #footer-site-logos {
	place-items: center;
	display: flex;
	flex-direction: row;
	column-gap: var(--base-margin);
	margin-bottom: var(--base-margin);
	justify-content: space-between;
	place-items: end;
}

.full-stuff .fav-container {
	height: 2.4rem;
	width: 2.4rem;
}
.full-stuff .favicon-line {
	display: grid;
	grid-auto-flow: column;
	gap: var(--base-margin);
	width: unset;
}
/* MEDIA QUERIES */

@media (max-width: 100vh) {
	.input-twofield .input-container:not(:first-child) {
		margin-top: var(--spacer-2);
	}
}

@media (min-width: 100vh) {
	.input-twofield:has(.input-container) {
		gap: 0.8rem;
	}
}
@media screen and (max-width: 1024px) {
	:root {
		--tt-img-lg: calc(49.6rem * 0.8);
		--tt-img-md: calc(36rem * 0.8);
		--tt-img-sm: calc(24rem * 0.8);
		--tt-img-xs: calc(16rem * 0.8);
		--tt-img-thumbnail: calc(8.8rem * 0.8);
		--tt-img-thumbnail-sm: calc(4.8rem * 0.8);
		--tt-img-thumbnail-xs: calc(3.2rem * 0.8);
	}
}

@media (max-width: 824px) {
	:root {
		--tt-img-lg: calc(49.6rem * 0.64);
		--tt-img-md: calc(36rem * 0.64);
		--tt-img-sm: calc(24rem * 0.64);
		--tt-img-xs: calc(16rem * 0.64);
		--tt-img-thumbnail: calc(8.8rem * 0.64);
		--tt-img-thumbnail-sm: calc(4.8rem * 0.64);
		--tt-img-thumbnail-xs: calc(3.2rem * 0.64);
	}
	.footer-content {
		place-content: end;
		padding-bottom: var(--spacer-6);
		gap: var(--medium-content-spacer);
	}

	.clip-container {
		--target-height: 40px;
	}

	#navbar .inner-content {
		padding-bottom: 0;
	}

	body.logged-in #user-dash::after {
		content: 'Dashboard';
		color: var(--tt-white-main);
	}
	body.logged-in #user-dash::before {
		content: none;
	}

	body.logged-in #user-dash svg {
		display: none;
	}

	.nav-link {
		font-size: var(--tt-font-size-header);
		width: 100%;
	}

	.nav-link[href='../donate'] {
		background-color: unset;
		padding: 0;
	}
	#navbar .chevron-container {
		background: transparent;
	}

	.nav-link[href='../donate'] {
		--text-colour: var(--tt-mint-main);
	}

	.tt-logo.whitelogo {
		margin-bottom: 0;
	}

	.fav-container {
		width: 3.2rem;
		height: 3.2rem;
	}

	.base.navbar-links {
		display: none;
	}

	section:not(:first-of-type) {
		min-height: 80vh;
	}

	.hb {
		display: block;
		height: 32px;
		transition: transform 0.5s cubic-bezier(0.85, 0, 0.15, 1);
	}

	.hb.active {
		transform: rotate(360deg);
		stroke: var(--tt-purple-light);
	}

	.hb path {
		transition: d 0.5s cubic-bezier(0.85, 0, 0.15, 1);
	}

	.hb.active path {
		d: path('M3,3L5,5L7,3M5,5L5,5M3,7L5,5L7,7');
	}

	.hb + ul.base.navbar-links {
		transition: var(--gentle-ease);
	}

	.hb.active + ul.base.navbar-links {
		position: fixed;
		height: 100dvh;
		width: 80dvw;
		top: 0;
		right: 0;
		gap: unset;
		padding-left: 0;
		z-index: -1;
		padding-top: var(--nav-height);
		/* padding-right: var(--base-margin); */
		text-align: right;
		display: grid;
		/* background-color: var(--tt-purple-light); */
		grid-auto-rows: 1fr;
		grid-auto-flow: row;
		grid-auto-columns: 1fr;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		transition: var(--quick-ease);
		animation: slidein var(--gentle-ease) forwards;
	}

	.hb.inactive + ul.base.navbar-links {
		position: fixed;
		height: 100vh;
		width: 80dvw;
		top: 0;
		right: 0;
		gap: unset;
		padding-left: 0;
		z-index: -1;
		padding-top: var(--nav-height);
		/* padding-right: var(--base-margin); */
		text-align: right;
		display: grid;
		/* background-color: var(--tt-purple-light); */
		grid-auto-rows: 1fr;
		grid-auto-flow: row;
		grid-auto-columns: 1fr;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		transition: var(--quick-ease);
		animation: slideout var(--gentle-ease) forwards;
	}

	.hb.inactive + ul.base.navbar-links li {
		height: 100%;
		display: block;
		place-content: center;
		animation: slideout var(--gentle-ease) forwards;
	}

	.navbar.inactive > .hb.active + ul.base.navbar-links {
		top: 6.4rem;
		padding-top: 0;
	}

	.hb + ul.base.navbar-links::before {
		transition: var(--quick-ease);
	}

	.hb.active + ul.base.navbar-links::before {
		content: '';
		position: absolute;
		width: 200dvw;
		height: 100%;
		background: linear-gradient(to right, var(--transparent-to-black));
		left: -120dvw;
		top: 0;
		z-index: -2;
		/* backdrop-filter: blur(2px); */
		opacity: 1;
	}

	.hb.inactive + ul.base.navbar-links::before {
		content: '';
		position: fixed;
		width: 200dvw;
		height: 100vh;
		background: linear-gradient(to right, var(--transparent-to-black));
		left: -120dvw;
		top: 0;
		opacity: 100%;
		animation: removeOverlay var(--gentle-ease) forwards;
		z-index: -2;
	}

	#navbar {
		align-items: center;
	}
	.hb {
		transition: var(--quick-ease);
	}
	#navbar:not(.inactive) .hb.active {
		background-color: var(--tt-purple-darker);
		border-radius: 50%;
	}

	#navbar:not(.inactive) .hb.active:hover {
		background-color: var(--tt-purple-darkerish);
	}

	#navbar.inactive .hb.active {
		background-color: transparent;
		border-radius: 50%;
	}
	nav ul {
		margin: 0;
		align-items: center;
	}
	.navbar-links {
		margin-top: 0;
	}
	.chevron-container,
	.chevron-container .toggle-visible {
		background: transparent;
		/* place-self: end; */
		padding: 0;
	}
	.navbar-links .chevron-container .toggle-visible .inner-content-wrap {
		left: 0;
	}
	.navbar-links
		.chevron-container
		.toggle-visible
		.inner-content-wrap
		.inner-content::before {
		background: none;
		content: none;
	}
	.navbar-links li.nomargin:has(.toggle-visible-button) {
		display: flex;
		place-content: flex-end;
	}
	.nav-link-wrap {
		flex-direction: row-reverse;
	}
	.navbar-links
		li.nomargin:has(.toggle-visible-button)
		.toggle-visible-button,
	.navbar-links li.nomargin:has(.toggle-visible-button) > a,
	.navbar-links .chevron {
		height: 1em;
		width: 1em;
		font-size: inherit;
	}

	.navbar-links a.nav-link:hover {
		color: var(--tt-blue-lighterer);
	}

	li.nomargin:has(#user-dash) {
		margin: unset;
		transform: translateY(0);
		&:hover #user-dash::after {
			color: var(--tt-purple-lighterer);
		}
	}

	#user-dash::after {
		transition: var(--quick-ease-out);
	}
	.chevron-container a.nav-link.sm {
		font-size: var(--tt-font-size-base);
		position: relative;
		margin-top: var(--base-margin-025);
		--background-colour: var(--tt-purple-lightest);
		color: var(--background-colour);
		margin-right: calc(1ch + 1em);
		transition: var(--quick-ease-out);
	}

	.chevron-container a.nav-link.sm:hover {
		--background-colour: var(--tt-apple-lighterest);
	}
	.hb.inactive .chevron-container {
		width: fit-content;
		& .nav-link-wrap {
			display: flex;
			flex-direction: row-reverse;
		}
	}
	/* .chevron-container a.nav-link.sm::after {
		content: '';
		mask: url(../img/arrow-right.svg) no-repeat center center / contain;
		position: absolute;
		left: calc(100% + 1ch);
		height: 1em;
		width: 1em;
		top: 50%;
		transform: translateY(-50%);
		transition: var(--quick-ease-out);
		background: var(--background-colour);
	} */

	@keyframes removeOverlay {
		0% {
			opacity: 100%;
			width: 200dvw;
		}

		99% {
			opacity: 0%;
			width: 180dvw;
		}
		/* 100% {
			display: none;
		} */
	}

	li > div.speech-bubble > a.blog-logo {
		position: relative;
		overflow: visible;
		display: flex;
		flex-direction: row;
		justify-content: end;
		align-items: center;
		margin-right: unset;
	}

	a#nav-blog > #blog-word::before {
		content: none;
	}

	a#nav-blog > #blog-word {
		margin-left: 0;
		padding: 0 0 0 0.33ch;
		transform: translateY(12.25%);
		/* color: var(--tt-purple-main); */
	}

	#nav-blog-the {
		color: var(--tt-white-main);
	}

	#nav-blog {
		place-content: baseline end;
		display: flex;
		color: var(--tt-white-main);
	}

	ul.base.navbar-links > li {
		animation: slidein var(--gentle-ease) forwards;
		padding: var(--base-margin) var(--base-margin-15) var(--base-margin)
			var(--base-margin-2);
		align-content: center;
		height: 100%;
		width: 100%;
		transition: var(--quick-ease-out);
	}

	.ul.base.navbar-links > li:has(.chevron-container) {
		pointer-events: none;
	}

	.ul.base.navbar-links > li:has(.chevron-container) > .nav-link {
		pointer-events: auto;
	}

	ul.base.navbar-links > li:nth-child(1) {
		animation-delay: 0.02s;
		background-color: var(--tt-purple-darkest);
		background-color: transparent;
	}

	ul.base.navbar-links > li:nth-child(1):hover {
		color: var(--tt-blue-lighterer);
	}

	ul.base.navbar-links > li:nth-child(1) > .nav-link {
		color: var(--tt-white-main);
		font-variation-settings: var(--fw-medium);
		padding: 0;
	}

	ul.base.navbar-links > li:nth-child(2) {
		animation-delay: 0.04s;
		background-color: var(--tt-purple-darkerer);
		background-color: transparent;
	}

	ul.base.navbar-links > li:nth-child(2) > .nav-link {
		color: var(--tt-white-main);
	}

	ul.base.navbar-links > li:nth-child(3) {
		animation-delay: 0.06s;
		background-color: var(--tt-purple-darkerish);
		background-color: transparent;
	}

	ul.base.navbar-links > li:nth-child(3) > .nav-link {
		color: var(--tt-white-main);
	}

	ul.base.navbar-links > li:nth-child(4) {
		animation-delay: 0.08s;
		background-color: var(--tt-purple-dark);
		background-color: transparent;
	}

	ul.base.navbar-links > li:nth-child(4) > .nav-link {
		color: var(--tt-white-main);
	}

	ul.base.navbar-links > li:nth-child(4) > .nav-link:hover {
		color: var(--tt-violet-light);
	}

	ul.base.navbar-links > li:nth-child(5) {
		animation-delay: 0.1s;
		background-color: var(--tt-purple-darkish);
		background-color: transparent;
	}

	ul.base.navbar-links > li:nth-child(5) > .nav-link {
		color: var(--tt-white-main);
	}
	ul.base.navbar-links > li:nth-child(5) > .nav-link:hover {
		color: var(--tt-purple-lighterer);
	}

	ul.base.navbar-links > li:nth-child(6) {
		animation-delay: 0.12s;
		background-color: var(--tt-purple-main);
		background-color: transparent;
	}

	ul.base.navbar-links > li:nth-child(6) > .nav-link {
		color: var(--tt-mint-main);
	}

	ul.base.navbar-links > li:nth-child(7) {
		animation-delay: 0.14s;
		background-color: var(--tt-purple-lightish);
		background-color: transparent;
	}

	.nomargin > #user-dash > svg {
		visibility: hidden;
	}

	.nomargin > #user-dash {
		width: 100%;
		height: 100%;
		display: block;
	}
	body.admin-bar #navbar:not(.inactive):has(.hb.active) .navbar-links {
		height: calc(100dvh - var(--nav-height) - 3.2rem);
		padding-top: 0;
		margin-bottom: 0;
		bottom: 0;
		top: calc(var(--nav-height) + 32px);
	}
	/* not admin bar logged in */
	#navbar:not(.inactive):has(.hb.active) .navbar-links {
		height: calc(100dvh - var(--nav-height));
		padding-top: 0;
		margin-bottom: 0;
		bottom: 0;
		top: var(--nav-height);
	}
	body.admin-bar #navbar.inactive:has(.hb.active) .navbar-links {
		height: calc(100dvh - 32px - 1.2rem);
		padding-top: 0;
		margin-bottom: 0;
		/* bottom: 0; */
		top: calc(1.2rem + 32px);
	}
	#navbar.inactive:has(.hb.active) .navbar-links {
		height: calc(100dvh - 1.2rem);
		padding-top: 0;
		margin-bottom: 0;
		/* bottom: 0; */
		top: 1.2rem;
	}

	.nomargin > #user-dash::before {
		content: 'Login';
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		width: fit-content;
		height: auto;
		transition: var(--quick-ease-out);
		color: var(--tt-white-main);
		font-size: var(--tt-font-size-header);
	}
	.nomargin > #user-dash:hover::before,
	.nomargin > #user-dash:hover {
		color: var(--tt-purple-lighterer);
	}
	ul.base.navbar-links > li:nth-child(8) {
		animation-delay: 0.16s;
		background-color: var(--tt-purple-darkest);
	}

	ul.base.navbar-links > li:nth-child(9) {
		animation-delay: 0.18s;
		background-color: var(--tt-black-main);
	}

	ul.base.navbar-links > li:nth-child(10) {
		animation-delay: 0.2s;
		background-color: var(--tt-black-darker);
	}

	.navbar-links li.nomargin .nav-link {
		display: block;
		height: 100%;
		place-content: center;
		width: 100%;
	}
	:root {
		--loose-section-spacer: var(--base-margin-6);
		--medium-section-spacer: var(--base-margin-3);
	}
}

@media screen and (max-width: 782px) {
	body.admin-bar:not(.scrolled-past-admin)
		#navbar:not(.inactive):has(.hb.active)
		.navbar-links {
		height: calc(100dvh - var(--nav-height) - 46px);
		padding-top: 0;
		margin-bottom: 0;
		bottom: 0;
		top: calc(var(--nav-height) + 46px);
	}
}

@media screen and (max-width: 782px) {
	body.logged-in.scrolled-past-admin
		#masthead.site-header:has(.navbar.inactive) {
		top: calc(1.2rem - var(--nav-height));
	}
	body.admin-bar.scrolled-past-admin
		#navbar:not(.inactive):has(.hb.active)
		.navbar-links {
		height: calc(100dvh - var(--nav-height));
		padding-top: 0;
		margin-bottom: 0;

		top: var(--nav-height);
	}
	body.admin-bar #navbar.inactive:has(.hb.active) .navbar-links {
		height: calc(100dvh - 1.2rem);
		padding-top: 0;
		margin-bottom: 0;

		top: 1.2rem;
	}
}
@media (max-width: 768px) {
	.campaign-footnotes-wrapper,
	.post-footnotes-wrapper {
		border-top: none;
		padding-top: 0;
		position: relative;
	}
	.campaign-footnotes-wrapper::before,
	.post-footnotes-wrapper::before {
		content: '';
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		width: 100vw;
		height: 1px;
		background-color: var(--tt-grey-light);
	}
}

@media only screen and (max-width: 600px) {
	form {
		max-width: 90vw;
		min-width: initial;
		margin: auto;
	}

	body.admin-bar.logged-in:not(.scrolled-past-admin)
		.hz-card-display.news-wrapper
		span.header-sm {
		top: calc(2rem + 46px);
	}

	body.admin-bar.logged-in.scrolled-past-admin
		.hz-card-display.news-wrapper
		span.header-sm {
		top: 1.6rem;
	}

	#wpadminbar + #page > #masthead {
		margin-top: 0;
	}

	a.footer-links {
		width: fit-content;
	}

	.footer-links-container.base-sm.flexrow {
		max-width: var(--tt-global-max-width);
		width: 100%;
		gap: var(--base-margin-05);
		justify-content: space-between;
		white-space: normal;
		display: grid;
		grid-template-columns: 1fr 1fr;
		font-size: var(--tt-font-size-xs);
		row-gap: var(--base-margin-2);
		margin-bottom: var(--base-margin-2);
	}

	.footer-container.flat .footer-links-container {
		flex-direction: row;
		text-align: right;
		font-size: var(--tt-font-size-xxs);
		line-height: var(--semicondensed-line-height);
		margin-right: 0;
		place-items: end;
		gap: var(--base-margin-05);
		white-space: nowrap;
	}

	.authorisation.flat {
		/* margin-top: var(--spacer-2); */
		text-align: right;
	}

	.post-card {
		width: 100%;
		margin: auto;
	}
}

@media (max-width: 468px) {
	.display {
		hyphens: auto;
	}

	.site-content {
		padding-bottom: 12dvh;
	}

	.footer-container:not(.flat) .authorisation {
		max-width: var(--tt-global-max-width);
	}

	.footer-container:not(.flat) .footer-content .authorisation > p {
		max-width: unset;
		width: auto;
		margin: auto;
	}
}

@media (max-width: 425px) {
	.authorisation {
		max-width: 100%;
	}

	.authorisation > p {
		text-wrap: balance;
	}
}

@media (min-width: 1200px) {
	/* .tt-global-container {
    margin-left: calc((100vw - var(--tt-global-target-width)) / 2);
    margin-right: calc((100vw - var(--tt-global-target-width)) / 2);
  } */

	section:not(:first-of-type) {
		min-height: min(72vh, 40.5vw);
	}
}

/* ANIMATION STYLES */

@-webkit-keyframes loading {
	0% {
		/* -webkit-transform: rotate(0deg);
    transform: rotate(0deg); */
		background: var(--tt-grey-lightish);
	}

	20% {
		/* -webkit-transform: rotate(360deg);
    transform: rotate(360deg); */
		background: var(--tt-grey-lightish);
	}

	20% {
		background: var(--tt-purple-main);
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	40% {
		background: var(--tt-purple-main);
		/* -webkit-transform: rotate(360deg);
    transform: rotate(360deg); */
	}

	40% {
		background: var(--tt-wine-light);
		/* -webkit-transform: rotate(0deg);
    transform: rotate(0deg); */
	}

	60% {
		background: var(--tt-wine-light);
		/* -webkit-transform: rotate(360deg);
    transform: rotate(360deg); */
	}

	60% {
		background: var(--tt-mauve-main);
		/* -webkit-transform: rotate(0deg);
    transform: rotate(0deg); */
	}

	80% {
		background: var(--tt-mauve-main);
		/* -webkit-transform: rotate(360deg);
    transform: rotate(360deg); */
	}

	80% {
		background: var(--tt-peach-main);
		/* -webkit-transform: rotate(0deg);
    transform: rotate(0deg); */
	}

	100% {
		background: var(--tt-peach-main);
		/* -webkit-transform: rotate(360deg);
    transform: rotate(360deg); */
	}
}

@keyframes loading {
	0% {
		background: var(--tt-grey-lightish);
		/* -webkit-transform: rotate(0deg);
    transform: rotate(0deg); */
	}

	20% {
		background: var(--tt-grey-lightish);
		/* -webkit-transform: rotate(360deg);
    transform: rotate(360deg); */
	}

	20% {
		background: var(--tt-purple-main);
		/* -webkit-transform: rotate(0deg);
    transform: rotate(0deg); */
	}

	40% {
		background: var(--tt-purple-main);
		/* -webkit-transform: rotate(360deg);
    transform: rotate(360deg); */
	}

	40% {
		background: var(--tt-wine-light);
		/* -webkit-transform: rotate(0deg);
    transform: rotate(0deg); */
	}

	60% {
		background: var(--tt-wine-light);
		/* -webkit-transform: rotate(360deg);
    transform: rotate(360deg); */
	}

	60% {
		background: var(--tt-mauve-main);
		/* -webkit-transform: rotate(0deg);
    transform: rotate(0deg); */
	}

	80% {
		background: var(--tt-mauve-main);
		/* -webkit-transform: rotate(360deg);
    transform: rotate(360deg); */
	}

	80% {
		background: var(--tt-peach-main);
		/* -webkit-transform: rotate(0deg);
    transform: rotate(0deg); */
	}

	100% {
		background: var(--tt-peach-main);
		/* -webkit-transform: rotate(360deg);
    transform: rotate(360deg); */
	}
}

@keyframes fadeinopacity {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes up {
	0% {
		top: 100%;
		opacity: 0;
	}

	20% {
		opacity: 1;
	}

	100% {
		top: 50%;
	}
}

@keyframes slidein {
	0% {
		display: none;
		transform: translateX(100%);
		opacity: 0;
	}

	1% {
		display: block;
		transform: translateX(100%);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slideout {
	0% {
		transform: translateX(0);
		opacity: 1;
	}

	99% {
		transform: translateX(100%);
		opacity: 1;
	}

	100% {
		transform: translateX(100%);
		opacity: 0;
		display: none;
	}
}

@keyframes appear {
	0% {
		display: unset;
		opacity: 0;
		height: 0px;
		transform: translateY(20%);
	}

	1% {
		display: block;
		height: calc(var(--container-height) / 56);
		opacity: 0;
		transform: translateY(20%);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
		display: block;
		height: var(--container-height);
	}
}

@keyframes disappear {
	0% {
		opacity: 1;
		transform: translateY(0);
	}

	99% {
		display: block;
		opacity: 0;
		transform: translateY(20%);
	}

	100% {
		display: none;

		opacity: 0;
		transform: translateY(20%);
	}
}

@keyframes show-content {
	0% {
		display: block;
		height: 0;
		overflow: hidden;
	}

	1% {
		height: calc(var(--target-height) * 0.01);
		display: block;
		overflow: hidden;
	}

	100% {
		height: var(--target-height);
	}
}

@keyframes show-content {
	0% {
		display: unset;
		opacity: 0;
		height: 0px;
		transform: translateY(20%);
	}

	1% {
		display: block;
		height: calc(var(--container-height) / 56);
		opacity: 0;
		transform: translateY(20%);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
		display: block;
		height: var(--container-height);
	}
}

@keyframes show-content-grid {
	0% {
		display: unset;
		opacity: 0;
		height: 0px;
		transform: translateY(20%);
	}

	1% {
		display: grid;
		height: calc(var(--container-height) / 56);
		opacity: 0;
		overflow: hidden;
		transform: translateY(20%);
	}

	66% {
		overflow: visible;
	}

	100% {
		opacity: 1;
		transform: translateY(0);
		display: grid;

		height: var(--container-height);
	}
}

@keyframes hide-content {
	from {
		height: var(--current-height);
		display: block;
		overflow: hidden;
	}

	to {
		height: 0;
	}
}

@keyframes fadeInFloatingLabel {
	0% {
		opacity: 0;
		visibility: hidden;
		overflow: hidden;
		transform: var(--quasiPlaceholderHiddenTransform);
	}

	1% {
		opacity: 0;
		overflow: visible;
		visibility: visible;
		transform: var(--quasiPlaceholderHiddenTransform);
	}

	100% {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}
@keyframes fadeIn {
	from {
		opacity: 0;
		height: 1%;
		visibility: hidden;
		transform: translateY(0.25em);
	}

	25% {
		opacity: 0;
		visibility: visible;
		transform: translateY(0.25em);
	}

	to {
		opacity: 1;
		transform: translateY(0);
		height: 100%;
		visibility: visible;
	}
}

@keyframes fadeOut {
	0% {
		opacity: 1;
		max-height: 1em;
		margin: var(--spacer-1) auto var(--spacer-2);
		transform: translateY(0);
	}

	100% {
		opacity: 0;
		max-height: 0;
		margin: 0 auto;
		transform: translateY(1em);
	}

	100% {
		visibility: hidden;
	}
}

@keyframes rotate-spin {
	0% {
		transform: translate(-50%, -50%) rotate(0) scale(1);
	}

	5% {
		transform: translate(-50%, -50%) rotate(-10deg) scale(0.9);
	}

	90% {
		transform: translate(-50%, -50%) rotate(10deg) scale(1.12);
	}

	100% {
		transform: translate(-50%, -50%) rotate(8deg) scale(1.1);
	}
}

@keyframes up-fixed {
	from {
		transform: translateY(1em) translateX(-33.3%);
		opacity: 0;
	}

	to {
		transform: translateY(0) translateX(-33.3%);
		opacity: 1;
	}
}

@keyframes gentleBounce {
	0% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(0);
	}

	45% {
		transform: translateY(calc(var(--spacer-1)));
	}

	60% {
		transform: translateY(calc(var(--spacer-2) * -1));
	}

	65% {
		transform: translateY(calc(var(--spacer-2) * -1));
	}

	75% {
		transform: translateY(var(--spacer-1));
	}

	100% {
		transform: translateY(0);
	}
}