/*GLOBAL*/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  /*line-height: 1.15; [> 1 <]*/ /*set in my css*/
  -webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}
/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}
/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

strong {
  font-weight: bolder;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/**
 * Add the correct font size in all browsers.
 */
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}
/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

input {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

input { /* 1 */
  overflow: visible;
}
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
/**
 * Remove the inner border and padding in Firefox.
 */
/**
 * Restore the focus styles unset by the previous rule.
 */
/**
 * Correct the padding in Firefox.
 */
/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}
/**
 * Remove the default vertical scrollbar in IE 10+.
 */
/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
/*
 * Add the correct display in all browsers.
 */
/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}
ul {
  padding-inline-start: 0;
}
/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
/*
:root {
  @utopia spaceScale({
    minWidth: 320,
    maxWidth: 1240,
    minSize: 16,
    maxSize: 20,
    positiveSteps: [1.5, 2, 3, 4, 6],
    negativeSteps: [0.75, 0.5, 0.25],
    customSizes: ["s-l"],
    prefix: "space",
  });
}
*/
/*More custom pairs.*/
/* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1920,20,1.333,5,3,1366&s=0.75|0.5|0.25,1.5|2|3|4|6,xs-m|2xs-xs|xs-l|s-xl&g=s,l,xl,12 */
:root {--space-3xs: clamp(0.3125rem, 0.3125rem + 0vi, 0.3125rem);--space-2xs: clamp(0.5625rem, 0.55rem + 0.0625vi, 0.625rem);--space-xs: clamp(0.875rem, 0.8625rem + 0.0625vi, 0.9375rem);--space-s: clamp(1.125rem, 1.1rem + 0.125vi, 1.25rem);--space-m: clamp(1.6875rem, 1.65rem + 0.1875vi, 1.875rem);--space-l: clamp(2.25rem, 2.2rem + 0.25vi, 2.5rem);--space-xl: clamp(3.375rem, 3.3rem + 0.375vi, 3.75rem);--space-2xl: clamp(4.5rem, 4.4rem + 0.5vi, 5rem);--space-3xl: clamp(6.75rem, 6.6rem + 0.75vi, 7.5rem);--space-3xs-2xs: clamp(0.3125rem, 0.25rem + 0.3125vi, 0.625rem);--space-2xs-xs: clamp(0.5625rem, 0.4875rem + 0.375vi, 0.9375rem);--space-xs-s: clamp(0.875rem, 0.8rem + 0.375vi, 1.25rem);--space-s-m: clamp(1.125rem, 0.975rem + 0.75vi, 1.875rem);--space-m-l: clamp(1.6875rem, 1.525rem + 0.8125vi, 2.5rem);--space-l-xl: clamp(2.25rem, 1.95rem + 1.5vi, 3.75rem);--space-xl-2xl: clamp(3.375rem, 3.05rem + 1.625vi, 5rem);--space-2xl-3xl: clamp(4.5rem, 3.9rem + 3vi, 7.5rem);--space-xs-m: clamp(0.875rem, 0.675rem + 1vi, 1.875rem);--space-2xs-xs: clamp(0.5625rem, 0.4875rem + 0.375vi, 0.9375rem);--space-2xs-m: clamp(0.5625rem, 0.3rem + 1.3125vi, 1.875rem);--space-xs-l: clamp(0.875rem, 0.55rem + 1.625vi, 2.5rem);--space-s-l: clamp(1.125rem, 0.85rem + 1.375vi, 2.5rem);--space-m-l: clamp(1.6875rem, 1.525rem + 0.8125vi, 2.5rem);--space-s-xl: clamp(1.125rem, 0.6rem + 2.625vi, 3.75rem);--space-l-xl: clamp(2.25rem, 1.95rem + 1.5vi, 3.75rem);--space-m-2xl: clamp(1.6875rem, 1.025rem + 3.3125vi, 5rem);--space-s-2xs: clamp(0.625rem, 1.225rem + -0.5vi, 1.125rem);--space-l-2xl: clamp(2.25rem, 1.7rem + 2.75vi, 5rem);--space-2xl-3xl: clamp(4.5rem, 3.9rem + 3vi, 7.5rem);--space-l-3xl: clamp(2.25rem, 1.2rem + 5.25vi, 7.5rem);
}
:root {--smallspace-3xs: clamp(0.1875rem, 0.175rem + 0.0625vi, 0.25rem);--smallspace-2xs: clamp(0.3125rem, 0.275rem + 0.1875vi, 0.5rem);--smallspace-xs: clamp(0.5rem, 0.4625rem + 0.1875vi, 0.6875rem);--smallspace-s: clamp(0.625rem, 0.5625rem + 0.3125vi, 0.9375rem);--smallspace-m: clamp(0.9375rem, 0.8375rem + 0.5vi, 1.4375rem);--smallspace-l: clamp(1.25rem, 1.125rem + 0.625vi, 1.875rem);--smallspace-xl: clamp(1.875rem, 1.6875rem + 0.9375vi, 2.8125rem);--smallspace-2xl: clamp(2.5rem, 2.25rem + 1.25vi, 3.75rem);--smallspace-3xl: clamp(3.75rem, 3.375rem + 1.875vi, 5.625rem);--smallspace-3xs-2xs: clamp(0.1875rem, 0.125rem + 0.3125vi, 0.5rem);--smallspace-2xs-xs: clamp(0.3125rem, 0.2375rem + 0.375vi, 0.6875rem);--smallspace-xs-s: clamp(0.5rem, 0.4125rem + 0.4375vi, 0.9375rem);--smallspace-s-m: clamp(0.625rem, 0.4625rem + 0.8125vi, 1.4375rem);--smallspace-m-l: clamp(0.9375rem, 0.75rem + 0.9375vi, 1.875rem);--smallspace-l-xl: clamp(1.25rem, 0.9375rem + 1.5625vi, 2.8125rem);--smallspace-xl-2xl: clamp(1.875rem, 1.5rem + 1.875vi, 3.75rem);--smallspace-2xl-3xl: clamp(2.5rem, 1.875rem + 3.125vi, 5.625rem);--smallspace-xs-m: clamp(0.5rem, 0.3125rem + 0.9375vi, 1.4375rem);--smallspace-2xs-xs: clamp(0.3125rem, 0.2375rem + 0.375vi, 0.6875rem);--smallspace-2xs-m: clamp(0.3125rem, 0.0875rem + 1.125vi, 1.4375rem);--smallspace-xs-l: clamp(0.5rem, 0.225rem + 1.375vi, 1.875rem);--smallspace-s-l: clamp(0.625rem, 0.375rem + 1.25vi, 1.875rem);--smallspace-s-xl: clamp(0.625rem, 0.1875rem + 2.1875vi, 2.8125rem);--smallspace-s-2xs: clamp(0.5rem, 0.65rem + -0.125vi, 0.625rem);
}
:root {
  --line-height: 1.5rem;
  --header-height: tkn('spacing.header-height');
}
:root {
  --body-font: LibreFranklin;
  --heading-font: Roboto;
  --text-color: #100f0d;
  --heading-color: #0c324a;
  --link-color: #04b6ff;
  --nav-link-color: #fffffe;
  --nav-link-color: #0ee1ff;
  --link-color-visited: #213f47;
  --link-color-hover: #0ee1ff;
  --inverted-link-color: #fffffe;
  --light-sea: tkn('colors.light-sea');
}
body {
  background-color: #fffffe;
  line-height: var(--line-height);
}
ul {
  list-style-type: square;
  list-style-position: outside;
  padding-inline-start: .85rem;
  margin-block-start: .2rem;

}
li {
  /* padding-inline-start: var(--space-2xs); */

  &::before {
    content: " ";
  }
}
/* This is typography basics:  */
/* typefaces */
/* type scale (Utopia) */
/* global font sizing */
/* No type leading stuff. */
@font-face {
  font-family: Roboto;
  src: url('/static/fonts/roboto/Roboto-Regular.ttf');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: Roboto;
  src: url('/static/fonts/roboto/Roboto-Medium.ttf');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: Roboto;
  src: url('/static/fonts/roboto/Roboto-Bold.ttf');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: Roboto;
  src: url('/static/fonts/roboto/Roboto-MediumItalic.ttf');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: LibreFranklin;
  src: url('/static/fonts/LibreFranklin/LibreFranklin-VariableFont_wght.ttf');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: LibreFranklin;
  src: url('/static/fonts/LibreFranklin/LibreFranklin-VariableFont_wght.ttf');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: LibreFranklin;
  src: url('/static/fonts/LibreFranklin/LibreFranklin-VariableFont_wght.ttf');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: LibreFranklin;
  src: url('/static/fonts/LibreFranklin/LibreFranklin-Italic-VariableFont_wght.ttf');
  font-weight: 400;
  font-style: italic;
}
/*Typescale #1*/
/*
:root {
  @utopia typeScale({
    minWidth: 320,
    maxWidth: 1240,
    minFontSize: 16,
    maxFontSize: 20,
    minTypeScale: 1.2,
    maxTypeScale: 1.25,
    positiveSteps: 5,
    negativeSteps: 2,
    prefix: "step",
  });
}
*/
/*More dramatic typescale #2*/
/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1920,20,1.333,5,3,1366&s=0.75|0.5|0.25,1.5|2|3|4|6<header class="homepage-header dev-header-size">
  <a id="top" style="visibility: hidden; position: absolute; top: 0"></a>

  <div class="banner full-width"></div>
  <div class="topbar full-width">
    <div class="logo-title-group breakout-right">
      <img c,s-l&g=s,l,xl,12 */
