/* -------------------------------------------------------------------------- */
/* Variables */

:root {

    /* PRIMARY -- EMERALD */
    --primary-50: #ecfdf5;
    --primary-100: #d1fae5;
    --primary-200: #a7f3d0;
    --primary-300: #6ee7b7;
    --primary-400: #34d399;
    --primary-500: #10b981;
    --primary-600: #059669;
    --primary-700: #047857;
    --primary-800: #065f46;
    --primary-900: #064e3b;
    --primary-950: #022c22;
    
    /* SECONDARY -- MARINER BLUE */
    --secondary-50:  #f1f7fe;
    --secondary-100: #e1effd;
    --secondary-200: #bdddfa;
    --secondary-300: #82c3f7;
    --secondary-400: #40a4f0;
    --secondary-500: #1788e0;
    --secondary-600: #0b71c9;
    --secondary-700: #0a559a;
    --secondary-800: #0c4980;
    --secondary-900: #103e6a;
    --secondary-950: #0b2746;

    /* TERTIARY -- EAST SIDE */
    --tertiary-50:  #faf8fc;
    --tertiary-100: #f4eff8;
    --tertiary-200: #ece1f3;
    --tertiary-300: #dcc9e9;
    --tertiary-400: #b995d2;
    --tertiary-500: #ad84c8;
    --tertiary-600: #9768b5;
    --tertiary-700: #81549c;
    --tertiary-800: #6c4881;
    --tertiary-900: #583b68;
    --tertiary-950: #3c2249;

    /* COOL -- ZINC */
    --cool-50:  #fafafa;
    --cool-100: #f4f4f5;
    --cool-200: #e4e4e7;
    --cool-300: #d4d4d8;
    --cool-400: #a1a1aa;
    --cool-500: #71717a;
    --cool-600: #4D4D56;
    --cool-700: #3f3f46;
    --cool-800: #27272a;
    --cool-900: #18181b;
    --cool-950: #09090b;

    /* STATUS */
    --success:     #20C997;
    --warning:     #FFC726;
    --danger:      #DC3545;

    /* B&W */
    --black: #000000;
    --white: #ffffff;

    /* FONT SIZES - 400px -> 1500px */
    --text-900:	clamp(2.625rem, 1.6704545454545454rem + 3.8181818181818183vw, 5.25rem);             /* 42px --> 84px  */
    --text-800:	clamp(2.1875rem, 1.5511363636363638rem + 2.5454545454545454vw, 3.9375rem);          /* 35px --> 63px  */
    --text-700:	clamp(1.8125rem, 1.4034090909090908rem + 1.6363636363636365vw, 2.9375rem);          /* 29px --> 47px  */
    --text-600:	clamp(1.5rem, 1.2272727272727273rem + 1.090909090909091vw, 2.25rem);                /* 24px --> 36px  */
    --text-500:	clamp(1.25rem, 1.0909090909090908rem + 0.6363636363636364vw, 1.6875rem);            /* 20px --> 27px  */
    --text-400:	clamp(1.0625rem, 0.9943181818181818rem + 0.27272727272727276vw, 1.25rem);           /* 17px --> 20px  */
    --text-300:	clamp(0.9375rem, 0.8920454545454546rem + 0.18181818181818182vw, 1.0625rem);         /* 15px --> 17px  */
    --text-200:	clamp(0.75rem, 0.6818181818181818rem + 0.27272727272727276vw, 0.9375rem);           /* 12px --> 15px  */
    --text-100:	clamp(0.625rem, 0.5795454545454546rem + 0.18181818181818182vw, 0.75rem);            /* 10px --> 12px  */

    /* SPACING -------------------------------------------------------------- */
    /* @link https://utopia.fyi/space/calculator?c=400,17,1.2,1500,20,1.333,6,3,&s=0.75|0.5,1.5|2.25|3|4.5|6|9,&g=xs,xl,xl,12 */

    /* Space 100: 9px → 10px */     --space-100: clamp(0.5625rem, 0.5398rem + 0.0909vw, 0.625rem);
    /* Space 200: 13px → 15px */    --space-200: clamp(0.8125rem, 0.767rem + 0.1818vw, 0.9375rem);
    /* Space 300: 17px → 20px */    --space-300: clamp(1.0625rem, 0.9943rem + 0.2727vw, 1.25rem);
    /* Space 400: 26px → 30px */    --space-400: clamp(1.625rem, 1.5341rem + 0.3636vw, 1.875rem);
    /* Space 500: 38px → 45px */    --space-500: clamp(2.375rem, 2.2159rem + 0.6364vw, 2.8125rem);
    /* Space 600: 51px → 60px */    --space-600: clamp(3.1875rem, 2.983rem + 0.8182vw, 3.75rem);
    /* Space 700: 77px → 90px */    --space-700: clamp(4.8125rem, 4.517rem + 1.1818vw, 5.625rem);
    /* Space 800: 102px → 120px */  --space-800: clamp(6.375rem, 5.9659rem + 1.6364vw, 7.5rem);
    /* Space 900: 153px → 180px */  --space-900: clamp(9.5625rem, 8.9489rem + 2.4545vw, 11.25rem);

    /* SPACING -------------------------------------------------------------- */
    /* One-up pairs */
    /* Space 100-200: 9px → 15px */    --space-100-200: clamp(0.5625rem, 0.4261rem + 0.5455vw, 0.9375rem);
    /* Space 200-300: 13px → 20px */   --space-200-300: clamp(0.8125rem, 0.6534rem + 0.6364vw, 1.25rem);
    /* Space 300-400: 17px → 30px */   --space-300-400: clamp(1.0625rem, 0.767rem + 1.1818vw, 1.875rem);
    /* Space 400-500: 26px → 45px */   --space-400-500: clamp(1.625rem, 1.1932rem + 1.7273vw, 2.8125rem);
    /* Space 500-600: 38px → 60px */   --space-500-600: clamp(2.375rem, 1.875rem + 2vw, 3.75rem);
    /* Space 600-700: 51px → 90px */   --space-600-700: clamp(3.1875rem, 2.3011rem + 3.5455vw, 5.625rem);
    /* Space 700-800: 77px → 120px */  --space-700-800: clamp(4.8125rem, 3.8352rem + 3.9091vw, 7.5rem);
    /* Space 800-900: 102px → 180px */ --space-800-900: clamp(6.375rem, 4.6023rem + 7.0909vw, 11.25rem);

    /* BORDER RADIUS -------------------------------------------------------- */
    --rad-xs:  4px;
    --rad-s:   var(--space-100);
    --rad-m:   var(--space-200);
    --rad-l:   var(--space-300);
    --rad-xl:  var(--space-400);

    /* ICON SIZE ------------------------------------------------------------ */
    --icon-xs:  var(--space-200-300);
    --icon-s:   var(--space-300-400);
    --icon-m:   var(--space-400-500);
    --icon-l:   var(--space-500-600);
    --icon-xl:  var(--space-600-700);

    /* GUTTER --------------------------------------------------------------- */
    /* 400->1500px 16px to 80px */
    --gutter: clamp(1rem, -0.4545rem + 5.8182vw, 5rem);

    /* MAX WIDTHS ----------------------------------------------------------- */
	--max-site: 125rem;       /* 2000px */
	--max-xl:   93.75rem;     /* 1500px */
	--max-l:    62.5rem;      /* 1000px */ 
	--max-m:    46.875rem;    /* 750px */
	--max-s:    31.25rem;     /* 500px */
	--max-xs:   18.75rem;     /* 300px */
}

