/*------------------------------------*\
    RESET
\*------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0b1 | 201101 
    NOTE:WORK IN PROGRESS
    USE WITH CAUTION AND TEST WITH ABANDON */

    html,body,div,span,applet,object,iframe,
    h1,h2,h3,h4,h5,h6,p,blockquote,pre,
    a,abbr,acronym,address,big,cite,code,
    del,dfn,em,img,ins,kbd,q,s,samp,
    small,strike,strong,sub,sup,tt,var,
    b,u,i,center,
    dl,dt,dd,ol,ul,li,
    fieldset,form,label,legend,
    table,caption,tbody,tfoot,thead,tr,th,td,
    article,aside,canvas,details,figcaption,figure,
    footer,header,hgroup,menu,nav,section,summary,
    time,mark,audio,video{
        margin:0;
        padding:0;
        border:0;
        outline:0;
        font-size:100%;
        font:inherit;
        vertical-align:baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article,aside,details,figcaption,figure,
    footer,header,hgroup,menu,nav,section{
        display:block;
    }
    body{
        line-height:0;
    }
    ol,ul{
        list-style:none;
    }
    blockquote,q{
        quotes:none;
    }
    blockquote:before,blockquote:after,
    q:before,q:after{
        content:’’;
        content:none;
    }
    /* remember to define visible focus styles! 
    :focus{
        outline:?????;
    } */
    
    /* remember to highlight inserts somehow! */
    ins{
        text-decoration:none;
    }
    del{
        text-decoration:line-through;
    }
    
    table{
        border-collapse:collapse;
        border-spacing:0;
    }
    
    :root {
        /*===== 
            #Color #Palette #Variables
            Variables follow convention found here: https://codepen.io/paceaux/pen/XdxQza
            Color is a very dark gray:  rgb (31, 31, 31). Grays are multiples of 31. 
            The NeutralDarker gray passes WCAGAA for contrast against a light background
        =====*/
            --colorNeutralDarker: rgb(31, 31, 31);              /* #1f1f1f; hsl(0%, 0%, 12%) */
            --colorNeutralDark: rgb(62, 62, 62);                /* #5d5d5d; hsl(0, 0%, 36%) */
            --colorNeutral: rgb(155, 155, 155);                 /* #9b9b9b; hsl(0, 0%, 61%) */
            --colorNeutralLight: rgb(186, 186, 186);            /* #bababa; hsl(0, 0%, 73%) */
            --colorNeutralLighter: rgb(217, 217, 217);          /* #d9d9d9; hsl(0, 0%, 85%) */
        
            /*
             These colors pass WCAG 2.1 for contrast against a light background and the NeutralDarker gray
             Before you change them, check your contrast ratios:  https://webaim.org/resources/linkcontrastchecker/
            */
            --colorCool: rgb(47, 120, 193);                          /*   #2f78c1; hsl(210, 61%, 47%);  */
            --colorCoolDarker: rgb(41, 105, 168);                    /*  #2a6bac;  hsl(210, 61%, 41%) */
        
        /*===== 
            #Color #Link #Border #Variables
            Variables follow convention found here: https://gist.github.com/paceaux/8638765e747f5bd6387b721cde99e066#sassscssstylus-naming
        =====*/
            --baseTextColor: var(--colorNeutralDarker);
            --baseEditorialTextColor: var(--colorNeutralDark);
            --baseLinkColor: var(--colorCool);
            --baseLinkColorHover: var(--colorCoolDarker);
            --baseInlineBorderColor: var(--colorNeutralLight);
        
            --baseTextLineColor: var(--baseTextColor);
            --alertTextLineColor: rgb(255, 0, 0);
        
            --baseQuoteBackgroundColor: 155, 155, 155, ; /* Same as colorNeutral*/
        
        /*===== 
            #LineHeight #Variables
        =====*/
            --baseLineHeight: 1.618;
            --smallLineHeight: 1.2;
        
        /*===== 
            #Body #Size #Paragraph #content-flow #Variables
        =====*/
            --biggestTextSize:  1.3em;
            --biggerTextSize: 1.2em;
            --bigTextSize: 1.1em;
            --baseTextSize: 1em;
            --smallTextSize: .8em;
            --smallerTextSize: .75em;
            --smallestTextSize: .618em;
        
        /*===== 
            #Heading #Title #Size #Variables
            The small title sizes use the big text sizes; so they overlap
            They're here, though, so that, if desired, we can deviate and not have them overlap
        =====*/
            --biggestTitleSize: 2.6179em; /* (16 x 1.618) x 1.618 */
            --bigTitleSize: 1.618em;
            --baseTitleSize: 1.5em;
            --smallTitleSize: var(--biggestTextSize);
            --smallerTitleSize: var(--biggerTextSize);
            --smallestTitleSize: var(--bigTextSize);
        
        /*===== 
            #Spacing #Text #Size #Variables
            rem for left-right, for consistent alignment.
            em for top/bottom, so the spacing is relative to font-size  
        =====*/
            --bigSpacingHorizontal: 1.618rem;
            --baseSpacingHorizontal: .618rem;
        
            --bigSpacingVertical: 1.618em;
            --baseSpacingVertical: .618em;
        
        /*===== 
            #Font #FontFamilies #Typeface #Code #Heading #Paragraphs #Variables
            base is meant to be what's applied to the majority of body copy
            title could also be called "headline", but would be  w/ other vars
        =====*/
            --baseFontFamily: georgia, "Times New Roman", serif;
            --titleFontFamily: helvetica, arial, sans-serif;
            --codeFontFamily: monospace;
        
        /*===== 
            #Font #Weight #Variables
            though font-weight ranges from 100 - 900, "normal" is 400 and the ends
                 are a difference of 300 .
            So the "est" weights are the extremes, with room to add 
                light, lighter, heavy, heavier. 
            Recommend adding "ultra" if the weight is > 700
        =====*/
            --lightestFontWeight: 100;
            --baseFontWeight: 400;
            --heaviestFontWeight: 700;
        
        /*===== 
            #font #style #Variables
            Oblique will use the existing font and put the glyphs at an angle
            Alternate will look for a font labelled with an italic face
            If the browser doesn't have a labelled italic font, it synthesizes oblique
        =====*/
            --shiftedFontVoice: oblique 15deg;
            --baseFontVoice: normal;
            --alternateFontVoice: italic;
        
        /*===== 
            #font #quotes #border #Variables
            These are the default quotes for English. Change these quotes-as needed for other languages
            "secondary" quotes are nested quotes. e.g. <blockquote><blockquote>
            the CSS properties 'open-quote', 'close-quote' will use the primary open and primary close quotes listed here
        =====*/
            --baseTextQuotes: "\201C""\201D""\2018""\2019"; /*Primary open, primary close, secondary open, secondary close*/
            --baseQuoteBorder: 10px solid var(--colorNeutralLighter);
            --smallQuoteBorder: 5px solid var(--colorNeutralLight);
        
        /*===== 
            #font #text #interactions #Variables
            Interactions could/should include
                idle: not being used, but an indicator that it can be
                interest: a user has shown desire to interact (e.g. hover or focus)
                active: a user is currently interacting
        =====*/
            --idleTextLineStyle: dotted;
            --interestTextLineStyle: solid;
            --activeTextLineStyle: solid;
            --idleTextDecoration: var(--idleTextLineStyle) underline 2px;
        }
        
        html {
            color: var(--baseTextColor);
            font-family: var(--baseFontFamily);
            font-size: calc(.5vw + 1rem); /* the font-size can scale up as the browser window gets larger, but doesn't get hard to read when the browser window shrinks*/
            line-height: var(--baseLineHeight);
        }
        
        
        /*=====
          #Everything
        =====*/
        
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        ul,
        ol,
        dl,
        pre {
            line-height: var(--baseLineHeight);
            margin: 0 var(--baseSpacingHorizontal);
        }
        
        
        /*=====
          #Headings
        =====*/
        
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: var(--titleFontFamily);
            font-weight: var(--heaviestFontWeight);
            line-height: var(--smallLineHeight);
            margin-bottom: calc(1.618vmin - 1vmax + .35em); /* increases margin as screen width gets smaller */
        }
        
        
        
        
        /*=====
          #Lists
        =====*/
        
        ul,
        ol,
        dl,
        menu {
            padding: var(--baseSpacingVertical) var(--baseSpacingHorizontal);
        }
        
        li {
            list-style-position: inside;
            /*text-indent: -.9em; *//*this brings the left text aligned with the text of a <dd> element*/
            line-height: var(--baseLineHeight);
            padding: 0;
            margin: 0 0 0 var(--baseSpacingHorizontal);
        }
        
        nav li,
        menu li {
            list-style-type: none;
            text-indent: 0;
            margin: 0;
        }
        
        dt {
            text-indent: calc(-1 * var(--baseSpacingHorizontal));
        }
        
        dd {
            padding: 0 var(--baseSpacingHorizontal);
            margin: 0;
        }
        
        
        /*=====
          #Paragraphs #Blocks
        =====*/
        
        hr {
            color: var(--colorNeutral);
            border-width: .0625em;
            border-style: solid;
            margin: var(--bigSpacingVertical) var(--baseSpacingHorizontal);
        }
        
        p,
        blockquote {
            line-height: var(--baseLineHeight);
        }
        
        p {
            font-size: var(--baseTextSize);
            margin-bottom: var(--baseSpacingVertical);
        }
        
        blockquote,
        q {
            quotes: var(--baseTextQuotes);
        }
        
        blockquote::before,
        q::before {
            content: open-quote;
        }
        
        /* Credit where it's due:
            https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/
        */
        blockquote {
            padding: var(--baseSpacingVertical) var(--baseSpacingHorizontal);
            border-left: var(--baseQuoteBorder);
            background: rgba(var(--baseQuoteBackgroundColor) 0.15);
            margin: var(--bigSpacingVertical) var(--baseSpacingHorizontal);
        }
        
        blockquote::before,
        blockquote::after {
            color: var(--colorNeutralDark); /* Any lighter and it won't pass WCAG AA */
            vertical-align: -0.5em;
            font-size: 4em;
            line-height: 0.1em;
        }
        
        blockquote::before {
            margin-right: var(--baseSpacingHorizontal);
        }
        
        blockquote::after {
            content: no-close-quote;
        }
        
        q::after {
            content: close-quote;
        }
        
        
        /*=====
          #Content-Flow
        =====*/
        
        em,
        i,
        cite {
            font-style: var(--alternateFontVoice);
        }
        
        strong,
        b {
            font-weight: var(--heaviestFontWeight);
        }
        
        cite {
            display: block;
            text-align: right;
        }
        
        small,
        sub,
        sup {
            font-size: var(--smallestTextSize);
            line-height: 1;
        }
        
        sub {
            vertical-align: sub;
        }
        
        sup {
            vertical-align: super;
        }
        
        
        /*=====
          #Content-Flow #editorial
        =====*/
        
        s,
        strike,
        del,
        ins {
            color: var(--baseEditorialTextColor);
        }
        
        s,
        strike,
        del {
            text-decoration: line-through;
        }
        
        ins,
        del {
            background-color: rgba(217, 217, 217, 0.25);
        }
        
        ins {
            text-decoration: none;
        }
        
        /* U is for misspelled words. Invite user to make a correction */
        u {
            text-decoration: var(--idleTextDecoration);
            text-decoration-color: var(--alertTextLineColor);
        }
        
        /*
        mark and selection should be different so user knows which one they've selected.
        */
        
        /* hue: 120, saturation: 45%, lightness: 73%  */
        mark {
            background-color: rgba(155, 217, 155, 0.9);
        }
        
        /*hue: 180, saturation: 45%, lightness: 73%*/
        ::selection {
            background-color: rgba(155, 217, 217, 0.9);
        }
        
        /* Because mark and selection have same saturation and brightness, a selected <mark> won't stand out
            A hue between 120 and 180 seems to stand out the best in all colorblind tests, too
            hue: 150, saturation: 44%, lightness: 65%
         */
        mark::selection {
            background-color: rgba(126, 205, 166, 0.9);
        }
        
        /* dfn and dt both do the same thing: denote a term to be defined */
        dfn,
        dt {
            font-weight: var(--heaviestFontWeight);
            font-style: var(--shiftedFontVoice);
            text-transform: capitalize;
        }
        
        abbr {
            text-transform: uppercase;
            text-decoration: none;
        }
        
        /* an abbreviation with a title should invite a user to hover over it*/
        abbr[title] {
            text-decoration: var(--idleTextDecoration);
        }
        
        
        /*=====
        #Content-flow #Code
        =====*/
        
        pre,
        code,
        var,
        samp,
        data {
            font-family: var(--codeFontFamily);
        }
        
        kbd,
        samp,
        data {
            background-color: rgba(var(--baseQuoteBackgroundColor) 0.2);
        }
        
        kbd {
            font-size: var(--smallerTextSize);
            padding: .25ex .5ex;
            border: 1px solid  var(--baseInlineBorderColor);
            border-radius: 3px;
        }
        
        /*Treat samp like a mini blockquote. because basically you're quoting what the computer would do*/
        samp,
        data {
            padding: 0 10px;
        }
        
        var,
        data {
            font-style: var(--alternateFontVoice);
        }
        
        samp {
            border-left: var(--smallQuoteBorder);
        }
        
        pre {
            overflow: scroll;
            font-size: var(--smallerTextSize);
            line-height: var(--smallLineHeight);
            padding: var(--baseSpacingVertical) var(--baseSpacingHorizontal);
            border: 1px solid var(--baseInlineBorderColor);
            border-radius: 2px;
        }
        
        
        /*=====
          #Ruby
        =====*/
        
        ruby {
            position: relative;
            display: ruby;
            margin:0 .5ex;
            -webkit-ruby-position: before;
            ruby-position: over;
            ruby-position: before;
        }
        
        rtc, rbc {
            font-size: inherit;
            line-height: 1;
            ruby-align: start;
        }
        
        rt {
            display: ruby-text;
            font-size: .7em;
        }
        
        rt + rt {
            margin-left: .5ex;
        }
        
        rtc > bdo {
            display: -webkit-ruby-text-container;
            display: ruby-base-container;
        }
        
        /*complex ruby for chrome and Edge*/
        
        /*only FF has "complete" ruby support*/
        @supports (ruby-align: left) or ( not (display:ruby-base-container))  {
            ruby {
                display:inline-flex;
                flex-direction: column;
                vertical-align: 1em;
                line-height: 1;
            }
        
            rtc, rt {
                order: -1;
                flex-grow: 1;
                flex-shrink: 0;
            }
        
            rtc {
                display: inline-flex;
            }
        }
        
        /*Edge fixes*/
        @supports  ((ruby-align: left)) {
            rtc {
                justify-content: space-between;
            }
        
            rt {
                display: inline-flex;
            }
        }
        
        
        /*=====
        #Links
        =====*/
        /*
        a {
            color: var(--baseLinkColor);
            text-decoration: none;
            border-bottom: 1px var(--idleTextLineStyle);
            transition: all .3s ease-in-out;
        }
        
        a:hover,
        a:focus {
            color: var(--baseLinkColorHover);
            border-bottom-style: var(--interestTextLineStyle);
            outline: none;
        }
        
        a:active {
            border-bottom-style: var(--activeTextLineStyle);
        }
        */
        
        /*==========
        #Table
        ==========*/
        
        table {
            font-size:  var(--smallTextSize);
        }
        
        caption {
            font-style: var(--alternateFontVoice);
            text-transform: capitalize;
            font-size:  var(--baseTextSize);
        }
        
        th, td {
            text-align: left;
            vertical-align: middle;
            line-height: var(--smallLineHeight);
            padding: .4em var(--baseSpacingHorizontal);
        }
        
        th {
            font-family: var(--titleFontFamily);
            font-weight: var(--heaviestFontWeight);
            font-size: var(--smallTitleSize); /*treat th in a body as h4*/
        }
        
        thead th,
        tfoot th {
            font-size: var(--baseTitleSize); /*treat th in header/footer as h3*/
        }
   




