:root {

  
    --fg-pale-background:      #f9f7f4;    --fg-dark-brown-black:     #2f2d2c;    --fg-linen:                #f2eee8;  
    --fg-0-dark-apple-green:   #385125;    --fg-0-apple-green:        #5f8841;    --fg-0-light-apple-green:  #aecf52;    --fg-0-bright-apple-green: #e6f991;    --fg-0-pastel-apple-green: #f8fbed;  
    --fg-i-dark-blue:          #003a53;    --fg-i-blue:               #166f96;    --fg-i-light-blue:         #29ade5;    --fg-i-pale-blue:          #b9e6f9;    --fg-i-pastel-blue:        #edf4f8;  
    --fg-ii-dark-burnt-orange: #481f0c;    --fg-ii-burnt-orange:      #ca5c17;    --fg-ii-bright-orange:     #ff4d20;    --fg-ii-pastel-orange:     #f5ebe5;  
    --fg-iii-dark-violet:      #2d3378;    --fg-iii-mid-violet:       #5c55bf;    --fg-iii-bright-violet:    #7066ff;    --fg-iii-light-violet:     #afb3ff;    --fg-iii-pastel-violet:    #e8e5f6;  
    --fg-iv-dark-pine-green:   #194a4b;    --fg-iv-pine-green:        #29797a;    --fg-iv-bright-pine-green: #36bdb6;    --fg-iv-pastel-pine-green: #e9f5f4;  
    --fg-v-dark-purple:        #43173a;    --fg-v-purple:             #62004d;    --fg-v-bright-purple:      #b200a6;    --fg-v-light-purple:       #e77df8;    --fg-v-pale-purple:        #ffdaf7;    --fg-v-pastel-purple:      #f6eff5;  
    --fg-vi-brown-mustard:     #595038;    --fg-vi-mustard:           #a97c00;    --fg-vi-yellow-mustard:    #f4cf00;    --fg-vi-pastel-yellow-mustard: #fbf7e8;  
    --derived-pastel-violet:   #f3f1fa;  
    --legacy-pale-background-old: #faf9f5;    --legacy-lavender:            #b9a6ff;    --legacy-burnt-orange:        #ca5017;    --legacy-light-green:         #d7e8de;    --legacy-bright-blue:         #7bd7ff;    --legacy-white:               #ffffff;
  --legacy-black:               #000000;  

    --paper:     var(--fg-pale-background);
  --linen:     var(--fg-linen);
  --ink:       var(--fg-dark-brown-black);    --ink-black: var(--legacy-black);         
    --brand-triad-1: var(--fg-iv-pine-green);
  --brand-triad-2: var(--fg-ii-burnt-orange);
  --brand-triad-3: var(--fg-iii-bright-violet);

    --footer-rule:        var(--fg-iii-bright-violet);    --footer-heading-ink: var(--fg-iii-light-violet);     --footer-brand-ink:   var(--fg-iii-pastel-violet);  
    --hairline-soft:      rgba(0, 0, 0, 0.12);
  --hairline-soft-dark: rgba(249, 247, 244, 0.24);
    --hairline-nav:       rgba(0, 0, 0, 0.4);
  --hairline-w:         1px;

    --ff-display: "Funnel Display", "Helvetica Neue", Arial, sans-serif;
  --ff-sans:    "Funnel Sans", "Helvetica Neue", Arial, sans-serif;
  --ff-serif:   "Source Serif 4", "Iowan Old Style", Georgia, serif;

    --role-display:    300 40px/46px var(--ff-display);    --role-heading:    400 34px/40px var(--ff-display);    --role-title:      400 28px/38px var(--ff-display);    --role-feature:    400 26px/34px var(--ff-serif);      --role-lede:       500 20px/32px var(--ff-serif);      --role-para-title: 500 20px/28px var(--ff-display);    --role-body:       400 18px/29px var(--ff-serif);      --role-body-sans:  300 18px/28px var(--ff-sans);       --role-label:      500 18px/25px var(--ff-sans);       --role-ui:         500 16px/26px var(--ff-display);    --role-meta:       400 14px/20px var(--ff-sans);       --role-micro:      400 13px/20px var(--ff-sans);     

  
    --t-display-xl:        var(--role-display);               --t-display-lg:        var(--role-heading);               --t-display-contents:  var(--role-heading);               --t-section-title:     var(--role-title);                 --t-panel-title:       var(--role-title);                 --t-chapter-title:     400 28px/38px var(--ff-serif);     --t-testimonial:       500 28px/38px var(--ff-serif);     --t-quote-alt:         400 28px/38px var(--ff-sans);    
    --t-quote:             var(--role-feature);               --t-pullout-title:     400 26px/34px var(--ff-display);   --t-contents-title:    var(--role-feature);               --t-big-statement:     400 26px/34px var(--ff-sans);      --t-subhead:           400 26px/34px var(--ff-sans);      --t-testimonial-name:  400 26px/34px var(--ff-sans);    
    --t-body-lede:         var(--role-lede);                  --t-body-lede-tight:   400 20px/32px var(--ff-serif);     --t-attribution-italic: italic 500 20px/32px var(--ff-serif); 
    --t-para-title:        var(--role-para-title);            --t-card-title:        var(--role-para-title);            --t-heading-sans:      500 20px/28px var(--ff-sans);      --t-table-label:       400 20px/28px var(--ff-sans);    
    --t-body:              var(--role-body);                  --t-body-italic:       italic 400 18px/29px var(--ff-serif);   --t-table-cell:        var(--role-body);                  --t-introband-body:    400 17px/34px var(--ff-serif);   
    --t-body-sans:         var(--role-body-sans);             --t-sidebar-label:     var(--role-body-sans);             --t-body-sans-reg:     400 18px/28px var(--ff-sans);      --t-card-body:         var(--t-body-sans-reg);            --t-body-sans-med:     500 18px/28px var(--ff-sans);      --t-quote-attrib:      500 18px/28px var(--ff-sans);      --t-definition-note:   italic 400 18px/28px var(--ff-sans); 
    --t-part-label:        var(--role-label);                 --t-term:              var(--role-label);                 --t-section-eyebrow:   500 18px/25px var(--ff-display);   --t-fact:              400 18px/25px var(--ff-sans);      --t-testimonial-role:  400 18px/25px var(--ff-sans);      --t-wordmark:          500 18px/25px var(--ff-display);   --t-wordmark-italic:   italic 500 18px/25px var(--ff-serif);   --t-footer-heading:    400 18px/25px var(--ff-display);   --t-footer-contact:    500 18px/25px var(--ff-display);   --t-blob-label:        300 18px/25px var(--ff-display); 
    --t-eyebrow-italic:    italic 500 22px/44px var(--ff-serif);    --tr-eyebrow-italic:   0.22px;

    --t-footer-wordmark:        var(--role-ui);               --t-footer-wordmark-italic: italic 500 16px/26px var(--ff-serif);   --t-button:            var(--role-ui);                    --t-nav-link:          var(--role-ui);                    --t-caption:           400 16px/26px var(--ff-sans);    
    --t-meta:              var(--role-meta);                  --t-meta-med:          500 14px/20px var(--ff-sans);      --t-colophon:          400 14px/20px var(--ff-serif);     --t-footer-link:       400 14px/20px var(--ff-serif);   
    --t-sidebar-reg:       var(--role-micro);                 --t-sidebar-bold:      600 13px/20px var(--ff-sans);      --t-micro-med:         500 13px/20px var(--ff-sans);      --t-figcaption-art:    var(--role-micro);                 --t-table-tag:         600 13px/20px var(--ff-sans);    

    --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;     --s-6:   24px;
  --s-7:   29px;     --s-8:   32px;
  --s-9:   40px;     --s-10:  48px;     --s-11:  64px;
  --s-12:  77px;     --s-13:  96px;
  --s-14:  104px;    --s-15:  128px;
  --s-16:  160px;

    --band-pad-y:      var(--s-13);
  --band-pad-y-lg:   var(--s-16);
  --module-gap:      var(--s-11);

    --canvas:        1440px;
  --page-pad:      24px;     --col-gutter:    550px;    --col-text:      650px;    --col-rail:      190px;    --col-home:      510px;    --col-quote:     590px;    --col-card:      1349px;   --col-tldr:      1169px;   --col-popbox:    734px;    --quote-inset:   40px;     --toc-w:         265px;    --nav-h:         77px;
  --hero-band-h:   198px;    --hero-compact-h: 56px;    --accent-bar-h:  4px;    

    --r-0:      0px;        --r-card:   10px;       --r-panel:  12px;       --r-pill:   200px;    
    --texture-grain: url("../assets/textures/grain.png");

    --texture-opacity: 0.49;    --header-texture-opacity: 0.52;    --callout-opacity: 0.6;     --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 900px) {
  :root {
    --role-body:     400 16.5px/26px var(--ff-serif);
    --t-body-italic: italic 400 16.5px/26px var(--ff-serif);
    --s-7: 26px;
  }
}