/* -------------------------------------------------------------------------- */
/* Fonts & Font Sizes */

/* Geologica Var */
@font-face {
    font-family: 'font-primary';
    src:    url('/assets/fonts/geologica-var/geologica-var.woff2') format('woff2-variations'),
            url('/assets/fonts/geologica-var/geologica-var.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-display: swap;
        
}
.font-primary { font-family: 'font-primary', sans-serif; font-style: normal; }
.font-primary-100 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 100; }
.font-primary-200 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 200; }
.font-primary-300 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 300; }
.font-primary-400 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 400; }
.font-primary-500 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 500; }
.font-primary-600 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 600; }
.font-primary-700 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 700; }
.font-primary-800 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 800; }
.font-primary-900 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 900; }

/* -------------------------------------------------------------------------- */
/* typography -> font sizes */

.text-900               { font-size: 2.625rem;  font-size: var(--text-900); } /* 42px --> 84px  */
.text-800, h1           { font-size: 2.1875rem; font-size: var(--text-800); } /* 35px --> 63px  */
.text-700               { font-size: 1.8125rem; font-size: var(--text-700); } /* 29px --> 47px  */
.text-600, h2           { font-size: 1.5rem;    font-size: var(--text-600); } /* 24px --> 36px  */
.text-500, h3           { font-size: 1.25rem;   font-size: var(--text-500); } /* 20px --> 27px  */
.text-400, h4, body     { font-size: 1.0625rem; font-size: var(--text-400); } /* 17px --> 20px  */
.text-300, h5           { font-size: 0.9375rem; font-size: var(--text-300); } /* 15px --> 17px  */
.text-200, h6           { font-size: 0.75rem;   font-size: var(--text-200); } /* 12px --> 15px  */
.text-100               { font-size: 0.625rem;  font-size: var(--text-100); } /* 10px --> 12px  */

