/*  MICROTHEMER STYLES  */

/*= Full Code Editor CSS ====== */

/* @link https://utopia.fyi/type/calculator?c=320,16,1.25,1440,22,1.333,4,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l|m-xl&g=2xs,l,xl,12 */

:root {
  --font-size--1: clamp(0.80rem, calc(0.73rem + 0.33vw), 1.03rem);
  --font-size-0: clamp(1.00rem, calc(0.89rem + 0.54vw), 1.38rem);
  --font-size-1: clamp(1.25rem, calc(1.08rem + 0.83vw), 1.83rem);
  --font-size-2: clamp(1.56rem, calc(1.31rem + 1.26vw), 2.44rem);
  --font-size-3: clamp(1.95rem, calc(1.58rem + 1.86vw), 3.26rem);
  --font-size-4: clamp(2.44rem, calc(1.90rem + 2.71vw), 4.34rem);
}

/* @link https://utopia.fyi/space/calculator?c=320,16,1.25,1440,22,1.333,4,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l|m-xl&g=2xs,l,xl,12 */

:root {
  --space-3xs: clamp(0.25rem, calc(0.21rem + 0.18vw), 0.38rem);
  --space-2xs: clamp(0.50rem, calc(0.45rem + 0.27vw), 0.69rem);
  --space-xs: clamp(0.75rem, calc(0.66rem + 0.45vw), 1.06rem);
  --space-s: clamp(1.00rem, calc(0.89rem + 0.54vw), 1.38rem);
  --space-m: clamp(1.50rem, calc(1.34rem + 0.80vw), 2.06rem);
  --space-l: clamp(2.00rem, calc(1.79rem + 1.07vw), 2.75rem);
  --space-xl: clamp(3.00rem, calc(2.68rem + 1.61vw), 4.13rem);
  --space-2xl: clamp(4.00rem, calc(3.57rem + 2.14vw), 5.50rem);
  --space-3xl: clamp(6.00rem, calc(5.36rem + 3.21vw), 8.25rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, calc(0.13rem + 0.63vw), 0.69rem);
  --space-2xs-xs: clamp(0.50rem, calc(0.34rem + 0.80vw), 1.06rem);
  --space-xs-s: clamp(0.75rem, calc(0.57rem + 0.89vw), 1.38rem);
  --space-s-m: clamp(1.00rem, calc(0.70rem + 1.52vw), 2.06rem);
  --space-m-l: clamp(1.50rem, calc(1.14rem + 1.79vw), 2.75rem);
  --space-l-xl: clamp(2.00rem, calc(1.39rem + 3.04vw), 4.13rem);
  --space-xl-2xl: clamp(3.00rem, calc(2.29rem + 3.57vw), 5.50rem);
  --space-2xl-3xl: clamp(4.00rem, calc(2.79rem + 6.07vw), 8.25rem);

  /* Custom pairs */
  --space-s-l: clamp(1.00rem, calc(0.50rem + 2.50vw), 2.75rem);
  --space-m-xl: clamp(1.50rem, calc(0.75rem + 3.75vw), 4.13rem);
}

:root {
  --heading-width-0: 16ch;
  --heading-width-1: 20ch;
  --heading-width-2: 24.96ch;
  --heading-width-3: 31.2ch;
}

:root {
  --heading-width-0: calc(13.5ch * 1);
  --heading-width-1: calc(13.5ch * 1.414);
  --heading-width-2: calc(13.5ch * 1.999);
  --heading-width-3: calc(13.5ch * 2.827);
}

/*= General =================== */

/** General >> Reset **/
*, 
*::before, 
*::after {
	box-sizing: border-box;
}
* {
	margin: 0;
}
ul[role="list"], 
ol[role="list"] {
	list-style: none;
}
html:focus-within {
	scroll-behavior: smooth;
}
html, 
body {
	height: 100%;
}
body {
	text-rendering: optimizeSpeed;
	line-height: 1.5;
}
a:not([class]) {
	text-decoration-skip-ink: auto;
}
img, 
picture, 
video, 
canvas, 
svg {
	max-width: 100%;
	display: block;
}
input, 
button, 
textarea, 
select {
	font: inherit;
}
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/** General >> Spacing **/
:is(.flow, 
.brxe-container, 
.brxe-post-content, 
.ld-tab-content) > * + * {
	margin: 0;
	margin-top: var(--flow-space, 1.25em);
}
.brxe-container {
	padding: var(--space-m-xl) var(--space-s-l);
}

/** General >> Typography **/
html {
	
}
body {
	font-size: var(--font-size-0);
	font-family: 'Public Sans', sans-serif;
	font-weight: 400;
}
p, 
li, 
figcaption, 
blockquote, 
dt, 
dd {
	max-width: 60ch;
	overflow-wrap: break-word;
	font-family: 'Public Sans', sans-serif;
}
h1 {
	font-family: 'Newsreader', serif;
	font-size: var(--font-size-4);
	font-weight: 800;
	line-height: 1.125;
	width: 100%;
	max-width: var(--heading-width-0);
}
h2 {
	font-family: 'Newsreader', serif;
	font-size: var(--font-size-3);
	font-weight: 750;
	line-height: 1.25;
	width: 100%;
	max-width: var(--heading-width-1);
}
h3 {
	font-family: 'Newsreader', serif;
	font-size: var(--font-size-2);
	font-weight: 700;
	line-height: 1.25;
	width: 100%;
	max-width: var(--heading-width-2);
}
h4 {
	font-family: 'Newsreader', serif;
	font-size: var(--font-size-1);
	font-weight: 650;
	line-height: 1.375;
	width: 100%;
	max-width: var(--heading-width-3);
}
h5 {
	font-size: var(--font-size-0);
	font-weight: inherit;
}
h6 {
	font-size: var(--font-size--1);
	font-weight: inherit;
}
:is(h1, 
h2, 
h3, 
h4) {
	color: #00205b;
}
ul {
	list-style: inside none disc;
	list-style-position: outside;
	padding-left: 1em;
}
dt:not(:first-of-type) {
	margin-top: var(--flow-spacer, 1em);
}
dt {
	font-weight: 600;
}
dd {
	margin: initial;
	margin-left: 1em;
}
dl:not([class]) dt, 
blockquote {
	font-size: var(--font-size-1);
	line-height: 1.375;
	max-width: var(--heading-width-3);
}


/*= Hero ====================== */

/** Hero >> .section__hero **/
.section__hero {
	display: grid;
	grid: ". banner banner-flow flow" auto / 1fr minmax(auto, 720px) minmax(auto, 720px) 1fr;
}

/** Hero >> .featured-image **/
.featured-image {
	background-color: #4caf50;
	grid-area: banner / banner / banner-flow / banner-flow;
	z-index: 1;
	margin-block: var(--space-m-xl);
	margin-inline: var(--space-s-l);
}

/** Hero >> .flowlines **/
.flowlines {
	background-color: #8bc34a;
	padding-top: var(--space-xl);
	grid-area: banner-flow / banner-flow / flow / flow;
	z-index: 0;
}