:root {--step-8: clamp(1.575rem, 0.9763rem + 2.9935cqi, 4.5686rem);--step-7: clamp(1.4761rem, 1.0099rem + 2.331cqi, 3.8071rem);--step-6: clamp(1.3834rem, 1.0256rem + 1.7892cqi, 3.1726rem);--step-5: clamp(1.2966rem, 1.0271rem + 1.3473cqi, 2.6438rem);--step-4: clamp(1.2151rem, 1.0175rem + 0.9881cqi, 2.2032rem);--step-3: clamp(1.1388rem, 0.9994rem + 0.6972cqi, 1.836rem);--step-2: clamp(1.0673rem, 0.9748rem + 0.4627cqi, 1.53rem);--step-1: clamp(1.0003rem, 0.9454rem + 0.2747cqi, 1.275rem);--step-0: clamp(0.9375rem, 0.9125rem + 0.125cqi, 1.0625rem);--step--1: clamp(0.8786rem, 0.8773rem + 0.0068cqi, 0.8854rem);--step--2: clamp(0.7378rem, 0.8406rem + -0.0856cqi, 0.8235rem);--step--3: clamp(0.6149rem, 0.8031rem + -0.1569cqi, 0.7718rem);
}
.body-font {
  font-family: var(--body-font), sans-serif;
  font-weight: 300;
  font-size: var(--step-0);
  color: var(--text-color);
}
.body-font h1, h2, h3, h4, h5, h6, header, .hero-text {
  font-family: var(--heading-font), sans-serif;
  font-weight: 500;
  color: var(--heading-color);
  line-height: initial;
}
h1 {
  font-size: var(--step-7);
}
h2 {
  font-size: var(--step-4);
}
h3 {
  font-size: var(--step-2);
}
h4 {
  font-size: var(--step-1);
}
.larger p, p.larger {
  font-size: var(--step-2);
  line-height: 1.5rem;
}
.bold {
  font-weight: 600;
}
.semi-bold {
  font-weight: 500;
}
/*Reset links!*/
/*First, general link styling for the site.*/
a {
  outline-color: transparent;
}
a:link {
  color: var(--link-color);
}
a:hover , a:hover p, a:hover h3{
  color: var(--link-color-hover);
}
/*visited links hover state is inverted to unvisited links.*/
a:visited {
  color: var(--link-color-visited)
}
a:focus {
  text-decoration: none;
  color: var(--link-color);
  background-color:  var(--link-color-visited);
}
a:active {
  background-color:  var(--link-color);
  color: #fffffe;
}
/*LAYOUT*/
/*flow: vertical spacing between elements*/
/*.flow * {*/
/*margin-block-end: 0;*/
/*}*/
.flow {
  --space: var(--line-height);
}
/*The basics of flowing or flow. All 'joining' elements get a leading margin of line-height.*/
.flow > * + *:not(div, a, li, section) {
  --space: var(--line-height);
  margin-block-start:  var(--space);
}
/* For manually adding block spacing to containers (overriding the above) */
.flow-block {
  --space: calc(var(--line-height) * 2);
  margin-block-start: var(--space);
}
.flow > :first-child:not(div, a, li, section) {
  margin-block-start: var(--space);
}
.flow *  {
  margin-block-end: 0;

}
/* Can collapse top margin of first element in a flow container */
.flow.collapse-top-margin > *:first-child {
  margin-block-start: 0;
}
/* might bite i flows are nested ... */
.flow > :last-child {
  padding-block-end: var(--space);
}
/* `.Flow` can be set liberally on all children. */
/* Or, `.flow-tight` */
/*Now, override the `--space` variable for flow items which should  have more spacing.
 * This is mostly headings.
 * instead of growing from line-height, though, we are going to use the utopia-generated fluid space variables.
 * The key is that the `--space` variable gets reassigned for each type.*/