.text-upper             { text-transform: uppercase; }

/* -------------------------------------------------------------------------- */
/* BASIC */

body {
    font-family: 'font-primary', system-ui, sans-serif;
    font-weight: 350;
}

hr {
    background-color: var(--cool-200);
    border: 0;
    height: 4px;
    padding: 0;
    margin: 1.5rem 0;
    width: 100%;
}

blockquote {
    border-left: 5px solid var(--primary-600);
}

/* -------------------------------------------------------------------------- */
/* UTILITY CLASSES */

.cursor-pointer { cursor: pointer; }

.w-100          { width: 100%; }

/* -------------------------------------------------------------------------- */
/* MARGIN & PADDING */

.m0-first > :first-child { margin-top: 0; }
.m0-last > :last-child 	 { margin-bottom: 0; }

.m0-fl > :first-child,
.m0-fl > :last-child    { margin-bottom: 0; margin-top: 0; }

.mauto                   { margin-left: auto; margin-right: auto; }

.m0		{ margin: 0; }
.m0-t	{ margin-top: 0; }
.m0-b	{ margin-bottom: 0; }
.m0-l	{ margin-left: 0; }
.m0-r	{ margin-right: 0; }

.m1	{ margin: var(--space-100) }   .m1-l { margin-left: var(--space-100) }   .m1-r { margin-right: var(--space-100) }   .m1-t { margin-top: var(--space-100) }   .m1-b { margin-bottom: var(--space-100) }
.m2	{ margin: var(--space-200) }   .m2-l { margin-left: var(--space-200) }   .m2-r { margin-right: var(--space-200) }   .m2-t { margin-top: var(--space-200) }   .m2-b { margin-bottom: var(--space-200) }
.m3	{ margin: var(--space-300) }   .m3-l { margin-left: var(--space-300) }   .m3-r { margin-right: var(--space-300) }   .m3-t { margin-top: var(--space-300) }   .m3-b { margin-bottom: var(--space-300) }
.m4	{ margin: var(--space-400) }   .m4-l { margin-left: var(--space-400) }   .m4-r { margin-right: var(--space-400) }   .m4-t { margin-top: var(--space-400) }   .m4-b { margin-bottom: var(--space-400) }
.m5	{ margin: var(--space-500) }   .m5-l { margin-left: var(--space-500) }   .m5-r { margin-right: var(--space-500) }   .m5-t { margin-top: var(--space-500) }   .m5-b { margin-bottom: var(--space-500) }
.m6	{ margin: var(--space-600) }   .m6-l { margin-left: var(--space-600) }   .m6-r { margin-right: var(--space-600) }   .m6-t { margin-top: var(--space-600) }   .m6-b { margin-bottom: var(--space-600) }
.m7	{ margin: var(--space-700) }   .m7-l { margin-left: var(--space-700) }   .m7-r { margin-right: var(--space-700) }   .m7-t { margin-top: var(--space-700) }   .m7-b { margin-bottom: var(--space-700) }
.m8	{ margin: var(--space-800) }   .m8-l { margin-left: var(--space-800) }   .m8-r { margin-right: var(--space-800) }   .m8-t { margin-top: var(--space-800) }   .m8-b { margin-bottom: var(--space-800) }
.m9	{ margin: var(--space-900) }   .m9-l { margin-left: var(--space-900) }   .m9-r { margin-right: var(--space-900) }   .m9-t { margin-top: var(--space-900) }   .m9-b { margin-bottom: var(--space-900) }