/*MENU STYLES*/
/* === Menu Wrapper === */
.menu-wrapper {
    --menu-bg: transparent;  /*edit bn changed from hsl(240, 10%, 20%) */
    --menu-trsdu: .2s;
    --menu-trstf: cubic-bezier(.4, 0, .2, 1);
    --menu-pb: .75em;
    --menu-pi: 1.5em;
  
    align-items: center;
    /*background: #fff; */
    color: var(--primary-color);  /*edit BN to primary color from var(--menu--c, hsl(240, 0%, 85%)) */
    display: flex;
    font-size: 1.1em; /*edit BN from: var(--menu-fz, .75rem) */
    justify-content: space-between;
    /*margin-inline: auto;
    max-inline-size: var(--menu-desktop-w, 1800px);*/
    padding:
      var(--menu-pb)
      calc(env(safe-area-inset-right) + var(--menu-pi))
      var(--menu-pb)
      calc(env(safe-area-inset-left) + var(--menu-pi));
    z-index:12; /*added bn */
  }
  .menu-open .menu-flyout { translate: 0; }
  .menu-wrapper a {
    align-items: center;
    color: inherit;
    display: flex;
    gap: .5ch; /* gap between icon and text */
    line-height: 1em;  /* edit bn from: var(--menu-a-lh, 2.5)*/
    transition: color var(--menu-trsdu) var(--menu-trstf);
    text-decoration: none;
  }
  
  /* === Flyout === */
  .menu-flyout {

    background: #FFFFFF;
    /*
    background: var(--background-color);  /*edit bn changed from var(--menu-flyout-bg, inherit) useless comment*/
    /*
        --s: 97px; /* control the size*/ /*
        --c1: #eff0f3;
        --c2: #ffffff;
        
        --_g: #0000 90deg,var(--c1) 0;
        background: 
          conic-gradient(from 90deg at 2px 2px,var(--_g)),
          conic-gradient(from 90deg at 1px 1px,var(--_g)),
          var(--c2);
        background-size: var(--s) var(--s), calc(var(--s)/5) calc(var(--s)/5);

    */
    color: var(--menu-flyout-c, inherit);
    display: flex;
    flex-direction: column;
    font-size: 1em;
    inset: 0 var(--menu-flyout-offset, 0) 0 0;
    justify-content: space-between;
    padding: var(--menu-flyout-p, 4ch 2ch 2ch);
    position: fixed;
    transition: translate var(--menu-trsdu) var(--menu-trstf);
    translate: -100vw 0;
    z-index:3;
  }
  
  /* === Menus === */
  .menu-cta, .menu-main {
    display: flex;
    flex: 1;
    flex-direction: var(--menu-flyout-dir, column);
  }
  .menu-cta {
    gap: clamp(0.5rem, -0.125rem + 2vw, 1rem);
    justify-content: end;

    a {
        font-size:0.9em;
        padding:0.4em;
        background-color:var(--button-color);
        color: var(--main-color);
        display:block;
        text-align:center;

        span {
            font-size:0.8em;
        }
    }
  }
  .menu-main { 
    /*gap: clamp(0.5rem, -3.875rem + 14vw, 4rem);*/
    text-align: left;
  }
  
  @media (min-width: 1040px) {
    .menu-cta, .menu-main { flex: unset; }
    .menu-flyout {
      --menu-flyout-dir: row;
      display: contents;
      color: inherit;
      font-size: revert;
    }
    
    .menu-cta { display:none; }
    .menu-toggle { display: none; }
    .menu-wrapper { /* stretch background-color to edge-of-screen */
      border-image: conic-gradient(var(--menu-bg, hsl(240, 10%, 20%)) 0 0) fill 0//100vw;
      /*clip-path: polygon(-100vw 0, 100vw 0, 100vw 100%, -100vw 100%);*/
      justify-content: center;

      a {
        color:#222;
        font-family: 'Nimbus Mono PS', 'Courier New', monospace;
      }
    }
  }

  @media(hover: hover) {
    .menu-wrapper a:hover { 
        color: var(--secondary-color); 

    }
  }

  @media (min-width: 1040px) {
    .menu-wrapper a:hover { 

        color: #FFF; 
    }
  }
  
  /* === Menu Toggle === */
  :where(.menu-toggle) {
    --menu-toggle-bdrs: 4px;
    --menu-toggle-gap: 8px;
    --menu-toggle-h: 2px;
    --menu-toggle-w: 24px;
  
    appearance: none;
    background: none;
    border: 0;
    color: inherit;
    display: grid;
    gap: var(--menu-toggle-gap);
    height: var(--menu-toggle-w);
    outline: none;
    place-content: center;
    width: var(--menu-toggle-w);
    z-index: 9;
  }
  .menu-toggle::before,
  .menu-toggle::after {
    background-color: currentColor;
    border-radius: var(--menu-toggle-bdrs);
    content: "";
    height: var(--menu-toggle-h);
    transform-origin: center center;
    transition: rotate var(--menu-trsdu) var(--menu-trstf);
    width: var(--menu-toggle-w);
  }
  .menu-open .menu-toggle { gap: 0; }
  .menu-open .menu-toggle::after {
    rotate: 45deg;
    translate: var(--menu-toggle-h) calc(var(--menu-toggle-h) / -2);
  }
  .menu-open .menu-toggle::before {
    rotate: -45deg;
    translate: var(--menu-toggle-h) calc(var(--menu-toggle-h) / 2);
  }
  
  /* === Prevent Scrolling on <body>, when .menu-toggle is checked (flyout is visible) === */
    @media (max-width: 767px) {
    .menu-open { overflow: hidden; }
  }
  
  /* === Reset, Demo-Styles === */
  *, *::before, *::after { box-sizing: border-box; }
 
  
  /* === Icons === */
  .icon, .icon-stroke {
    height: var(--icon-sz, 2em);
    width: var(--icon-sz, 2em);
  }
  .icon-stroke {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1;
    stroke: currentColor;
  }
  /*END MENU STYLES */