.flow > h1{
  --space: var(--space-xl-2xl);
}
.flow >  h2, .flow > img:has(+ div){
  --space: var(--space-l-xl) !important;
}
.flow > h3 {
  --space: var(--space-l);
}
.flow > h4 {
  --space: var(--space-m);
}
/*This special case seems necessary because the * + * selector doesn't match the first item.*/
/* Disabling again because it breaks overlay-on-banner. Would need to be more specific, targeting only text elements? */
/* .flow > :nth-child(1) { */
/*   margin-block-start: var(--space); */
/* } */
.tighten-below {
  margin-bottom: calc(-1*var(--space));
}
.overlap-below {
  margin-bottom: calc(-3*var(--space));

  & + * {
    margin-block-start: 0 !important;
  }

}
:root {
  --padding-inline: 0.5rem;
  --content-max-width: 65rem;
  --breakout-max-width: calc(var(--content-max-width) + 200px);
  --breakout-size: calc(    (var(--breakout-max-width) - var(--content-max-width))   );
  --breakout-size-left: calc(  var(--breakout-size) / 2 );
  --breakout-size-right: calc( var(--breakout-size) - var(--breakout-size-left) );
  --breakout-dynamic-size: clamp(0, var(--breakout-max-width) - 1px, var(--breakout-max-width));
  --content-plus-breakout-right: calc(var(--breakout-size-right) + var(--content-max-width));
}
body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}
main {
  flex-grow: 1;
}
header {
  position: relative;
}
.content-wrap > *:not(.full-width) {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--padding-inline);
}
.content-wrap-self {
  max-width: 65rem;
  margin-inline: auto;
  padding-inline: var(--padding-inline);
}
.text-block-wrapper > *  {
  max-width: 65ch;
  margin-inline-end: auto;
  margin-inline-start: 0;
}
/*UTILITIES*/
/* color, text styling, and isolated layout directives */
.color-white {
  color: #fffffe;
}
.bg-kent-dark {
  background-color: #0c324a;
}
/* Manually  select first heading in a section with .gradient-text-logo.
 * This is because all headings are wrapped in a section.
 * also direct desecendant, so that child headings are not matched.
 * ALTERNATIVE: could also encode this at the design level ...
 */