.m1v	{ margin: var(--space-100-200) }   .m1v-l { margin-left: var(--space-100-200) }   .m1v-r { margin-right: var(--space-100-200) }   .m1v-t { margin-top: var(--space-100-200) }   .m1v-b { margin-bottom: var(--space-100-200) }
.m2v	{ margin: var(--space-200-300) }   .m2v-l { margin-left: var(--space-200-300) }   .m2v-r { margin-right: var(--space-200-300) }   .m2v-t { margin-top: var(--space-200-300) }   .m2v-b { margin-bottom: var(--space-200-300) }
.m3v	{ margin: var(--space-300-400) }   .m3v-l { margin-left: var(--space-300-400) }   .m3v-r { margin-right: var(--space-300-400) }   .m3v-t { margin-top: var(--space-300-400) }   .m3v-b { margin-bottom: var(--space-300-400) }
.m4v	{ margin: var(--space-400-500) }   .m4v-l { margin-left: var(--space-400-500) }   .m4v-r { margin-right: var(--space-400-500) }   .m4v-t { margin-top: var(--space-400-500) }   .m4v-b { margin-bottom: var(--space-400-500) }
.m5v	{ margin: var(--space-500-600) }   .m5v-l { margin-left: var(--space-500-600) }   .m5v-r { margin-right: var(--space-500-600) }   .m5v-t { margin-top: var(--space-500-600) }   .m5v-b { margin-bottom: var(--space-500-600) }
.m6v	{ margin: var(--space-600-700) }   .m6v-l { margin-left: var(--space-600-700) }   .m6v-r { margin-right: var(--space-600-700) }   .m6v-t { margin-top: var(--space-600-700) }   .m6v-b { margin-bottom: var(--space-600-700) }
.m7v	{ margin: var(--space-700-800) }   .m7v-l { margin-left: var(--space-700-800) }   .m7v-r { margin-right: var(--space-700-800) }   .m7v-t { margin-top: var(--space-700-800) }   .m7v-b { margin-bottom: var(--space-700-800) }
.m8v	{ margin: var(--space-800-900) }   .m8v-l { margin-left: var(--space-800-900) }   .m8v-r { margin-right: var(--space-800-900) }   .m8v-t { margin-top: var(--space-800-900) }   .m8v-b { margin-bottom: var(--space-800-900) }

.p0		{ padding: 0; }
.p0-t	{ padding-top: 0; }
.p0-b	{ padding-bottom: 0; }
.p0-l	{ padding-left: 0; }
.p0-r	{ padding-right: 0; }

