:root {
	--base-font-size : 18px;
	--base-line-height : 1.6667;
	--max-width: 1400px; /* 1920px @ 18px */
	--max-width-inner:  1164px; /* 1080px @ 18px */
	--max-width-text:  860px; /* 860px @ 18px */
	--max-width-wide: 1196px;
	--gutter: 2rem;
	
	/* Type */
	--ff-rg-compact :"Right Grotesk Compact", "Helvetica Neue", sans-serif;
	--ff-rg-narrow :   "Right Grotesk Narrow", "Helvetica Neue", sans-serif;
	--ff-acumin: 'Inter', "Helvetica Neue", sans-serif;
	--text-s3 : 0.422rem;
	--text-s2: 0.563rem;
	--text-s1 : 0.75rem;
	--text-s0 : 0.77778rem; /* 14px */
	--text-base : 1rem;
	--text-h1 : 5.5556rem;  /* 100px */
	--text-h2 : 3.8889rem;  /* 70px */
	--text-h3 : 2.7778rem;  /* 50px */
	--text-h4 : 2rem;  /* 36px */
	--text-h5 : 1.5555rem;  /* 28px */
	--text-h6 : 1.1111rem;  /* 20px */
	--font-family-sans : var(--ff-acumin);
	--font-family-serif : var(--ff-acumin);
	--font-family-mono : 'IBM Plex Mono', monospace;

	/* Fonts */
	--f-light : 200;
	--f-normal : 400;
	--f-bold : 500;
	--f-dark: 770;
	
	/* Colours */
	--white : #ffffff;
	--black : #000000;
	--off-black : #333f4c;
	--off-black20 : rgba(51, 63, 76, 0.2);
	--off-black70 : rgba(51, 63, 76, 0.7);
	--yellow : #fff046;
	--tan : #f0f0e6;
	--blue : #0144CB;
	--blue-light : #6ce6ff;
	--blue-light60 : rgba(108, 231, 255, 0.6);
	--green : #058c1d;
	--green-light : #91e83a;
	--red : #f21905;
	--orange : #ff7f00;
	--purple : #d297fd;
	--pink : #ffa3ff;
	--purple60 : rgba(210, 151, 253, 0.6);
	--orange-light : #fdb034;

	
	/* Default */
	--body-text-color: var(--off-black);
	--body-bg-color: var(--white);
	--el-color: var(--off-black);

    /* Grid */
	--grid-columns-desktop : 12;
	--grid-columns-tablet : 8;
	--grid-columns-mobile : 4;
	--grid-base-column-width : calc( 100% / var(--grid-columns-desktop) );
	--grid-offset-1 : var(--grid-base-column-width);
	--grid-offset-2 : calc( var(--grid-base-column-width) * 2);
	--grid-offset-3 : calc( var(--grid-base-column-width) * 3);
	--grid-offset-4 : calc( var(--grid-base-column-width) * 4);
	--grid-outset : 10px;

    /* Break Points */
	/*
	--bp-desktop-lg : 1680px;
	--bp-desktop-sm : 1366px;
	--bp-tablet : 1024px;
	--bp-mobile-lg : 768px;
	--bp-mobile-sm : 414px;
	*/
}



html, body {
    font-family: var(--font-family-sans);
    font-size: var(--base-font-size);
    color: var(--body-text-color);
    margin: 0;
    padding: 0;
	background-color: var(--tan);
}
* {
	box-sizing: border-box;
	text-rendering: geometricPrecision;
}


img[src=""] {
    width: 300px;
    height: 300px;
    background-color: var(--blue-light);
}
/*
pre {
    padding: 2rem;
    margin: 2rem;
    display: block;
    background-color: var(--white);
    border: solid 5px var(--orange);
    word-break: break-all;
    white-space: pre-wrap;
} */

img[src*=".svg"] {
    width: 100%;
    height: 100%;
}

/**
 * ALIGNMENT
 */
.spacer {
	margin-left: auto;
	margin-right: auto;
	margin-top: calc(var(--gutter) * 10);
	margin-bottom: calc(var(--gutter) * 10);
	max-width: var(--max-width);
}
.aligninner, .container.aligninner {
	max-width: var(--max-width-inner);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.alignwide, .container.alignwide {
    max-width: var(--max-width-wide);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.alignfull,  .container.alignfull {
    max-width: var(--max-width);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.aligntext, .container.aligntext {
    max-width: var(--max-width-text);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.flex-row {
	display: flex;    
	flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
	margin-left: auto;
	margin-right: auto;
}
.flex-row.flex-reverse {
    flex-direction: row-reverse;
}
.flex-row > .col {
    flex: 0 1 100%;
}

/* Going grid because flex is annoying! */
.col-wrapper {
    --cols : 2;
    --rows : 1;
    --row-gap : 1rem;
    --gap: 5rem;
    row-gap: var(--row-gap);
    column-gap: var(--gap);
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    grid-template-rows: repeat(var(
    --rows, 1), 1fr);
    display: grid;
    grid-auto-flow: row;
    justify-items: stretch;
    align-items: stretch;
    justify-content: stretch;
    align-content: stretch;
}
.col-wrapper.col-1 { --cols: 1; }
.col-wrapper.col-2 { --cols: 2; }
.col-wrapper.col-3 { --cols: 3; }
.col-wrapper.col-4 { --cols: 4; }
.col-wrapper.col-5 { --cols: 5; }

.col {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    align-content: center;
    justify-content: flex-start;
}

.col img {
    max-width: 100%;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

/*
 * Going Grid!
 */

.col p.button-row:last-child {
    margin-top: auto;
    padding-top: 1.5rem;
}

.flex-row.justify-center {
	justify-content: center;
}

.flex-row.alignwide {
	max-width: var(--max-width-wide);
}
.flex-row.alignfull {
	max-width: var(--max-width);
}



/**
  * UTILS
  */
.has-background-cover {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
}
.yellow {
    /*color: var(--yellow);*/
}
hr {
    border: 0;
    border-bottom: solid 1px var(--off-black);
    max-width: 20rem;
    margin-right: auto;
    margin-left: 0;
    margin-top: 1rem;
    margin-bottom: 2rem;
    opacity: 0.5;
    width: 100%;
}
.img-cover img {
    width: 100%;
    height: 100%;
    max-width: 100%;
}
.img-wrap {
    margin-left: auto;
    margin-right: auto;
}
.img-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
.img-wrap.align-left {
    margin-left: 0;
}

.img-wrap.align-right {
    margin-right: 0;
}

.img-wrap.forced-cover,
.img-wrap.img-forced-cover {
    width: 100%;
}

.img-wrap.img-forced-cover img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

fieldset {
    border: none;
    padding: 0;
}