/* the class .gradient-text-logo,
 * applied to other elements than headings,
 * will stay on those elements.
 */
strong {
  font-weight: bold;
}
/*BLOCKS -- INTERNAL SPECIALISED STYLING*/
/* Layout the header height! */
.banner {

  /* Make the banner almost full-height on very short screens, to give space to the banner text. */
  /* Leaves a little bit of space over to see the next heading down the page. */
  /* This overrides user setting in page frontmatter! */
  @media screen and (max-height: 400px) {
    --header-height: 90vh;
  }
  height: calc(var(--header-height) - 3rem);
  min-height: 30rem; /* always make it at least high enough for text to fit */

  & .banner-img {
    position: absolute;
    top: 0;
    height: var(--header-height);
    min-height: 30rem;
    width: 100%;
    z-index: -5;
  }

  .banner-img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: top;
       object-position: top;


    @media only screen and (min-width: 800px) and (max-width: 950px) {
        -o-object-position: 60% 50%;
           object-position: 60% 50%;
    }
    @media only screen and (min-width: 1800px) {
      -o-object-position: 0% 50%;
         object-position: 0% 50%;
    }
  }

}
/* Spacing of 'hero' text in banner */
.banner-text-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  height: 100%;

  @media only screen and (min-width: 581px) and (max-width: 1500px) { 
    /* Make the text vertically more centered */
    /* Note banner-content-block is still justify-content flex-end */
    justify-content: center;
  }
  @media only screen and (max-width: 1000px) and (max-aspect-ratio: 4/1) and (min-aspect-ratio: 1/1) {
    justify-content: flex-start;
    
    & .banner-content-block {
      max-height: initial;
    }
  }
}
.banner-content-block {
  max-width: 65rem;
  max-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: start;
  margin-block-end: var(--space-m-2xl);

  & > * {
    margin-block-end: var(--space-s);
  }
  & p {
    max-width: 37ch;
    word-spacing: .06rem;
    line-height: 1.3em;

    &.hero-text {
      font-size: var(--step-6);
      line-height: initial;
      max-width: 25ch;
    }
  }
  @media only screen and (max-width: 900px) { 
    max-height: initial;

    @media only screen and (max-aspect-ratio: 1/1) {
      /* margin-block-end: auto; */
      & p {
        font-size: var(--step-3);
        word-spacing: initial;
        &.hero-text {
          font-size: var(--step-8); 
        }

      }  
    }
  }



}
/* layout for topbar */
.topbar-wrapper {
  background-color: #0c324a;
  position: sticky;
  top: 0;

}
.topbar {
  padding-inline: var(--padding-inline);
}
header, footer {

  & a {
    color: var(--nav-link-color);
  }


  & a:visited {
    color: var(--nav-link-color);
    text-decoration: none;
  }

  & a:focus {
    text-decoration: none;
    color: var(--nav-link-color);
    background-color:  var(--link-color-visited);
  }

  & a:hover , & a:hover:visited {
    /* text-decoration: underline; */
  }

  & a:active {
    background-color:  transparent;
  }
}
footer {
  & a:hover , & a:hover:visited {
    color: #fffffe;
  }
}
.top-bar-nav {

  & ul {
    align-items: flex-end;
    & li:hover, & li:has(a.selected){
      transform: scale(1.05,1.05);
      transform-origin: bottom;
    }
  }

  & a:hover , & a:hover:visited {
    color: var(--inverted-link-color);
    /* text-decoration: underline; */
  }

}
.logo-link:hover {
  transform: scale(1.02,1.02);
}
.menu-burger {
  max-width: 2rem;
}
/* styling the header bar */
.topbar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  position: sticky;
  height: 100%;
  top: 0;
  align-items: center;
}
.topbar ul {
  display: flex;
  list-style: none;
  flex-direction: row;
  gap: 1em;
  margin: 0;
}
#menu-toggle {
  display: none;
}
.menu-button-container div{
  display: none;
}
.topbar nav {
    flex-basis: calc(100% - var(--space-3xl));
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #0c324a;

    @media screen and (min-width: 700px) {
      height: var(--space-l);
    }
  }