.p1	{ padding: var(--space-100) }   .p1-l { padding-left: var(--space-100) }   .p1-r { padding-right: var(--space-100) }   .p1-t { padding-top: var(--space-100) }   .p1-b { padding-bottom: var(--space-100) }   .p1-tb { padding-bottom: var(--space-100); padding-top: var(--space-100) }   .p1-lr { padding-left: var(--space-100); padding-right: var(--space-100) }
.p2	{ padding: var(--space-200) }   .p2-l { padding-left: var(--space-200) }   .p2-r { padding-right: var(--space-200) }   .p2-t { padding-top: var(--space-200) }   .p2-b { padding-bottom: var(--space-200) }   .p2-tb { padding-bottom: var(--space-200); padding-top: var(--space-200) }   .p2-lr { padding-left: var(--space-200); padding-right: var(--space-200) }
.p3	{ padding: var(--space-300) }   .p3-l { padding-left: var(--space-300) }   .p3-r { padding-right: var(--space-300) }   .p3-t { padding-top: var(--space-300) }   .p3-b { padding-bottom: var(--space-300) }   .p3-tb { padding-bottom: var(--space-300); padding-top: var(--space-300) }   .p3-lr { padding-left: var(--space-300); padding-right: var(--space-300) }
.p4	{ padding: var(--space-400) }   .p4-l { padding-left: var(--space-400) }   .p4-r { padding-right: var(--space-400) }   .p4-t { padding-top: var(--space-400) }   .p4-b { padding-bottom: var(--space-400) }   .p4-tb { padding-bottom: var(--space-400); padding-top: var(--space-400) }   .p4-lr { padding-left: var(--space-400); padding-right: var(--space-400) }
.p5	{ padding: var(--space-500) }   .p5-l { padding-left: var(--space-500) }   .p5-r { padding-right: var(--space-500) }   .p5-t { padding-top: var(--space-500) }   .p5-b { padding-bottom: var(--space-500) }   .p5-tb { padding-bottom: var(--space-500); padding-top: var(--space-500) }   .p5-lr { padding-left: var(--space-500); padding-right: var(--space-500) }
.p6	{ padding: var(--space-600) }   .p6-l { padding-left: var(--space-600) }   .p6-r { padding-right: var(--space-600) }   .p6-t { padding-top: var(--space-600) }   .p6-b { padding-bottom: var(--space-600) }   .p6-tb { padding-bottom: var(--space-600); padding-top: var(--space-600) }   .p6-lr { padding-left: var(--space-600); padding-right: var(--space-600) }
.p7	{ padding: var(--space-700) }   .p7-l { padding-left: var(--space-700) }   .p7-r { padding-right: var(--space-700) }   .p7-t { padding-top: var(--space-700) }   .p7-b { padding-bottom: var(--space-700) }   .p7-tb { padding-bottom: var(--space-700); padding-top: var(--space-700) }   .p7-lr { padding-left: var(--space-700); padding-right: var(--space-700) }
.p8	{ padding: var(--space-800) }   .p8-l { padding-left: var(--space-800) }   .p8-r { padding-right: var(--space-800) }   .p8-t { padding-top: var(--space-800) }   .p8-b { padding-bottom: var(--space-800) }   .p8-tb { padding-bottom: var(--space-800); padding-top: var(--space-800) }   .p8-lr { padding-left: var(--space-800); padding-right: var(--space-800) }
.p9	{ padding: var(--space-900) }   .p9-l { padding-left: var(--space-900) }   .p9-r { padding-right: var(--space-900) }   .p9-t { padding-top: var(--space-900) }   .p9-b { padding-bottom: var(--space-900) }   .p9-tb { padding-bottom: var(--space-900); padding-top: var(--space-900) }   .p9-lr { padding-left: var(--space-900); padding-right: var(--space-900) }