html[data-typescale="legacy"] {
  --t-display-lg:         400 40px/50px var(--ff-display);
  --t-display-contents:   400 40px/38px var(--ff-display);
  --t-chapter-title:      400 30px/38px var(--ff-serif);
  --t-panel-title:        400 28px/35px var(--ff-display);
  --t-testimonial:        500 28px/42px var(--ff-serif);
  --t-quote:              400 26px/38px var(--ff-serif);
  --t-subhead:            400 26px/35px var(--ff-sans);
  --t-testimonial-name:   400 25px/35px var(--ff-sans);
  --t-card-title:         400 22px/32px var(--ff-display);
  --t-heading-sans:       500 22px/25px var(--ff-sans);
  --t-body-lede:          500 20px/34px var(--ff-serif);
  --t-body-lede-tight:    400 20px/29px var(--ff-serif);
  --t-attribution-italic: italic 500 20px/29px var(--ff-serif);
  --t-table-label:        400 20px/35px var(--ff-sans);
  --t-quote-attrib:       500 18px/29px var(--ff-sans);
  --t-fact:               400 18px/24px var(--ff-sans);
  --t-wordmark:           500 18px/29px var(--ff-display);
  --t-wordmark-italic:    italic 500 18px/29px var(--ff-serif);
  --t-footer-heading:     400 18px/29px var(--ff-display);
  --t-footer-contact:     500 18px/29px var(--ff-display);
  --t-table-cell:         400 18px/29px var(--ff-serif);
  --t-button:             500 16px/28px var(--ff-display);
  --t-nav-link:           500 16px/29px var(--ff-display);
  --t-caption:            400 16px/24px var(--ff-sans);
  --t-footer-link:        400 15px/18.09px var(--ff-serif);
  --t-colophon:           400 14px/29px var(--ff-serif);
    --t-blob-label:         300 18px/26px var(--ff-display);
  --t-figcaption-art:     400 12px/18px var(--ff-sans);
  --t-table-tag:          600 12px/16px var(--ff-sans);
}

@media (max-width: 900px) {
  html[data-typescale="legacy"] {
    --t-display-lg:       400 30px/40px var(--ff-display);
    --t-display-contents: 400 30px/36px var(--ff-display);
    --t-chapter-title:    400 24px/32px var(--ff-serif);
    --t-quote:            400 22px/32px var(--ff-serif);
    --t-testimonial:      500 24px/34px var(--ff-serif);
    --t-subhead:          400 20px/30px var(--ff-sans);
  }
}