.topbar ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
/* a hacky way to get the image to be spaced correctly in the anchor? */
a.logo-link {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: var(--space-l-xl);
}
@media screen and (max-width: 700px) {
  .menu-button-container {
    display: block;
    align-self: center;
  }

  #menu-toggle:checked + .menu-button-container > .menu-open,
  #menu-toggle:not(:checked) + .menu-button-container > .menu-closed {
    display: block;
    height: 2rem;
    width: 2rem;
    padding-block: calc((var(--space-l) - 2rem) / 2);
  }

  .topbar nav, .menu-button-container {
    align-self: center;
  }


  #menu-toggle:not(:checked) ~ nav ul {
    display: none;
  }

  .topbar ul {
    flex-direction: column;
    align-items: flex-end;
    margin-block-end: var(--space-xs);
  }


}
nav a {
  text-decoration: none;
}
nav a.selected {
  /* text-decoration: underline; */
  color: var(--inverted-link-color);
}
.wkl-card-grid {
  --modifier: calc(800px - 100%);
  display: flex;
  flex-flow: row wrap;
  gap: var(--space-s);
  margin-bottom: var(--space-2xl);


}
.wkl-grid-card {
  /* This is for the layout of the cards in parent (.wkl-card-grid) */
  --threshold: calc(40ch - 100%);
  /* min-width: 250px; */
  /* flex-basis: calc( ((var(--threshold) - 100vw) * var(--threshold))); */
  flex-basis: calc(var(--modifier) * 999);
  flex-grow: 1;
  /* This relates to the layout inside */
  display: flex;
  flex-flow: row wrap;
  justify-content: start;
  align-content: flex-start;
  gap: var(--space-2xs);


  & .card-icon-wrapper {

    & img {
      height: 2.6rem;
      padding-inline-end: var(--space-2xs);
    }
  }

  & .card-content {
    max-width: 50ch;
    flex-grow: 1;
    flex-basis: calc(var(--threshold) * 999);
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-content: flex-start;

    & > * {
      margin-block: var(--space-2xs) 0;
    }

    & li {
      margin-block: var(--space-3xs);
    }

    & > :first-child {
      margin-block: 0;
    }
  }

}
.card-title {
  font-weight: bold;
}
footer {
  margin-top: var(--space-m);
}
footer > .content-wrap-self {
  padding-block: var(--space-xs);
}
.footer-items > * {
  margin-block: 0;
}
/* Grid version to align columns: use with two .footer-items divs */
.footer-items {
  font-size: var(--step--1);
  margin-inline: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
  grid-template-rows: auto;
  gap: var(--space-2xs);
}
/* SPECIAL */
body {
}
/*note: using float now for simplicity, could go to a grid or flex layout for more control.*/
/* @media only screen and (min-width: 650px) { */
/*   .wikkel.naast-elkaar { */
/*     flex-direction: row; */
/*  */
/*     & > * { */
/*       max-width: 50%; */
/*     } */
/*   } */
/*  */
/*   .wikkel.naast-elkaar.callout { */
/*       justify-content: start; */
/*   } */
/*  */
/*   .wikkel.naast-elkaar > p:nth-child(1) { */
/*     max-width: 50%; */
/*     min-width: 45%; */
/*   } */
/*  */
/*  */
/*   .imgfloatright { */
/*     float: right; */
/*     max-width: 50%; */
/*   } */
/*    */
/*   .imgfloatright.img-keep-small { */
/*     max-width: 30%; */
/*   } */
/* } */
/* this is really a 'tagline' ul */
/* So this contains everything now for menu */
/* rename it to 'topbar-menu' */
/* end styling topbar */
.logo-img {
  width: var(--space-3xl);
  margin-block: auto;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem
}
/* NOTE: lume component css is imported by wrapper.vto, after main.css */
.children-bg-white > * {
  background-color: rgba(255,255,255,0.7);
  border-radius: 10px;
}
iframe.letterbird-embed {
  margin-inline: 0 !important;
  width: 100% !important;
  max-width: 65ch !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .05), 0 8px 6px rgba(0, 0, 0, .05), 0 3px 6px 8px rgba(0, 0, 0, .05) !important;
}
footer .subtle-link, footer .subtle-link a, footer .subtle-link a:visited {
    color: #1b99ae;
}
.subtle-link a:visited:hover {
  color: var(--nav-link-color);
}

/*# sourceMappingURL=./main.css.map */