.p1v	{ padding: var(--space-100-200) }   .p1v-l { padding-left: var(--space-100-200) }   .p1v-r { padding-right: var(--space-100-200) }   .p1v-t { padding-top: var(--space-100-200) }   .p1v-b { padding-bottom: var(--space-100-200) }   .p1v-tb { padding-bottom: var(--space-100-200); padding-top: var(--space-100-200) }   .p1v-lr { padding-left: var(--space-100-200); padding-right: var(--space-100-200) }
.p2v	{ padding: var(--space-200-300) }   .p2v-l { padding-left: var(--space-200-300) }   .p2v-r { padding-right: var(--space-200-300) }   .p2v-t { padding-top: var(--space-200-300) }   .p2v-b { padding-bottom: var(--space-200-300) }   .p2v-tb { padding-bottom: var(--space-200-300); padding-top: var(--space-200-300) }   .p2v-lr { padding-left: var(--space-200-300); padding-right: var(--space-200-300) }
.p3v	{ padding: var(--space-300-400) }   .p3v-l { padding-left: var(--space-300-400) }   .p3v-r { padding-right: var(--space-300-400) }   .p3v-t { padding-top: var(--space-300-400) }   .p3v-b { padding-bottom: var(--space-300-400) }   .p3v-tb { padding-bottom: var(--space-300-400); padding-top: var(--space-300-400) }   .p3v-lr { padding-left: var(--space-300-400); padding-right: var(--space-300-400) }
.p4v	{ padding: var(--space-400-500) }   .p4v-l { padding-left: var(--space-400-500) }   .p4v-r { padding-right: var(--space-400-500) }   .p4v-t { padding-top: var(--space-400-500) }   .p4v-b { padding-bottom: var(--space-400-500) }   .p4v-tb { padding-bottom: var(--space-400-500); padding-top: var(--space-400-500) }   .p4v-lr { padding-left: var(--space-400-500); padding-right: var(--space-400-500) }
.p5v	{ padding: var(--space-500-600) }   .p5v-l { padding-left: var(--space-500-600) }   .p5v-r { padding-right: var(--space-500-600) }   .p5v-t { padding-top: var(--space-500-600) }   .p5v-b { padding-bottom: var(--space-500-600) }   .p5v-tb { padding-bottom: var(--space-500-600); padding-top: var(--space-500-600) }   .p5v-lr { padding-left: var(--space-500-600); padding-right: var(--space-500-600) }
.p6v	{ padding: var(--space-600-700) }   .p6v-l { padding-left: var(--space-600-700) }   .p6v-r { padding-right: var(--space-600-700) }   .p6v-t { padding-top: var(--space-600-700) }   .p6v-b { padding-bottom: var(--space-600-700) }   .p6v-tb { padding-bottom: var(--space-600-700); padding-top: var(--space-600-700) }   .p6v-lr { padding-left: var(--space-600-700); padding-right: var(--space-600-700) }
.p7v	{ padding: var(--space-700-800) }   .p7v-l { padding-left: var(--space-700-800) }   .p7v-r { padding-right: var(--space-700-800) }   .p7v-t { padding-top: var(--space-700-800) }   .p7v-b { padding-bottom: var(--space-700-800) }   .p7v-tb { padding-bottom: var(--space-700-800); padding-top: var(--space-700-800) }   .p7v-lr { padding-left: var(--space-700-800); padding-right: var(--space-700-800) }
.p8v	{ padding: var(--space-800-900) }   .p8v-l { padding-left: var(--space-800-900) }   .p8v-r { padding-right: var(--space-800-900) }   .p8v-t { padding-top: var(--space-800-900) }   .p8v-b { padding-bottom: var(--space-800-900) }   .p8v-tb { padding-bottom: var(--space-800-900); padding-top: var(--space-800-900) }   .p8v-lr { padding-left: var(--space-800-900); padding-right: var(--space-800-900) }

/* -------------------------------------------------------------------------- */
/* COLOURS */

.white      { color: var(--white); }
.bg-white   { background-color: var(--white); }
.black      { color: var(--black); }
.bg-black   { background-color: var(--black); }

.primary    { color: var(--primary-500); } .bg-primary { background-color: var(--primary-500); } .primary-950 { color: var(--primary-950); } .bg-primary-950 { background-color: var(--primary-950); } .primary-900 { color: var(--primary-900); } .bg-primary-900 { background-color: var(--primary-900); } .primary-800 { color: var(--primary-800); } .bg-primary-800 { background-color: var(--primary-800); } .primary-700 { color: var(--primary-700); } .bg-primary-700 { background-color: var(--primary-700); } .primary-600 { color: var(--primary-600); } .bg-primary-600 { background-color: var(--primary-600); } .primary-500 { color: var(--primary-500); } .bg-primary-500 { background-color: var(--primary-500); } .primary-400 { color: var(--primary-400); } .bg-primary-400 { background-color: var(--primary-400); } .primary-300 { color: var(--primary-300); } .bg-primary-300 { background-color: var(--primary-300); } .primary-200 { color: var(--primary-200); } .bg-primary-200 { background-color: var(--primary-200); } .primary-100 { color: var(--primary-100); } .bg-primary-100 { background-color: var(--primary-100); } .primary-50 { color: var(--primary-50); } .bg-primary-50 { background-color: var(--primary-50); }
.secondary  { color: var(--secondary); } .bg-secondary { background-color: var(--secondary); } .secondary-950 { color: var(--secondary-950); } .bg-secondary-950 { background-color: var(--secondary-950); } .secondary-900 { color: var(--secondary-900); } .bg-secondary-900 { background-color: var(--secondary-900); } .secondary-800 { color: var(--secondary-800); } .bg-secondary-800 { background-color: var(--secondary-800); } .secondary-700 { color: var(--secondary-700); } .bg-secondary-700 { background-color: var(--secondary-700); } .secondary-600 { color: var(--secondary-600); } .bg-secondary-600 { background-color: var(--secondary-600); } .secondary-500 { color: var(--secondary-500); } .bg-secondary-500 { background-color: var(--secondary-500); } .secondary-400 { color: var(--secondary-400); } .bg-secondary-400 { background-color: var(--secondary-400); } .secondary-300 { color: var(--secondary-300); } .bg-secondary-300 { background-color: var(--secondary-300); } .secondary-200 { color: var(--secondary-200); } .bg-secondary-200 { background-color: var(--secondary-200); } .secondary-100 { color: var(--secondary-100); } .bg-secondary-100 { background-color: var(--secondary-100); } .secondary-50 { color: var(--secondary-50); } .bg-secondary-50 { background-color: var(--secondary-50); }
.tertiary   { color: var(--tertiary); } .bg-tertiary { background-color: var(--tertiary); } .tertiary-950 { color: var(--tertiary-950); } .bg-tertiary-950 { background-color: var(--tertiary-950); } .tertiary-900 { color: var(--tertiary-900); } .bg-tertiary-900 { background-color: var(--tertiary-900); } .tertiary-800 { color: var(--tertiary-800); } .bg-tertiary-800 { background-color: var(--tertiary-800); } .tertiary-700 { color: var(--tertiary-700); } .bg-tertiary-700 { background-color: var(--tertiary-700); } .tertiary-600 { color: var(--tertiary-600); } .bg-tertiary-600 { background-color: var(--tertiary-600); } .tertiary-500 { color: var(--tertiary-500); } .bg-tertiary-500 { background-color: var(--tertiary-500); } .tertiary-400 { color: var(--tertiary-400); } .bg-tertiary-400 { background-color: var(--tertiary-400); } .tertiary-300 { color: var(--tertiary-300); } .bg-tertiary-300 { background-color: var(--tertiary-300); } .tertiary-200 { color: var(--tertiary-200); } .bg-tertiary-200 { background-color: var(--tertiary-200); } .tertiary-100 { color: var(--tertiary-100); } .bg-tertiary-100 { background-color: var(--tertiary-100); } .tertiary-50 { color: var(--tertiary-50); } .bg-tertiary-50 { background-color: var(--tertiary-50); }
.cool       { color: var(--cool); } .bg-cool { background-color: var(--cool); } .cool-950 { color: var(--cool-950); } .bg-cool-950 { background-color: var(--cool-950); } .cool-900 { color: var(--cool-900); } .bg-cool-900 { background-color: var(--cool-900); } .cool-800 { color: var(--cool-800); } .bg-cool-800 { background-color: var(--cool-800); } .cool-700 { color: var(--cool-700); } .bg-cool-700 { background-color: var(--cool-700); } .cool-600 { color: var(--cool-600); } .bg-cool-600 { background-color: var(--cool-600); } .cool-500 { color: var(--cool-500); } .bg-cool-500 { background-color: var(--cool-500); } .cool-400 { color: var(--cool-400); } .bg-cool-400 { background-color: var(--cool-400); } .cool-300 { color: var(--cool-300); } .bg-cool-300 { background-color: var(--cool-300); } .cool-200 { color: var(--cool-200); } .bg-cool-200 { background-color: var(--cool-200); } .cool-100 { color: var(--cool-100); } .bg-cool-100 { background-color: var(--cool-100); } .cool-50 { color: var(--cool-50); } .bg-cool-50 { background-color: var(--cool-50); }


/* -------------------------------------------------------------------------- */
/* NAVIGATION & LISTS */

.site-logo {
    height: 80px;
    width: 240px;
}

.header-top {
    gap: 1rem
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-header-nav summary {
    background-color: var(--cool-100);
    padding: 0.5rem;
}

.mobile-header-nav svg {
    fill: #180800;
}

.mobile-header-nav ul {
    border-top: 1px solid var(--cool-300);
}

.mobile-header-nav a {
    border-bottom: 1px solid var(--cool-300);
    padding: 0.5rem;
}

.footer-nav a {
    padding: 0.5rem 0;
}

.skip-link {
    display: block;
    left: -999px;
    position: absolute;
    top: -999px;
}
  
.skip-link:focus {
    background: #ffc;
    border:1px solid #990000;
    left: 0;
    padding: 3px;
    top: 0;
}