WordPress.org
Get WordPress

Make WordPress Core

Changeset 49574


Ignore:
Timestamp:
11/12/2020 06:34:44 PM (4 years ago)
Author:
desrosj
Message:

Twenty Twenty-One: Merge the latest changes changes from GitHub for Beta 4.

In addition to syncing the latest changes, this change also merges the theme’s .scss files and other related build tool configurations required to compile the theme’s CSS.

This will allow development of the theme to continue on Trac after 5.6 is released and the GitHub repository is archived.

For a full list of changes since [], see ​https://github.com/WordPress/twentytwentyone/compare/e7d5991...aa284fd.

Props poena, luminuu kjellr, aristath, justinahinon.
See #51526.

Location:
trunk/src/wp-content/themes/twentytwentyone
Files:
145 added
1 deleted
31 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-content/themes/twentytwentyone/assets/css/custom-color-overrides.css

    r49216 r49574  
    11/**
    22 * Custom Color Overrides
    3  * 
     3 *
    44 * This file is automatically populated if the user chooses custom colors in the Customzier.
    55 */

  • trunk/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css

    r49478 r49574  
    11@charset "UTF-8";
     2
    23/**
    34 * These styles should be loaded by the Block Editor only
    45 */
     6
    57/* Variables */
    68:root {
     9
    710    /* Font Family */
     11    --global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
     12    --global--font-secondary: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
     13
    814    /* Font Size */
     15    --global--font-size-base: 1.25rem;
     16    --global--font-size-xs: 1rem;
     17    --global--font-size-sm: 1.125rem;
     18    --global--font-size-md: 1.25rem;
     19    --global--font-size-lg: 1.5rem;
     20    --global--font-size-xl: 2.25rem;
     21    --global--font-size-xxl: 4rem;
     22    --global--font-size-xxxl: 5rem;
     23    --global--font-size-page-title: var(--global--font-size-xxl);
     24    --global--letter-spacing: normal;
     25
    926    /* Line Height */
     27    --global--line-height-body: 1.7;
     28    --global--line-height-heading: 1.3;
     29    --global--line-height-page-title: 1.1;
     30
    1031    /* Headings */
     32    --heading--font-family: var(--global--font-primary);
     33    --heading--font-size-h6: var(--global--font-size-xs);
     34    --heading--font-size-h5: var(--global--font-size-sm);
     35    --heading--font-size-h4: var(--global--font-size-lg);
     36    --heading--font-size-h3: calc(1.25 * var(--global--font-size-lg));
     37    --heading--font-size-h2: var(--global--font-size-xl);
     38    --heading--font-size-h1: var(--global--font-size-page-title);
     39    --heading--letter-spacing-h6: 0.05em;
     40    --heading--letter-spacing-h5: 0.05em;
     41    --heading--letter-spacing-h4: var(--global--letter-spacing);
     42    --heading--letter-spacing-h3: var(--global--letter-spacing);
     43    --heading--letter-spacing-h2: var(--global--letter-spacing);
     44    --heading--letter-spacing-h1: var(--global--letter-spacing);
     45    --heading--line-height-h6: var(--global--line-height-heading);
     46    --heading--line-height-h5: var(--global--line-height-heading);
     47    --heading--line-height-h4: var(--global--line-height-heading);
     48    --heading--line-height-h3: var(--global--line-height-heading);
     49    --heading--line-height-h2: var(--global--line-height-heading);
     50    --heading--line-height-h1: var(--global--line-height-page-title);
     51    --heading--font-weight: normal;
     52    --heading--font-weight-page-title: 300;
     53    --heading--font-weight-strong: 600;
     54
    1155    /* Block: Latest posts */
     56    --latest-posts--title-font-family: var(--heading--font-family);
     57    --latest-posts--title-font-size: var(--heading--font-size-h3);
     58    --latest-posts--description-font-family: var(--global--font-secondary);
     59    --latest-posts--description-font-size: var(--global--font-size-sm);
     60    --list--font-family: var(--global--font-secondary);
     61    --definition-term--font-family: var(--global--font-primary);
     62
    1263    /* Colors */
     64    --global--color-black: #000;
     65    --global--color-dark-gray: #28303d;
     66    --global--color-gray: #39414d;
     67    --global--color-light-gray: #f0f0f0;
     68    --global--color-green: #d1e4dd;
     69    --global--color-blue: #d1dfe4;
     70    --global--color-purple: #d1d1e4;
     71    --global--color-red: #e4d1d1;
     72    --global--color-orange: #e4dad1;
     73    --global--color-yellow: #eeeadd;
     74    --global--color-white: #fff;
     75    --global--color-white-50: rgba(255, 255, 255, 0.5);
     76    --global--color-white-90: rgba(255, 255, 255, 0.9);
     77    --global--color-primary: var(--global--color-dark-gray);
     78
    1379    /* Body text color, site title, footer text color. */
     80    --global--color-secondary: var(--global--color-gray);
     81
    1482    /* Headings */
     83    --global--color-primary-hover: var(--global--color-primary);
     84    --global--color-background: var(--global--color-green);
     85
    1586    /* Mint, default body background */
     87    --global--color-border: var(--global--color-primary);
     88
    1689    /* Used for borders (separators) */
     90
    1791    /* Spacing */
     92    --global--spacing-unit: 20px;
     93    --global--spacing-measure: unset;
     94    --global--spacing-horizontal: 25px;
     95    --global--spacing-vertical: 30px;
     96
    1897    /* Elevation */
     98    --global--elevation: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
     99
    19100    /* Forms */
     101    --form--font-family: var(--global--font-secondary);
     102    --form--font-size: var(--global--font-size-sm);
     103    --form--line-height: var(--global--line-height-body);
     104    --form--color-text: var(--global--color-dark-gray);
     105    --form--color-ranged: var(--global--color-secondary);
     106    --form--label-weight: 500;
     107    --form--border-color: var(--global--color-secondary);
     108    --form--border-width: 3px;
     109    --form--border-radius: 0;
     110    --form--spacing-unit: calc(0.5 * var(--global--spacing-unit));
     111
    20112    /* Cover block */
     113    --cover--height: calc(15 * var(--global--spacing-vertical));
     114    --cover--color-foreground: var(--global--color-white);
     115    --cover--color-background: var(--global--color-black);
     116
    21117    /* Buttons */
     118    --button--color-text: var(--global--color-background);
     119    --button--color-text-hover: var(--global--color-secondary);
     120    --button--color-text-active: var(--global--color-secondary);
     121    --button--color-background: var(--global--color-secondary);
     122    --button--color-background-active: var(--global--color-background);
     123    --button--font-family: var(--global--font-primary);
     124    --button--font-size: var(--global--font-size-base);
     125    --button--font-weight: 500;
     126    --button--line-height: 1.5;
     127    --button--border-width: 3px;
     128    --button--border-radius: 0;
     129    --button--padding-vertical: 15px;
     130    --button--padding-horizontal: calc(2 * var(--button--padding-vertical));
     131
    22132    /* entry */
     133    --entry-header--color: var(--global--color-primary);
     134    --entry-header--color-link: currentColor;
     135    --entry-header--color-hover: var(--global--color-primary-hover);
     136    --entry-header--color-focus: var(--global--color-secondary);
     137    --entry-header--font-size: var(--heading--font-size-h2);
     138    --entry-content--font-family: var(--global--font-secondary);
     139    --entry-author-bio--font-family: var(--heading--font-family);
     140    --entry-author-bio--font-size: var(--heading--font-size-h4);
     141
    23142    /* Header */
     143    --branding--color-text: var(--global--color-primary);
     144    --branding--color-link: var(--global--color-primary);
     145    --branding--color-link-hover: var(--global--color-secondary);
     146    --branding--title--font-family: var(--global--font-primary);
     147    --branding--title--font-size: var(--global--font-size-lg);
     148    --branding--title--font-size-mobile: var(--heading--font-size-h4);
     149    --branding--title--font-weight: normal;
     150    --branding--title--text-transform: uppercase;
     151    --branding--description--font-family: var(--global--font-secondary);
     152    --branding--description--font-size: var(--global--font-size-sm);
     153    --branding--description--font-family: var(--global--font-secondary);
     154    --branding--logo--max-width: 300px;
     155    --branding--logo--max-height: 100px;
     156    --branding--logo--max-width-mobile: 96px;
     157    --branding--logo--max-height-mobile: 96px;
     158
    24159    /* Main navigation */
     160    --primary-nav--font-family: var(--global--font-secondary);
     161    --primary-nav--font-family-mobile: var(--global--font-primary);
     162    --primary-nav--font-size: var(--global--font-size-md);
     163    --primary-nav--font-size-sub-menu: var(--global--font-size-xs);
     164    --primary-nav--font-size-mobile: var(--global--font-size-sm);
     165    --primary-nav--font-size-sub-menu-mobile: var(--global--font-size-sm);
     166    --primary-nav--font-size-button: var(--global--font-size-xs);
     167    --primary-nav--font-style: normal;
     168    --primary-nav--font-style-sub-menu-mobile: normal;
     169    --primary-nav--font-weight: normal;
     170    --primary-nav--font-weight-button: 500;
     171    --primary-nav--color-link: var(--global--color-primary);
     172    --primary-nav--color-link-hover: var(--global--color-primary-hover);
     173    --primary-nav--color-text: var(--global--color-primary);
     174    --primary-nav--padding: calc(0.66 * var(--global--spacing-unit));
     175    --primary-nav--border-color: var(--global--color-primary);
     176
    25177    /* Pagination */
     178    --pagination--color-text: var(--global--color-primary);
     179    --pagination--color-link-hover: var(--global--color-primary-hover);
     180    --pagination--font-family: var(--global--font-secondary);
     181    --pagination--font-size: var(--global--font-size-lg);
     182    --pagination--font-weight: normal;
     183    --pagination--font-weight-strong: 600;
     184
    26185    /* Footer */
     186    --footer--color-text: var(--global--color-primary);
     187    --footer--color-link: var(--global--color-primary);
     188    --footer--color-link-hover: var(--global--color-primary-hover);
     189    --footer--font-family: var(--global--font-primary);
     190    --footer--font-size: var(--global--font-size-sm);
     191
    27192    /* Block: Pull quote */
     193    --pullquote--font-family: var(--global--font-primary);
     194    --pullquote--font-size: var(--heading--font-size-h3);
     195    --pullquote--font-style: normal;
     196    --pullquote--letter-spacing: var(--heading--letter-spacing-h4);
     197    --pullquote--line-height: var(--global--line-height-heading);
     198    --pullquote--border-width: 3px;
     199    --pullquote--border-color: var(--global--color-primary);
     200    --pullquote--color-foreground: var(--global--color-primary);
     201    --pullquote--color-background: var(--global--color-background);
     202    --quote--font-family: var(--global--font-secondary);
     203    --quote--font-size: var(--global--font-size-md);
     204    --quote--font-size-large: var(--global--font-size-xl);
     205    --quote--font-style: normal;
     206    --quote--font-weight: 700;
     207    --quote--font-weight-strong: bolder;
     208    --quote--font-style-large: normal;
     209    --quote--font-style-cite: normal;
     210    --quote--line-height: var(--global--line-height-body);
     211    --quote--line-height-large: 1.35;
     212    --separator--border-color: var(--global--color-border);
     213    --separator--height: 1px;
     214
    28215    /* Block: Table */
     216    --table--stripes-border-color: var(--global--color-light-gray);
     217    --table--stripes-background-color: var(--global--color-light-gray);
     218    --table--has-background-text-color: var(--global--color-dark-gray);
     219
    29220    /* Widgets */
     221    --widget--line-height-list: 1.9;
     222    --widget--line-height-title: 1.4;
     223    --widget--font-weight-title: 700;
     224    --widget--spacing-menu: calc(0.66 * var(--global--spacing-unit));
     225
    30226    /* Admin-bar height */
     227    --global--admin-bar--height: 0;
     228}
     229
     230.admin-bar {
     231    --global--admin-bar--height: 32px;
     232}
     233@media only screen and (max-width: 782px) {
     234
     235    .admin-bar {
     236        --global--admin-bar--height: 46px;
     237    }
     238}
     239
     240@media only screen and (min-width: 652px) {
     241
     242    :root {
     243        --global--font-size-xl: 2.5rem;
     244        --global--font-size-xxl: 6rem;
     245        --global--font-size-xxxl: 9rem;
     246        --heading--font-size-h3: 2rem;
     247        --heading--font-size-h2: 3rem;
     248    }
    31249}
    32250
    … …  
    34252 * Repsonsive Styles
    35253 */
     254
    36255/**
    37256 * Required Variables
    38257 */
     258
    39259/**
    40260 * Root Media Query Variables
    41261 */
     262:root {
     263    --responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal) * 0.6);
     264    --responsive--aligndefault-width: calc(100vw - var(--responsive--spacing-horizontal));
     265    --responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal));
     266    --responsive--alignfull-width: 100%;
     267    --responsive--alignright-margin: var(--global--spacing-horizontal);
     268    --responsive--alignleft-margin: var(--global--spacing-horizontal);
     269}
     270
     271@media only screen and (min-width: 482px) {
     272
     273    :root {
     274        --responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), 610px);
     275        --responsive--alignwide-width: calc(100vw - 4 * var(--global--spacing-horizontal));
     276        --responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
     277        --responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
     278    }
     279}
     280@media only screen and (min-width: 822px) {
     281
     282    :root {
     283        --responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 610px);
     284        --responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px);
     285    }
     286}
    42287
    43288/**
    … …  
    45290 */
    46291.default-max-width {
    47     max-width: calc(100vw - 30px);
     292    max-width: var(--responsive--aligndefault-width);
    48293    margin-left: auto;
    49294    margin-right: auto;
    50295}
    51 @media only screen and (min-width: 482px){
    52     .default-max-width{
    53     max-width: min(calc(100vw - 100px), 610px);
    54     }
    55 }
    56 @media only screen and (min-width: 822px){
    57     .default-max-width{
    58     max-width: min(calc(100vw - 200px), 610px);
    59     }
    60 }
    61296
    62297.wide-max-width {
    63     max-width: calc(100vw - 30px);
     298    max-width: var(--responsive--alignwide-width);
    64299    margin-left: auto;
    65300    margin-right: auto;
    66301}
    67302
    68 @media only screen and (min-width: 482px){
    69     .wide-max-width{
    70     max-width: calc(100vw - 100px);
    71     }
    72 }
    73 
    74 @media only screen and (min-width: 822px){
    75     .wide-max-width{
    76     max-width: min(calc(100vw - 200px), 1240px);
    77     }
    78 }
    79 
    80303@media only screen and (min-width: 482px) {
     304
    81305    .full-max-width {
    82         max-width: 100%;
     306        max-width: var(--responsive--alignfull-width);
    83307        width: auto;
    84308        margin-left: auto;
    … …  
    90314    padding: 0;
    91315    position: relative;
    92     margin: 30px 0 30px 25px;
     316    margin: var(--global--spacing-vertical) 0 var(--global--spacing-vertical) var(--global--spacing-horizontal);
    93317}
    94318
    95319blockquote > * {
    96     margin-top: 20px;
    97     margin-bottom: 20px;
     320    margin-top: var(--global--spacing-unit);
     321    margin-bottom: var(--global--spacing-unit);
    98322}
    99323
    … …  
    107331
    108332blockquote p {
    109     letter-spacing: normal;
    110     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    111     font-size: 1.25rem;
    112     font-style: normal;
    113     font-weight: 700;
    114     line-height: 1.7;
    115 }
    116 
    117 blockquote cite {
    118     font-weight: normal;
    119     color: #28303d;
    120     font-size: 1rem;
    121     letter-spacing: normal;
    122 }
    123 
     333    letter-spacing: var(--heading--letter-spacing-h4);
     334    font-family: var(--quote--font-family);
     335    font-size: var(--quote--font-size);
     336    font-style: var(--quote--font-style);
     337    font-weight: var(--quote--font-weight);
     338    line-height: var(--quote--line-height);
     339}
     340
     341blockquote cite,
    124342blockquote footer {
    125343    font-weight: normal;
    126     color: #28303d;
    127     font-size: 1rem;
    128     letter-spacing: normal;
    129 }
    130 
    131 blockquote.alignleft, blockquote.alignright {
     344    color: var(--global--color-primary);
     345    font-size: var(--global--font-size-xs);
     346    letter-spacing: var(--global--letter-spacing);
     347}
     348
     349blockquote.alignleft,
     350blockquote.alignright {
    132351    padding-left: inherit;
    133352}
    134353
    135 blockquote.alignleft p {
    136     font-size: 1.125rem;
     354blockquote.alignleft p,
     355blockquote.alignright p {
     356    font-size: var(--heading--font-size-h5);
    137357    max-width: inherit;
    138358    width: inherit;
    139359}
    140360
    141 blockquote.alignright p {
    142     font-size: 1.125rem;
    143     max-width: inherit;
    144     width: inherit;
    145 }
    146 
    147 blockquote.alignleft cite {
    148     font-size: 1rem;
    149     letter-spacing: normal;
    150 }
    151 
    152 blockquote.alignleft footer {
    153     font-size: 1rem;
    154     letter-spacing: normal;
    155 }
    156 
    157 blockquote.alignright cite {
    158     font-size: 1rem;
    159     letter-spacing: normal;
    160 }
    161 
     361blockquote.alignleft cite,
     362blockquote.alignleft footer,
     363blockquote.alignright cite,
    162364blockquote.alignright footer {
    163     font-size: 1rem;
    164     letter-spacing: normal;
     365    font-size: var(--global--font-size-xs);
     366    letter-spacing: var(--global--letter-spacing);
    165367}
    166368
    167369blockquote strong {
    168     font-weight: normal;
     370    font-weight: var(--quote--font-weight-strong);
    169371}
    170372
    171373blockquote:before {
    172     content: "\201C";
    173     font-size: 1.25rem;
    174     line-height: 1.7;
    175     position: absolute;
    176     left: -12px;
    177 }
    178 
    179 blockquote .wp-block-quote__citation {
    180     color: #28303d;
    181     font-size: 1rem;
    182     font-style: normal;
    183 }
    184 
    185 blockquote cite {
    186     color: #28303d;
    187     font-size: 1rem;
    188     font-style: normal;
    189 }
    190 
     374    content: "“";
     375    font-size: var(--quote--font-size);
     376    line-height: var(--quote--line-height);
     377}
     378
     379blockquote .wp-block-quote__citation,
     380blockquote cite,
    191381blockquote footer {
    192     color: #28303d;
    193     font-size: 1rem;
    194     font-style: normal;
    195 }
    196 
     382    color: var(--global--color-primary);
     383    font-size: var(--global--font-size-xs);
     384    font-style: var(--quote--font-style-cite);
     385}
    197386@media only screen and (max-width: 481px) {
     387
    198388    blockquote {
    199         padding-left: 13px;
    200     }
     389        padding-left: calc(0.5 * var(--global--spacing-horizontal));
     390    }
     391
    201392    blockquote:before {
    202393        left: 0;
    … …  
    224415
    225416/* Media captions */
    226 figcaption {
    227     color: currentColor;
    228     font-size: 1rem;
    229     line-height: 1.7;
    230     margin-top: 10px;
    231     margin-bottom: 20px;
    232     text-align: center;
    233 }
    234 .wp-caption {
    235     color: currentColor;
    236     font-size: 1rem;
    237     line-height: 1.7;
    238     margin-top: 10px;
    239     margin-bottom: 20px;
    240     text-align: center;
    241 }
     417figcaption,
     418.wp-caption,
    242419.wp-caption-text {
    243420    color: currentColor;
    244     font-size: 1rem;
    245     line-height: 1.7;
    246     margin-top: 10px;
    247     margin-bottom: 20px;
     421    font-size: var(--global--font-size-xs);
     422    line-height: var(--global--line-height-body);
     423    margin-top: calc(0.5 * var(--global--spacing-unit));
     424    margin-bottom: var(--global--spacing-unit);
    248425    text-align: center;
    249426}
    250427
    251428.alignleft figcaption,
    252 .alignright figcaption, .alignleft
    253 .wp-caption,
    254 .alignright
    255 .wp-caption, .alignleft
    256 .wp-caption-text,
    257 .alignright
    258 .wp-caption-text {
     429.alignright figcaption,
     430.alignleft .wp-caption,
     431.alignright .wp-caption,
     432.alignleft .wp-caption-text,
     433.alignright .wp-caption-text {
    259434    margin-bottom: 0;
    260435}
    … …  
    271446
    272447select {
    273     border: 3px solid #39414d;
    274     border-radius: 0;
    275     color: #28303d;
    276     font-size: 1.125rem;
     448    border: var(--form--border-width) solid var(--form--border-color);
     449    border-radius: var(--form--border-radius);
     450    color: var(--form--color-text);
     451    font-size: var(--form--font-size);
    277452    -moz-appearance: none;
    278453    -webkit-appearance: none;
    279454    appearance: none;
    280     padding: 10px 30px 10px 10px;
    281     /* stylelint-disable */
    282     background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat;
    283     /* stylelint-enable */
    284     background-position: right 10px top 60%;
     455    padding: var(--form--spacing-unit) calc(3 * var(--form--spacing-unit)) var(--form--spacing-unit) var(--form--spacing-unit);
     456    background: var(--global--color-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat;
     457    background-position: right var(--form--spacing-unit) top 60%;
    285458}
    286459
    … …  
    292465a {
    293466    cursor: pointer;
    294     color: #28303d;
     467    color: var(--wp--style--color--link, var(--global--color-primary));
    295468    text-underline-offset: 3px;
    296469    text-decoration-skip-ink: all;
    … …  
    303476
    304477.site a:focus {
     478
    305479    /* Only visible in Windows High Contrast mode */
    306480    outline: 2px solid transparent;
    … …  
    308482}
    309483
    310 .has-background-dark .site a:focus {
    311     color: #d1e4dd;
    312 }
    313 
    314 .has-background-dark .site a:focus .meta-nav {
    315     color: #d1e4dd;
     484.is-dark-theme .site a:focus,
     485.is-dark-theme .site a:focus .meta-nav {
     486    color: var(--wp--style--color--link, var(--global--color-background));
    316487}
    317488
    318489.has-background-white .site a:focus {
    319490    background: rgba(0, 0, 0, 0.9);
    320     color: #fff;
     491    color: var(--wp--style--color--link, var(--global--color-white));
    321492}
    322493
    323494.has-background-white .site a:focus .meta-nav {
    324     color: #fff;
     495    color: var(--wp--style--color--link, var(--global--color-white));
    325496}
    326497
    327498.site a:focus.skip-link {
     499
    328500    /* Only visible in Windows High Contrast mode */
    329501    outline: 2px solid transparent;
    … …  
    337509
    338510.site a:focus img {
    339     outline: 2px dotted #28303d;
    340 }
    341 
    342 .has-background:not(.has-background-background-color) .has-link-color a {
    343     color: #28303d;
    344 }
    345 
     511    outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary));
     512}
     513
     514.has-background:not(.has-background-background-color) .has-link-color a,
    346515.has-background:not(.has-background-background-color).has-link-color a {
    347     color: #28303d;
     516    color: var(--wp--style--color--link, var(--global--color-primary));
    348517}
    349518
    350519.wp-block-button__link {
    351     line-height: 1.5;
    352     color: #d1e4dd;
     520    line-height: var(--button--line-height);
     521    color: var(--button--color-text);
    353522    cursor: pointer;
    354     font-weight: 500;
    355     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    356     font-size: 1.25rem;
    357     background-color: #39414d;
    358     border-radius: 0;
    359     border: 3px solid #39414d;
     523    font-weight: var(--button--font-weight);
     524    font-family: var(--button--font-family);
     525    font-size: var(--button--font-size);
     526    background-color: var(--button--color-background);
     527    border-radius: var(--button--border-radius);
     528    border: var(--button--border-width) solid var(--button--color-background);
    360529    text-decoration: none;
    361     padding: 15px 30px;
    362 }
    363 
    364 .wp-block-button__link:before, .wp-block-button__link:after {
     530    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
     531}
     532
     533.wp-block-button__link:before,
     534.wp-block-button__link:after {
    365535    content: "";
    366536    display: block;
    … …  
    370540
    371541.wp-block-button__link:before {
    372     margin-bottom: -calc(1em - 0);
     542    margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
    373543}
    374544
    375545.wp-block-button__link:after {
    376     margin-top: -calc(1em - 0);
     546    margin-top: -calc(.5em * var(--button--line-height) + -.39);
    377547}
    378548
    … …  
    383553}
    384554
    385 .has-background-dark .wp-block-button__link:focus {
    386     color: #39414d;
     555.is-dark-theme .wp-block-button__link:focus {
     556    color: var(--button--color-background);
    387557}
    388558
    389559.wp-block-button__link:focus:not(.has-background) {
    390     color: #39414d;
     560    color: var(--button--color-text-hover);
    391561}
    392562
    393563.wp-block-button__link:disabled {
    394     background-color: rgba(255, 255, 255, 0.5);
    395     border-color: rgba(255, 255, 255, 0.5);
    396     color: #39414d;
     564    background-color: var(--global--color-white-50);
     565    border-color: var(--global--color-white-50);
     566    color: var(--button--color-text-active);
    397567}
    398568
    … …  
    400570 * Block Options
    401571 */
    402 .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):not(.has-text-color):active {
    403     color: #39414d;
    404     background-color: #d1e4dd;
    405 }
    406 
    407 .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):not(.has-text-color):hover {
    408     color: #39414d;
     572[data-block].wp-block-buttons {
     573    margin-top: 0;
     574    margin-bottom: 0;
     575}
     576
     577[data-block].wp-block-buttons .wp-block-button:first-child {
     578    margin-top: var(--global--spacing-vertical);
     579}
     580
     581[data-block].wp-block-buttons .wp-block-button:last-child {
     582    margin-bottom: var(--global--spacing-vertical);
     583}
     584
     585.wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
     586    color: var(--button--color-text-active) !important;
     587    background: transparent !important;
     588    border-color: var(--button--color-background);
     589}
     590
     591.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
     592    color: var(--button--color-text-hover) !important;
     593    background: transparent !important;
     594    border-color: var(--button--color-background);
     595}
     596
     597.wp-block-button.is-style-outline .wp-block-button__link {
     598    color: var(--button--color-background);
    409599    background: transparent;
    410 }
    411 
    412 .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-background:active, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-background:hover, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-text-color:active, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-text-color:hover {
    413     outline-offset: -7px;
    414     outline: 2px dotted currentColor;
    415 }
    416 
    417 .wp-block-button.is-style-outline .wp-block-button__link {
    418     color: #39414d;
    419     background: transparent;
    420     border: 3px solid currentColor;
    421     padding: 15px 30px;
    422 }
    423 
    424 .wp-block-button.is-style-outline .wp-block-button__link:active {
    425     background-color: #39414d;
    426     color: #d1e4dd;
    427     border: 3px solid #39414d;
    428 }
    429 
     600    border: var(--button--border-width) solid currentColor;
     601    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
     602}
     603
     604.wp-block-button.is-style-outline .wp-block-button__link:active,
    430605.wp-block-button.is-style-outline .wp-block-button__link:hover {
    431     background-color: #39414d;
    432     color: #d1e4dd;
    433     border: 3px solid #39414d;
     606    background-color: var(--button--color-background);
     607    color: var(--button--color-text);
     608    border-color: var(--button--color-background);
    434609}
    435610
    436611.wp-block-button.is-style-outline .wp-block-button__link.has-background {
    437     background: transparent !important;
    438 }
    439 
    440 .wp-block-button.is-style-outline .wp-block-button__link.has-background:active {
    441     color: #39414d;
    442     outline-offset: -7px;
    443     background: transparent;
    444     outline: 2px dotted currentColor;
    445     border: 3px solid currentColor;
    446 }
    447 
     612    border-color: var(--button--color-background);
     613}
     614
     615.wp-block-button.is-style-outline .wp-block-button__link.has-background:active,
    448616.wp-block-button.is-style-outline .wp-block-button__link.has-background:hover {
    449     color: #39414d;
    450     outline-offset: -7px;
    451     background: transparent;
    452     outline: 2px dotted currentColor;
    453     border: 3px solid currentColor;
    454 }
    455 
    456 .wp-block-button.is-style-outline .wp-block-button__link.has-text-color:active {
    457     color: #39414d;
    458     outline-offset: -7px;
    459     background: transparent;
    460     outline: 2px dotted currentColor;
    461     border: 3px solid currentColor;
    462 }
    463 
     617    background-color: var(--button--color-background) !important;
     618}
     619
     620.wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) {
     621    color: var(--global--color-dark-gray);
     622}
     623
     624.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color),
     625.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color),
     626.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-black-background-color:not(.has-text-color) {
     627    color: var(--global--color-white);
     628}
     629
     630.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-white-background-color,
     631.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-green-background-color,
     632.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-blue-background-color,
     633.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-purple-background-color,
     634.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-red-background-color,
     635.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-orange-background-color,
     636.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-yellow-background-color {
     637    color: var(--global--color-dark-gray);
     638}
     639
     640.wp-block-button.is-style-outline .wp-block-button__link.has-text-color {
     641    border-color: currentColor;
     642}
     643
     644.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:active,
    464645.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:hover {
    465     color: #39414d;
    466     outline-offset: -7px;
    467     background: transparent;
    468     outline: 2px dotted currentColor;
    469     border: 3px solid currentColor;
     646    color: var(--button--color-text) !important;
     647    border-color: var(--button--color-background);
    470648}
    471649
    … …  
    474652}
    475653
    476 .is-selected.is-style-outline .wp-block-button__link:hover {
    477     background-color: transparent;
    478     color: #39414d;
    479 }
    480 
    481 .is-style-outline .wp-block-button__link[style*="radius"],
    482 .wp-block-button__link[style*="radius"] {
     654.is-style-outline .wp-block-button__link[style*=radius],
     655.wp-block-button__link[style*=radius] {
    483656    outline-offset: 2px;
    484657}
    485658
    486659.wp-block-code code {
    487     font-size: 1rem;
     660    font-size: var(--global--font-size-xs);
    488661    white-space: pre !important;
    489662    overflow-x: auto;
    … …  
    491664
    492665.wp-block-code {
    493     border-color: #28303d;
     666    border-color: var(--global--color-border);
    494667    border-radius: 0;
    495668    border-style: solid;
    496669    border-width: 0.1rem;
    497     padding: 20px;
     670    padding: var(--global--spacing-unit);
    498671    color: currentColor;
    499672}
    500673
    501 .wp-block-cover {
    502     background-color: #000;
    503     min-height: 450px;
    504     margin-top: inherit;
    505     margin-bottom: inherit;
    506 }
    507 
     674.wp-block-cover,
    508675.wp-block-cover-image {
    509     background-color: #000;
    510     min-height: 450px;
     676    background-color: var(--cover--color-background);
     677    min-height: var(--cover--height);
    511678    margin-top: inherit;
    512679    margin-bottom: inherit;
    … …  
    516683.wp-block-cover-image:not(.alignwide):not(.alignfull) {
    517684    clear: both;
     685}
     686
     687[data-align=full] .wp-block-cover,
     688[data-align=full] .wp-block-cover-image {
     689    margin-top: 0;
     690    margin-bottom: 0;
    518691}
    519692
    … …  
    540713}
    541714
    542 .wp-block-cover .wp-block-cover__inner-container .has-link-color a {
    543     color: #28303d;
    544 }
    545 
    546 .wp-block-cover .wp-block-cover-image-text .has-link-color a {
    547     color: #28303d;
    548 }
    549 
    550 .wp-block-cover .wp-block-cover-text .has-link-color a {
    551     color: #28303d;
    552 }
    553 
    554 .wp-block-cover .block-editor-block-list__block .has-link-color a {
    555     color: #28303d;
    556 }
    557 
    558 .wp-block-cover-image .wp-block-cover__inner-container .has-link-color a {
    559     color: #28303d;
    560 }
    561 
    562 .wp-block-cover-image .wp-block-cover-image-text .has-link-color a {
    563     color: #28303d;
    564 }
    565 
    566 .wp-block-cover-image .wp-block-cover-text .has-link-color a {
    567     color: #28303d;
    568 }
    569 
     715.wp-block-cover .wp-block-cover__inner-container .has-link-color a,
     716.wp-block-cover .wp-block-cover-image-text .has-link-color a,
     717.wp-block-cover .wp-block-cover-text .has-link-color a,
     718.wp-block-cover .block-editor-block-list__block .has-link-color a,
     719.wp-block-cover-image .wp-block-cover__inner-container .has-link-color a,
     720.wp-block-cover-image .wp-block-cover-image-text .has-link-color a,
     721.wp-block-cover-image .wp-block-cover-text .has-link-color a,
    570722.wp-block-cover-image .block-editor-block-list__block .has-link-color a {
    571     color: #28303d;
    572 }
    573 
    574 .wp-block-cover:not([class*="background-color"]) .wp-block-cover__inner-container {
    575     color: #fff;
    576 }
    577 
    578 .wp-block-cover:not([class*="background-color"]) .wp-block-cover-image-text {
    579     color: #fff;
    580 }
    581 
    582 .wp-block-cover:not([class*="background-color"]) .wp-block-cover-text {
    583     color: #fff;
    584 }
    585 
    586 .wp-block-cover:not([class*="background-color"]) .block-editor-block-list__block {
    587     color: #fff;
    588 }
    589 
    590 .wp-block-cover-image:not([class*="background-color"]) .wp-block-cover__inner-container {
    591     color: #fff;
    592 }
    593 
    594 .wp-block-cover-image:not([class*="background-color"]) .wp-block-cover-image-text {
    595     color: #fff;
    596 }
    597 
    598 .wp-block-cover-image:not([class*="background-color"]) .wp-block-cover-text {
    599     color: #fff;
    600 }
    601 
    602 .wp-block-cover-image:not([class*="background-color"]) .block-editor-block-list__block {
    603     color: #fff;
    604 }
    605 
    606 .wp-block-cover h2 {
    607     font-size: 2.25rem;
    608     letter-spacing: normal;
    609     line-height: 1.3;
     723    color: var(--wp--style--color--link, var(--global--color-primary));
     724}
     725
     726.wp-block-cover:not([class*=background-color]) .wp-block-cover__inner-container,
     727.wp-block-cover:not([class*=background-color]) .wp-block-cover-image-text,
     728.wp-block-cover:not([class*=background-color]) .wp-block-cover-text,
     729.wp-block-cover:not([class*=background-color]) .block-editor-block-list__block,
     730.wp-block-cover-image:not([class*=background-color]) .wp-block-cover__inner-container,
     731.wp-block-cover-image:not([class*=background-color]) .wp-block-cover-image-text,
     732.wp-block-cover-image:not([class*=background-color]) .wp-block-cover-text,
     733.wp-block-cover-image:not([class*=background-color]) .block-editor-block-list__block {
     734    color: var(--cover--color-foreground);
     735}
     736
     737.wp-block-cover h2,
     738.wp-block-cover-image h2 {
     739    font-size: var(--heading--font-size-h2);
     740    letter-spacing: var(--heading--letter-spacing-h2);
     741    line-height: var(--heading--line-height-h2);
    610742    padding: 0;
    611743    max-width: inherit;
    … …  
    613745}
    614746
    615 @media only screen and (min-width: 652px){
    616     .wp-block-cover h2{
    617     font-size: 3rem;
    618     }
    619 }
    620 
    621 @media only screen and (min-width: 652px){
    622     .wp-block-cover h2{
    623     font-size: 3rem;
    624     }
    625 }
    626 
    627 .wp-block-cover-image h2 {
    628     font-size: 2.25rem;
    629     letter-spacing: normal;
    630     line-height: 1.3;
    631     padding: 0;
    632     max-width: inherit;
    633     text-align: inherit;
    634 }
    635 
    636 @media only screen and (min-width: 652px){
    637     .wp-block-cover-image h2{
    638     font-size: 3rem;
    639     }
    640 }
    641 
    642 @media only screen and (min-width: 652px){
    643     .wp-block-cover-image h2{
    644     font-size: 3rem;
    645     }
    646 }
    647 
    648747.wp-block-cover h2.has-text-align-left,
    649748.wp-block-cover-image h2.has-text-align-left {
    … …  
    661760}
    662761
    663 .wp-block-cover.is-style-twentytwentyone-border {
    664     border: 3px solid #28303d;
    665 }
    666 
     762.wp-block-cover.is-style-twentytwentyone-border,
    667763.wp-block-cover-image.is-style-twentytwentyone-border {
    668     border: 3px solid #28303d;
     764    border: calc(3 * var(--separator--height)) solid var(--global--color-border);
    669765}
    670766
    … …  
    677773    max-width: inherit;
    678774}
    679 
    680775@media only screen and (min-width: 652px) {
     776
    681777    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) {
    682         margin-left: -50px;
    683         margin-top: 63px;
     778        margin-left: calc(-2 * var(--global--spacing-horizontal));
     779        margin-top: calc(2.5 * var(--global--spacing-horizontal));
    684780        z-index: 2;
    685781    }
    686     .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > p:not(.has-background) {
    687         background-color: #d1e4dd;
    688         padding: 20px;
    689     }
    690     .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h1:not(.has-background) {
    691         background-color: #d1e4dd;
    692         padding: 20px;
    693     }
    694     .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h2:not(.has-background) {
    695         background-color: #d1e4dd;
    696         padding: 20px;
    697     }
    698     .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h3:not(.has-background) {
    699         background-color: #d1e4dd;
    700         padding: 20px;
    701     }
    702     .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h4:not(.has-background) {
    703         background-color: #d1e4dd;
    704         padding: 20px;
    705     }
    706     .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h5:not(.has-background) {
    707         background-color: #d1e4dd;
    708         padding: 20px;
    709     }
    710     .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h6:not(.has-background) {
    711         background-color: #d1e4dd;
    712         padding: 20px;
    713     }
    714     .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background) {
    715         background-color: #d1e4dd;
    716         padding: 20px;
    717     }
     782
     783    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > p:not(.has-background),
     784    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h1:not(.has-background),
     785    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h2:not(.has-background),
     786    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h3:not(.has-background),
     787    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h4:not(.has-background),
     788    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h5:not(.has-background),
     789    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h6:not(.has-background),
     790    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background),
     791    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background),
     792    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > pre:not(.has-background) {
     793        background-color: var(--global--color-background);
     794        padding: var(--global--spacing-unit);
     795    }
     796
     797    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background),
    718798    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background) {
    719         background-color: #d1e4dd;
    720         padding: 20px;
    721     }
    722     .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > pre:not(.has-background) {
    723         background-color: #d1e4dd;
    724         padding: 20px;
    725     }
    726     .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background) {
    727         padding-left: 50px;
    728     }
    729     .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background) {
    730         padding-left: 50px;
    731     }
     799        padding-left: calc(2 * var(--global--spacing-horizontal));
     800    }
     801
    732802    .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n).is-vertically-aligned-center {
    733803        margin-top: 0;
    … …  
    735805}
    736806
    737 .wp-block[data-align="full"] .wp-block-columns p:not(.has-background) {
    738     padding-left: 20px;
    739     padding-right: 20px;
    740 }
    741 
    742 .wp-block[data-align="full"] .wp-block-columns h1:not(.has-background) {
    743     padding-left: 20px;
    744     padding-right: 20px;
    745 }
    746 
    747 .wp-block[data-align="full"] .wp-block-columns h2:not(.has-background) {
    748     padding-left: 20px;
    749     padding-right: 20px;
    750 }
    751 
    752 .wp-block[data-align="full"] .wp-block-columns h3:not(.has-background) {
    753     padding-left: 20px;
    754     padding-right: 20px;
    755 }
    756 
    757 .wp-block[data-align="full"] .wp-block-columns h4:not(.has-background) {
    758     padding-left: 20px;
    759     padding-right: 20px;
    760 }
    761 
    762 .wp-block[data-align="full"] .wp-block-columns h5:not(.has-background) {
    763     padding-left: 20px;
    764     padding-right: 20px;
    765 }
    766 
    767 .wp-block[data-align="full"] .wp-block-columns h6:not(.has-background) {
    768     padding-left: 20px;
    769     padding-right: 20px;
     807.wp-block[data-align=full] .wp-block-columns p:not(.has-background),
     808.wp-block[data-align=full] .wp-block-columns h1:not(.has-background),
     809.wp-block[data-align=full] .wp-block-columns h2:not(.has-background),
     810.wp-block[data-align=full] .wp-block-columns h3:not(.has-background),
     811.wp-block[data-align=full] .wp-block-columns h4:not(.has-background),
     812.wp-block[data-align=full] .wp-block-columns h5:not(.has-background),
     813.wp-block[data-align=full] .wp-block-columns h6:not(.has-background) {
     814    padding-left: var(--global--spacing-unit);
     815    padding-right: var(--global--spacing-unit);
    770816}
    771817
    … …  
    782828
    783829.wp-block-file .wp-block-file__button {
    784     line-height: 1.5;
    785     color: #d1e4dd;
     830    line-height: var(--button--line-height);
     831    color: var(--button--color-text);
    786832    cursor: pointer;
    787     font-weight: 500;
    788     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    789     font-size: 1.25rem;
    790     background-color: #39414d;
    791     border-radius: 0;
    792     border: 3px solid #39414d;
     833    font-weight: var(--button--font-weight);
     834    font-family: var(--button--font-family);
     835    font-size: var(--button--font-size);
     836    background-color: var(--button--color-background);
     837    border-radius: var(--button--border-radius);
     838    border: var(--button--border-width) solid var(--button--color-background);
    793839    text-decoration: none;
    794     padding: 15px 30px;
     840    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    795841    display: inline-block;
    796842}
    797843
    798 .wp-block-file .wp-block-file__button:before, .wp-block-file .wp-block-file__button:after {
     844.wp-block-file .wp-block-file__button:before,
     845.wp-block-file .wp-block-file__button:after {
    799846    content: "";
    800847    display: block;
    … …  
    804851
    805852.wp-block-file .wp-block-file__button:before {
    806     margin-bottom: -calc(1em - 0);
     853    margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
    807854}
    808855
    809856.wp-block-file .wp-block-file__button:after {
    810     margin-top: -calc(1em - 0);
     857    margin-top: -calc(.5em * var(--button--line-height) + -.39);
    811858}
    812859
    … …  
    817864}
    818865
    819 .has-background-dark .wp-block-file .wp-block-file__button:focus {
    820     color: #39414d;
     866.is-dark-theme .wp-block-file .wp-block-file__button:focus {
     867    color: var(--button--color-background);
    821868}
    822869
    823870.wp-block-file .wp-block-file__button:focus:not(.has-background) {
    824     color: #39414d;
     871    color: var(--button--color-text-hover);
    825872}
    826873
    827874.wp-block-file .wp-block-file__button:disabled {
    828     background-color: rgba(255, 255, 255, 0.5);
    829     border-color: rgba(255, 255, 255, 0.5);
    830     color: #39414d;
     875    background-color: var(--global--color-white-50);
     876    border-color: var(--global--color-white-50);
     877    color: var(--button--color-text-active);
    831878}
    832879
    833880.wp-block-file .wp-block-file__button:hover {
    834     color: #39414d;
     881    color: var(--button--color-text-hover);
    835882    background: transparent;
    836883}
    … …  
    841888
    842889.wp-block-gallery figcaption a {
    843     color: #fff;
     890    color: var(--global--color-white);
    844891}
    845892
    … …  
    850897}
    851898
    852 .wp-block-group:before, .wp-block-group:after {
     899.wp-block-group:before,
     900.wp-block-group:after {
    853901    content: "";
    854902    display: block;
    … …  
    857905
    858906.wp-block-group.has-background {
    859     padding: 30px;
     907    padding: var(--global--spacing-vertical);
     908}
     909
     910[data-align=full] .wp-block-group.has-background {
     911    margin-top: 0;
     912    margin-bottom: 0;
    860913}
    861914
    862915.wp-block-group.is-style-twentytwentyone-border {
    863     border: 3px solid #28303d;
    864     padding: 30px;
    865 }
    866 
    867 .wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > [data-align="full"] {
    868     max-width: calc(100% + 60px);
    869     width: calc(100% + 60px);
    870     margin-left: -30px;
     916    border: calc(3 * var(--separator--height)) solid var(--global--color-border);
     917    padding: var(--global--spacing-vertical);
     918}
     919
     920.wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > [data-align=full] {
     921    max-width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical)));
     922    width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical)));
     923    margin-left: calc(-1 * var(--global--spacing-vertical));
    871924}
    872925
    … …  
    875928}
    876929
    877 .wp-block-group .wp-block-group.has-background > .block-editor-block-list__layout > [data-align="full"] {
     930.wp-block-group .wp-block-group.has-background > .block-editor-block-list__layout > [data-align=full] {
    878931    margin: 0;
    879932    width: 100%;
    880933}
    881934
    882 .wp-block-heading h1 {
    883     clear: both;
    884     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    885     font-weight: normal;
    886 }
    887 
    888 h1 {
    889     clear: both;
    890     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    891     font-weight: normal;
    892 }
    893 
    894 .h1 {
    895     clear: both;
    896     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    897     font-weight: normal;
    898 }
    899 
    900 .wp-block-heading h2 {
    901     clear: both;
    902     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    903     font-weight: normal;
    904 }
    905 
    906 h2 {
    907     clear: both;
    908     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    909     font-weight: normal;
    910 }
    911 
    912 .h2 {
    913     clear: both;
    914     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    915     font-weight: normal;
    916 }
    917 
    918 .wp-block-heading h3 {
    919     clear: both;
    920     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    921     font-weight: normal;
    922 }
    923 
    924 h3 {
    925     clear: both;
    926     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    927     font-weight: normal;
    928 }
    929 
    930 .h3 {
    931     clear: both;
    932     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    933     font-weight: normal;
    934 }
    935 
    936 .wp-block-heading h4 {
    937     clear: both;
    938     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    939     font-weight: normal;
    940 }
    941 
    942 h4 {
    943     clear: both;
    944     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    945     font-weight: normal;
    946 }
    947 
    948 .h4 {
    949     clear: both;
    950     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    951     font-weight: normal;
    952 }
    953 
    954 .wp-block-heading h5 {
    955     clear: both;
    956     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    957     font-weight: normal;
    958 }
    959 
    960 h5 {
    961     clear: both;
    962     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    963     font-weight: normal;
    964 }
    965 
    966 .h5 {
    967     clear: both;
    968     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    969     font-weight: normal;
    970 }
    971 
    972 .wp-block-heading h6 {
    973     clear: both;
    974     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    975     font-weight: normal;
    976 }
    977 
    978 h6 {
    979     clear: both;
    980     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    981     font-weight: normal;
    982 }
    983 
     935.wp-block-heading h1,
     936h1,
     937.h1,
     938.wp-block-heading h2,
     939h2,
     940.h2,
     941.wp-block-heading h3,
     942h3,
     943.h3,
     944.wp-block-heading h4,
     945h4,
     946.h4,
     947.wp-block-heading h5,
     948h5,
     949.h5,
     950.wp-block-heading h6,
     951h6,
    984952.h6 {
    985953    clear: both;
    986     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    987     font-weight: normal;
    988 }
    989 
    990 .wp-block-heading h1 strong {
    991     font-weight: 600;
    992 }
    993 
    994 h1 strong {
    995     font-weight: 600;
    996 }
    997 
    998 .h1 strong {
    999     font-weight: 600;
    1000 }
    1001 
    1002 .wp-block-heading h2 strong {
    1003     font-weight: 600;
    1004 }
    1005 
    1006 h2 strong {
    1007     font-weight: 600;
    1008 }
    1009 
    1010 .h2 strong {
    1011     font-weight: 600;
    1012 }
    1013 
    1014 .wp-block-heading h3 strong {
    1015     font-weight: 600;
    1016 }
    1017 
    1018 h3 strong {
    1019     font-weight: 600;
    1020 }
    1021 
    1022 .h3 strong {
    1023     font-weight: 600;
    1024 }
    1025 
    1026 .wp-block-heading h4 strong {
    1027     font-weight: 600;
    1028 }
    1029 
    1030 h4 strong {
    1031     font-weight: 600;
    1032 }
    1033 
    1034 .h4 strong {
    1035     font-weight: 600;
    1036 }
    1037 
    1038 .wp-block-heading h5 strong {
    1039     font-weight: 600;
    1040 }
    1041 
    1042 h5 strong {
    1043     font-weight: 600;
    1044 }
    1045 
    1046 .h5 strong {
    1047     font-weight: 600;
    1048 }
    1049 
    1050 .wp-block-heading h6 strong {
    1051     font-weight: 600;
    1052 }
    1053 
    1054 h6 strong {
    1055     font-weight: 600;
    1056 }
    1057 
     954    font-family: var(--heading--font-family);
     955    font-weight: var(--heading--font-weight);
     956}
     957
     958.wp-block-heading h1 strong,
     959h1 strong,
     960.h1 strong,
     961.wp-block-heading h2 strong,
     962h2 strong,
     963.h2 strong,
     964.wp-block-heading h3 strong,
     965h3 strong,
     966.h3 strong,
     967.wp-block-heading h4 strong,
     968h4 strong,
     969.h4 strong,
     970.wp-block-heading h5 strong,
     971h5 strong,
     972.h5 strong,
     973.wp-block-heading h6 strong,
     974h6 strong,
    1058975.h6 strong {
    1059     font-weight: 600;
    1060 }
    1061 
    1062 .wp-block-heading h1[style*="--wp--typography--line-height"] {
    1063     line-height: --global--line-height-body;
    1064 }
    1065 
    1066 h1[style*="--wp--typography--line-height"] {
    1067     line-height: --global--line-height-body;
    1068 }
    1069 
    1070 .h1[style*="--wp--typography--line-height"] {
    1071     line-height: --global--line-height-body;
    1072 }
    1073 
    1074 .wp-block-heading h2[style*="--wp--typography--line-height"] {
    1075     line-height: --global--line-height-body;
    1076 }
    1077 
    1078 h2[style*="--wp--typography--line-height"] {
    1079     line-height: --global--line-height-body;
    1080 }
    1081 
    1082 .h2[style*="--wp--typography--line-height"] {
    1083     line-height: --global--line-height-body;
    1084 }
    1085 
    1086 .wp-block-heading h3[style*="--wp--typography--line-height"] {
    1087     line-height: --global--line-height-body;
    1088 }
    1089 
    1090 h3[style*="--wp--typography--line-height"] {
    1091     line-height: --global--line-height-body;
    1092 }
    1093 
    1094 .h3[style*="--wp--typography--line-height"] {
    1095     line-height: --global--line-height-body;
    1096 }
    1097 
    1098 .wp-block-heading h4[style*="--wp--typography--line-height"] {
    1099     line-height: --global--line-height-body;
    1100 }
    1101 
    1102 h4[style*="--wp--typography--line-height"] {
    1103     line-height: --global--line-height-body;
    1104 }
    1105 
    1106 .h4[style*="--wp--typography--line-height"] {
    1107     line-height: --global--line-height-body;
    1108 }
    1109 
    1110 .wp-block-heading h5[style*="--wp--typography--line-height"] {
    1111     line-height: --global--line-height-body;
    1112 }
    1113 
    1114 h5[style*="--wp--typography--line-height"] {
    1115     line-height: --global--line-height-body;
    1116 }
    1117 
    1118 .h5[style*="--wp--typography--line-height"] {
    1119     line-height: --global--line-height-body;
    1120 }
    1121 
    1122 .wp-block-heading h6[style*="--wp--typography--line-height"] {
    1123     line-height: --global--line-height-body;
    1124 }
    1125 
    1126 h6[style*="--wp--typography--line-height"] {
    1127     line-height: --global--line-height-body;
    1128 }
    1129 
     976    font-weight: var(--heading--font-weight-strong);
     977}
     978
     979.wp-block-heading h1[style*="--wp--typography--line-height"],
     980h1[style*="--wp--typography--line-height"],
     981.h1[style*="--wp--typography--line-height"],
     982.wp-block-heading h2[style*="--wp--typography--line-height"],
     983h2[style*="--wp--typography--line-height"],
     984.h2[style*="--wp--typography--line-height"],
     985.wp-block-heading h3[style*="--wp--typography--line-height"],
     986h3[style*="--wp--typography--line-height"],
     987.h3[style*="--wp--typography--line-height"],
     988.wp-block-heading h4[style*="--wp--typography--line-height"],
     989h4[style*="--wp--typography--line-height"],
     990.h4[style*="--wp--typography--line-height"],
     991.wp-block-heading h5[style*="--wp--typography--line-height"],
     992h5[style*="--wp--typography--line-height"],
     993.h5[style*="--wp--typography--line-height"],
     994.wp-block-heading h6[style*="--wp--typography--line-height"],
     995h6[style*="--wp--typography--line-height"],
    1130996.h6[style*="--wp--typography--line-height"] {
    1131     line-height: --global--line-height-body;
    1132 }
    1133 
    1134 .wp-block-heading h1 {
    1135     font-size: 4rem;
    1136     letter-spacing: normal;
    1137     line-height: 1.1;
    1138 }
    1139 
    1140 @media only screen and (min-width: 652px){
    1141     .wp-block-heading h1{
    1142     font-size: 6rem;
    1143     }
    1144 }
    1145 
    1146 h1 {
    1147     font-size: 4rem;
    1148     letter-spacing: normal;
    1149     line-height: 1.1;
    1150 }
    1151 
    1152 @media only screen and (min-width: 652px){
    1153     h1{
    1154     font-size: 6rem;
    1155     }
    1156 }
    1157 
     997    line-height: var(--wp--typography--line-height, --global--line-height-body);
     998}
     999
     1000.wp-block-heading h1,
     1001h1,
    11581002.h1 {
    1159     font-size: 4rem;
    1160     letter-spacing: normal;
    1161     line-height: 1.1;
    1162 }
    1163 
    1164 @media only screen and (min-width: 652px){
    1165     .h1{
    1166     font-size: 6rem;
    1167     }
    1168 }
    1169 
    1170 .wp-block-heading h2 {
    1171     font-size: 2.25rem;
    1172     letter-spacing: normal;
    1173     line-height: 1.3;
    1174 }
    1175 
    1176 @media only screen and (min-width: 652px){
    1177     .wp-block-heading h2{
    1178     font-size: 3rem;
    1179     }
    1180 }
    1181 
    1182 @media only screen and (min-width: 652px){
    1183     .wp-block-heading h2{
    1184     font-size: 3rem;
    1185     }
    1186 }
    1187 
    1188 h2 {
    1189     font-size: 2.25rem;
    1190     letter-spacing: normal;
    1191     line-height: 1.3;
    1192 }
    1193 
    1194 @media only screen and (min-width: 652px){
    1195     h2{
    1196     font-size: 3rem;
    1197     }
    1198 }
    1199 
    1200 @media only screen and (min-width: 652px){
    1201     h2{
    1202     font-size: 3rem;
    1203     }
    1204 }
    1205 
     1003    font-size: var(--heading--font-size-h1);
     1004    letter-spacing: var(--heading--letter-spacing-h1);
     1005    line-height: var(--heading--line-height-h1);
     1006}
     1007
     1008.wp-block-heading h2,
     1009h2,
    12061010.h2 {
    1207     font-size: 2.25rem;
    1208     letter-spacing: normal;
    1209     line-height: 1.3;
    1210 }
    1211 
    1212 @media only screen and (min-width: 652px){
    1213     .h2{
    1214     font-size: 3rem;
    1215     }
    1216 }
    1217 
    1218 @media only screen and (min-width: 652px){
    1219     .h2{
    1220     font-size: 3rem;
    1221     }
    1222 }
    1223 
    1224 .wp-block-heading h3 {
    1225     font-size: 2rem;
    1226     letter-spacing: normal;
    1227     line-height: 1.3;
    1228 }
    1229 
    1230 @media only screen and (min-width: 652px){
    1231     .wp-block-heading h3{
    1232     font-size: 2rem;
    1233     }
    1234 }
    1235 
    1236 h3 {
    1237     font-size: 2rem;
    1238     letter-spacing: normal;
    1239     line-height: 1.3;
    1240 }
    1241 
    1242 @media only screen and (min-width: 652px){
    1243     h3{
    1244     font-size: 2rem;
    1245     }
    1246 }
    1247 
     1011    font-size: var(--heading--font-size-h2);
     1012    letter-spacing: var(--heading--letter-spacing-h2);
     1013    line-height: var(--heading--line-height-h2);
     1014}
     1015
     1016.wp-block-heading h3,
     1017h3,
    12481018.h3 {
    1249     font-size: 2rem;
    1250     letter-spacing: normal;
    1251     line-height: 1.3;
    1252 }
    1253 
    1254 @media only screen and (min-width: 652px){
    1255     .h3{
    1256     font-size: 2rem;
    1257     }
    1258 }
    1259 
    1260 .wp-block-heading h4 {
    1261     font-size: 1.5rem;
    1262     font-weight: 600;
    1263     letter-spacing: normal;
    1264     line-height: 1.3;
    1265 }
    1266 
    1267 h4 {
    1268     font-size: 1.5rem;
    1269     font-weight: 600;
    1270     letter-spacing: normal;
    1271     line-height: 1.3;
    1272 }
    1273 
     1019    font-size: var(--heading--font-size-h3);
     1020    letter-spacing: var(--heading--letter-spacing-h3);
     1021    line-height: var(--heading--line-height-h3);
     1022}
     1023
     1024.wp-block-heading h4,
     1025h4,
    12741026.h4 {
    1275     font-size: 1.5rem;
    1276     font-weight: 600;
    1277     letter-spacing: normal;
    1278     line-height: 1.3;
    1279 }
    1280 
    1281 .wp-block-heading h5 {
    1282     font-size: 1.125rem;
    1283     font-weight: 600;
    1284     letter-spacing: 0.05em;
    1285     line-height: 1.3;
    1286 }
    1287 
    1288 h5 {
    1289     font-size: 1.125rem;
    1290     font-weight: 600;
    1291     letter-spacing: 0.05em;
    1292     line-height: 1.3;
    1293 }
    1294 
     1027    font-size: var(--heading--font-size-h4);
     1028    font-weight: var(--heading--font-weight-strong);
     1029    letter-spacing: var(--heading--letter-spacing-h4);
     1030    line-height: var(--heading--line-height-h4);
     1031}
     1032
     1033.wp-block-heading h5,
     1034h5,
    12951035.h5 {
    1296     font-size: 1.125rem;
    1297     font-weight: 600;
    1298     letter-spacing: 0.05em;
    1299     line-height: 1.3;
    1300 }
    1301 
    1302 .wp-block-heading h6 {
    1303     font-size: 1rem;
    1304     font-weight: 600;
    1305     letter-spacing: 0.05em;
    1306     line-height: 1.3;
    1307 }
    1308 
    1309 h6 {
    1310     font-size: 1rem;
    1311     font-weight: 600;
    1312     letter-spacing: 0.05em;
    1313     line-height: 1.3;
    1314 }
    1315 
     1036    font-size: var(--heading--font-size-h5);
     1037    font-weight: var(--heading--font-weight-strong);
     1038    letter-spacing: var(--heading--letter-spacing-h5);
     1039    line-height: var(--heading--line-height-h5);
     1040}
     1041
     1042.wp-block-heading h6,
     1043h6,
    13161044.h6 {
    1317     font-size: 1rem;
    1318     font-weight: 600;
    1319     letter-spacing: 0.05em;
    1320     line-height: 1.3;
     1045    font-size: var(--heading--font-size-h6);
     1046    font-weight: var(--heading--font-weight-strong);
     1047    letter-spacing: var(--heading--letter-spacing-h6);
     1048    line-height: var(--heading--line-height-h6);
    13211049}
    13221050
    13231051[data-type="core/html"] textarea {
    1324     color: #28303d;
     1052    color: var(--global--color-dark-gray);
    13251053    border-radius: 0;
    1326     padding: 20px;
     1054    padding: var(--global--spacing-unit);
    13271055}
    13281056
    … …  
    13371065
    13381066/* Block Styles */
    1339 .wp-block-image.is-style-twentytwentyone-border img {
    1340     border: 3px solid #28303d;
    1341 }
     1067.wp-block-image.is-style-twentytwentyone-border img,
    13421068.wp-block-image.is-style-twentytwentyone-image-frame img {
    1343     border: 3px solid #28303d;
     1069    border: calc(3 * var(--separator--height)) solid var(--global--color-border);
    13441070}
    13451071
    13461072.wp-block-image.is-style-twentytwentyone-image-frame img {
    1347     padding: 20px;
     1073    padding: var(--global--spacing-unit);
    13481074}
    13491075
    … …  
    13571083
    13581084.wp-block-latest-posts:not(.is-grid) > li {
    1359     margin-top: 50px;
    1360     margin-bottom: 50px;
     1085    margin-top: calc(1.666 * var(--global--spacing-vertical));
     1086    margin-bottom: calc(1.666 * var(--global--spacing-vertical));
    13611087}
    13621088
    … …  
    13751101
    13761102.wp-block-latest-posts.is-grid > li {
    1377     margin-bottom: 30px;
     1103    margin-bottom: var(--global--spacing-vertical);
    13781104}
    13791105
    … …  
    13831109
    13841110.wp-block-latest-posts > li > * {
    1385     margin-top: 10px;
    1386     margin-bottom: 10px;
     1111    margin-top: calc(0.333 * var(--global--spacing-vertical));
     1112    margin-bottom: calc(0.333 * var(--global--spacing-vertical));
    13871113}
    13881114
    … …  
    13971123.wp-block-latest-posts > li > a {
    13981124    display: inline-block;
    1399     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1400     font-size: 2rem;
    1401     font-weight: normal;
    1402     line-height: 1.3;
    1403     margin-bottom: 10px;
    1404 }
    1405 
    1406 @media only screen and (min-width: 652px){
    1407     .wp-block-latest-posts > li > a{
    1408     font-size: 2rem;
    1409     }
     1125    font-family: var(--latest-posts--title-font-family);
     1126    font-size: var(--latest-posts--title-font-size);
     1127    font-weight: var(--heading--font-weight);
     1128    line-height: var(--global--line-height-heading);
     1129    margin-bottom: calc(0.333 * var(--global--spacing-vertical));
    14101130}
    14111131
    14121132.wp-block-latest-posts .wp-block-latest-posts__post-author {
    1413     color: #28303d;
    1414     font-size: 1.25rem;
    1415     line-height: 1.7;
     1133    color: var(--global--color-primary);
     1134    font-size: var(--global--font-size-md);
     1135    line-height: var(--global--line-height-body);
    14161136}
    14171137
    14181138.wp-block-latest-posts .wp-block-latest-posts__post-date {
    1419     color: #28303d;
    1420     font-size: 1rem;
    1421     line-height: 1.7;
    1422 }
    1423 
    1424 [class*="inner-container"] .wp-block-latest-posts .wp-block-latest-posts__post-date,
     1139    color: var(--global--color-primary);
     1140    font-size: var(--global--font-size-xs);
     1141    line-height: var(--global--line-height-body);
     1142}
     1143
     1144[class*=inner-container] .wp-block-latest-posts .wp-block-latest-posts__post-date,
    14251145.has-background .wp-block-latest-posts .wp-block-latest-posts__post-date {
    14261146    color: currentColor;
    14271147}
    14281148
    1429 .wp-block-latest-posts .wp-block-latest-posts__post-excerpt {
    1430     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1431     font-size: 1.125rem;
    1432     line-height: 1.7;
    1433     margin-top: 20px;
    1434 }
    1435 
     1149.wp-block-latest-posts .wp-block-latest-posts__post-excerpt,
    14361150.wp-block-latest-posts .wp-block-latest-posts__post-full-content {
    1437     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1438     font-size: 1.125rem;
    1439     line-height: 1.7;
    1440     margin-top: 20px;
     1151    font-family: var(--latest-posts--description-font-family);
     1152    font-size: var(--latest-posts--description-font-size);
     1153    line-height: var(--global--line-height-body);
     1154    margin-top: calc(0.666 * var(--global--spacing-vertical));
    14411155}
    14421156
    14431157.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers {
    1444     border-top: 3px solid #28303d;
    1445     border-bottom: 3px solid #28303d;
    1446 }
    1447 
    1448 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li {
    1449     padding-bottom: 30px;
    1450     border-bottom: 1px solid #28303d;
    1451     margin-top: 30px;
    1452     margin-bottom: 30px;
    1453 }
    1454 
     1158    border-top: calc(3 * var(--separator--height)) solid var(--global--color-border);
     1159    border-bottom: calc(3 * var(--separator--height)) solid var(--global--color-border);
     1160}
     1161
     1162.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li,
    14551163.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li {
    1456     padding-bottom: 30px;
    1457     border-bottom: 1px solid #28303d;
    1458     margin-top: 30px;
    1459     margin-bottom: 30px;
     1164    padding-bottom: var(--global--spacing-vertical);
     1165    border-bottom: var(--separator--height) solid var(--global--color-border);
     1166    margin-top: var(--global--spacing-vertical);
     1167    margin-bottom: var(--global--spacing-vertical);
    14601168}
    14611169
    … …  
    14671175
    14681176.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid {
    1469     box-shadow: inset 0 -1px 0 0 #28303d;
    1470     border-bottom: 2px solid #28303d;
     1177    box-shadow: inset 0 -1px 0 0 var(--global--color-border);
     1178    border-bottom: calc(2 * var(--separator--height)) solid var(--global--color-border);
    14711179}
    14721180
    14731181.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li {
    14741182    margin: 0;
    1475     padding-top: 30px;
    1476     padding-right: 25px;
     1183    padding-top: var(--global--spacing-vertical);
     1184    padding-right: var(--global--spacing-horizontal);
    14771185}
    14781186
    14791187.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li:last-child {
    1480     padding-bottom: 30px;
    1481 }
    1482 
     1188    padding-bottom: var(--global--spacing-vertical);
     1189}
    14831190@media screen and (min-width: 600px) {
     1191
    14841192    .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-2 li {
    1485         width: 50%;
    1486     }
     1193        width: calc((100% / 2));
     1194    }
     1195
    14871196    .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-3 li {
    1488         width: 33%;
    1489     }
     1197        width: calc((100% / 3));
     1198    }
     1199
    14901200    .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-4 li {
    1491         width: 25%;
    1492     }
     1201        width: calc((100% / 4));
     1202    }
     1203
    14931204    .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-5 li {
    1494         width: 20%;
    1495     }
     1205        width: calc((100% / 5));
     1206    }
     1207
    14961208    .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-6 li {
    1497         width: 17%;
     1209        width: calc((100% / 6));
    14981210    }
    14991211}
    15001212
    15011213.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li {
    1502     border: 3px solid #28303d;
    1503     padding: 30px 25px;
     1214    border: calc(3 * var(--separator--height)) solid var(--global--color-border);
     1215    padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
    15041216}
    15051217
    15061218.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li:last-child {
    1507     padding-bottom: 30px;
    1508     margin-bottom: 30px;
     1219    padding-bottom: var(--global--spacing-vertical);
     1220    margin-bottom: var(--global--spacing-vertical);
    15091221}
    15101222
    15111223.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders:not(.is-grid) li {
    1512     margin-top: 25px;
    1513     margin-bottom: 25px;
     1224    margin-top: var(--global--spacing-horizontal);
     1225    margin-bottom: var(--global--spacing-horizontal);
    15141226}
    15151227
    … …  
    15571269}
    15581270
    1559 ul {
    1560     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1561     margin: 30px 0;
    1562     padding-left: 50px;
    1563 }
    1564 
     1271ul,
    15651272ol {
    1566     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1567     margin: 30px 0;
    1568     padding-left: 50px;
     1273    font-family: var(--list--font-family);
     1274    margin: var(--global--spacing-vertical) 0;
     1275    padding-left: calc(2 * var(--global--spacing-horizontal));
    15691276}
    15701277
    … …  
    15891296
    15901297dt {
    1591     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     1298    font-family: var(--definition-term--font-family);
    15921299    font-weight: bold;
    15931300}
    15941301
     1302[data-align=full] .wp-block-media-text {
     1303    margin-top: 0;
     1304    margin-bottom: 0;
     1305}
     1306
    15951307.wp-block-media-text .wp-block-media-text__content {
    1596     padding: 25px;
     1308    padding: var(--global--spacing-horizontal);
    15971309}
    15981310
    … …  
    16061318
    16071319.wp-block-media-text.is-style-twentytwentyone-border {
    1608     border: 3px solid #28303d;
     1320    border: calc(3 * var(--separator--height)) solid var(--global--color-border);
    16091321}
    16101322
    16111323.wp-block-navigation .wp-block-navigation__container {
    1612     background: #d1e4dd;
     1324    background: var(--global--color-background);
    16131325    padding: 0;
    16141326}
    16151327
    16161328.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content {
    1617     padding: 13px;
     1329    padding: var(--primary-nav--padding);
    16181330}
    16191331
    16201332.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__label {
    1621     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1622     font-size: 1.25rem;
    1623     font-weight: normal;
     1333    font-family: var(--primary-nav--font-family);
     1334    font-size: var(--primary-nav--font-size);
     1335    font-weight: var(--primary-nav--font-weight);
    16241336}
    16251337
    16261338.wp-block-navigation .has-child .wp-block-navigation__container {
    1627     box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
    1628 }
    1629 
    1630 .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover {
    1631     color: #28303d;
    1632 }
    1633 
     1339    box-shadow: var(--global--elevation);
     1340}
     1341
     1342.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover,
    16341343.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:focus {
    1635     color: #28303d;
     1344    color: var(--primary-nav--color-link-hover);
    16361345}
    16371346
    … …  
    16411350
    16421351p {
    1643     line-height: --global--line-height-body;
     1352    line-height: var(--wp--typography--line-height, --global--line-height-body);
    16441353}
    16451354
    16461355p.has-background {
    1647     padding: 20px;
     1356    padding: var(--global--spacing-unit);
    16481357}
    16491358
    … …  
    16511360    overflow-x: auto;
    16521361    white-space: pre !important;
    1653     font-size: 1rem;
     1362    font-size: var(--global--font-size-xs);
    16541363}
    16551364
    16561365.wp-block-pullquote {
    1657     padding: 40px 0;
     1366    padding: calc(2 * var(--global--spacing-unit)) 0;
    16581367    text-align: center;
    1659     border-width: 3px;
     1368    border-width: var(--pullquote--border-width);
    16601369    border-bottom-style: solid;
    16611370    border-top-style: solid;
    … …  
    16671376.wp-block-pullquote blockquote::before {
    16681377    color: currentColor;
    1669     content: "\201C";
     1378    content: "“";
    16701379    display: block;
    16711380    font-size: 3rem;
    … …  
    16751384
    16761385.wp-block-pullquote p {
    1677     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1678     font-size: 2rem;
    1679     font-style: normal;
     1386    font-family: var(--pullquote--font-family);
     1387    font-size: var(--pullquote--font-size);
     1388    font-style: var(--pullquote--font-style);
    16801389    font-weight: 700;
    1681     letter-spacing: normal;
    1682     line-height: 1.3;
     1390    letter-spacing: var(--pullquote--letter-spacing);
     1391    line-height: var(--pullquote--line-height);
    16831392    margin: 0;
    1684 }
    1685 
    1686 @media only screen and (min-width: 652px){
    1687     .wp-block-pullquote p{
    1688     font-size: 2rem;
    1689     }
    16901393}
    16911394
    … …  
    16941397}
    16951398
    1696 .wp-block-pullquote .wp-block-pullquote__citation {
    1697     font-size: 1rem;
    1698     font-style: normal;
    1699     text-transform: none;
    1700 }
    1701 
    1702 .wp-block-pullquote cite {
    1703     font-size: 1rem;
    1704     font-style: normal;
    1705     text-transform: none;
    1706 }
    1707 
     1399.wp-block-pullquote .wp-block-pullquote__citation,
     1400.wp-block-pullquote cite,
    17081401.wp-block-pullquote footer {
    1709     font-size: 1rem;
    1710     font-style: normal;
     1402    font-size: var(--global--font-size-xs);
     1403    font-style: var(--pullquote--font-style);
    17111404    text-transform: none;
    17121405}
    … …  
    17191412    margin-left: auto;
    17201413    margin-right: auto;
    1721     padding: 50px;
    1722     border-width: 3px;
     1414    padding: calc(2.5 * var(--global--spacing-unit));
     1415    border-width: var(--pullquote--border-width);
    17231416    border-style: solid;
    1724     border-color: #28303d;
    1725 }
    1726 
     1417    border-color: var(--pullquote--border-color);
     1418}
    17271419@media (min-width: 600px) {
     1420
    17281421    .wp-block-pullquote.is-style-solid-color {
    1729         padding: 100px;
     1422        padding: calc(5 * var(--global--spacing-unit));
    17301423    }
    17311424}
    … …  
    17351428}
    17361429
    1737 .wp-block-pullquote.is-style-solid-color.alignleft blockquote {
    1738     padding-left: 20px;
    1739     padding-right: 20px;
    1740     max-width: inherit;
    1741 }
    1742 
     1430.wp-block-pullquote.is-style-solid-color.alignleft blockquote,
    17431431.wp-block-pullquote.is-style-solid-color.alignright blockquote {
    1744     padding-left: 20px;
    1745     padding-right: 20px;
     1432    padding-left: var(--global--spacing-unit);
     1433    padding-right: var(--global--spacing-unit);
    17461434    max-width: inherit;
    17471435}
    … …  
    17531441
    17541442.wp-block-pullquote.is-style-solid-color blockquote p {
    1755     font-size: 2rem;
    1756 }
    1757 
    1758 @media only screen and (min-width: 652px){
    1759     .wp-block-pullquote.is-style-solid-color blockquote p{
    1760     font-size: 2rem;
    1761     }
     1443    font-size: var(--pullquote--font-size);
    17621444}
    17631445
    … …  
    17681450}
    17691451
    1770 .wp-block[data-align="full"] .wp-block-pullquote:not(.is-style-solid-color) blockquote {
    1771     padding: 0 40px;
     1452.wp-block[data-align=full] .wp-block-pullquote:not(.is-style-solid-color) blockquote {
     1453    padding: 0 calc(2 * var(--global--spacing-unit));
    17721454}
    17731455
    … …  
    17751457    position: relative;
    17761458    border-left: none;
    1777     margin: 30px auto 30px 25px;
     1459    margin: var(--global--spacing-vertical) auto var(--global--spacing-vertical) var(--global--spacing-horizontal);
    17781460}
    17791461
    17801462.wp-block-quote p {
    1781     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1782     font-size: 1.25rem;
    1783     font-style: normal;
    1784     font-weight: 700;
    1785     line-height: 1.7;
     1463    font-family: var(--quote--font-family);
     1464    font-size: var(--quote--font-size);
     1465    font-style: var(--quote--font-style);
     1466    font-weight: var(--quote--font-weight);
     1467    line-height: var(--quote--line-height);
    17861468}
    17871469
    17881470.wp-block-quote strong {
    1789     font-weight: normal;
     1471    font-weight: var(--quote--font-weight-strong);
    17901472}
    17911473
    17921474.wp-block-quote:before {
    1793     content: "\201C";
    1794     font-size: 1.25rem;
    1795     line-height: 1.7;
     1475    content: "“";
     1476    font-size: var(--quote--font-size);
     1477    line-height: var(--quote--line-height);
    17961478    position: absolute;
    1797     left: -12px;
     1479    left: calc(-0.5 * var(--global--spacing-horizontal));
    17981480}
    17991481
    18001482.wp-block-quote .wp-block-quote__citation {
    1801     color: #28303d;
    1802     font-size: 1rem;
    1803     font-style: normal;
     1483    color: var(--global--color-primary);
     1484    font-size: var(--global--font-size-xs);
     1485    font-style: var(--quote--font-style-cite);
    18041486}
    18051487
    18061488.has-background:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
    1807 [class*="background-color"]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
    1808 [style*="background-color"]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
    1809 .wp-block-cover[style*="background-image"] .wp-block-quote .wp-block-quote__citation {
     1489[class*=background-color]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
     1490[style*=background-color]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
     1491.wp-block-cover[style*=background-image] .wp-block-quote .wp-block-quote__citation {
    18101492    color: currentColor;
    18111493}
    18121494
    18131495.wp-block-quote.has-text-align-right {
    1814     margin: 30px 25px 30px auto;
     1496    margin: var(--global--spacing-vertical) var(--global--spacing-horizontal) var(--global--spacing-vertical) auto;
    18151497    padding-right: 0;
    18161498    border-right: none;
    … …  
    18181500
    18191501.wp-block-quote.has-text-align-right:before {
    1820     content: "\201D";
     1502    content: "”";
    18211503    left: initial;
    1822     right: -12px;
     1504    right: calc(-0.5 * var(--global--spacing-horizontal));
    18231505}
    18241506
    18251507.wp-block-quote.has-text-align-center {
    1826     margin: 30px auto;
     1508    margin: var(--global--spacing-vertical) auto;
    18271509}
    18281510
    … …  
    18311513}
    18321514
    1833 .wp-block-quote.is-large {
    1834     padding-left: 0;
    1835     /* Resetting margins to match _block-container.scss */
    1836     margin-top: 30px;
    1837     margin-bottom: 30px;
    1838 }
    1839 
     1515.wp-block-quote.is-large,
    18401516.wp-block-quote.is-style-large {
    18411517    padding-left: 0;
     1518
    18421519    /* Resetting margins to match _block-container.scss */
    1843     margin-top: 30px;
    1844     margin-bottom: 30px;
    1845 }
    1846 
    1847 .wp-block-quote.is-large p {
    1848     font-size: 2.25rem;
    1849     font-style: normal;
    1850     line-height: 1.35;
    1851 }
    1852 
    1853 @media only screen and (min-width: 652px){
    1854     .wp-block-quote.is-large p{
    1855     font-size: 2.5rem;
    1856     }
    1857 }
    1858 
     1520    margin-top: var(--global--spacing-vertical);
     1521    margin-bottom: var(--global--spacing-vertical);
     1522}
     1523
     1524.wp-block-quote.is-large p,
    18591525.wp-block-quote.is-style-large p {
    1860     font-size: 2.25rem;
    1861     font-style: normal;
    1862     line-height: 1.35;
    1863 }
    1864 
    1865 @media only screen and (min-width: 652px){
    1866     .wp-block-quote.is-style-large p{
    1867     font-size: 2.5rem;
    1868     }
    1869 }
    1870 
    1871 .wp-block-quote.is-large:before {
    1872     font-size: 2.25rem;
    1873     line-height: 1.35;
    1874     left: -25px;
    1875 }
    1876 
    1877 @media only screen and (min-width: 652px){
    1878     .wp-block-quote.is-large:before{
    1879     font-size: 2.5rem;
    1880     }
    1881 }
    1882 
     1526    font-size: var(--quote--font-size-large);
     1527    font-style: var(--quote--font-style-large);
     1528    line-height: var(--quote--line-height-large);
     1529}
     1530
     1531.wp-block-quote.is-large:before,
    18831532.wp-block-quote.is-style-large:before {
    1884     font-size: 2.25rem;
    1885     line-height: 1.35;
    1886     left: -25px;
    1887 }
    1888 
    1889 @media only screen and (min-width: 652px){
    1890     .wp-block-quote.is-style-large:before{
    1891     font-size: 2.5rem;
    1892     }
    1893 }
    1894 
    1895 .wp-block-quote.is-large.has-text-align-right:before {
    1896     left: initial;
    1897     right: -25px;
    1898 }
    1899 
     1533    font-size: var(--quote--font-size-large);
     1534    line-height: var(--quote--line-height-large);
     1535    left: calc(-1 * var(--global--spacing-horizontal));
     1536}
     1537
     1538.wp-block-quote.is-large.has-text-align-right:before,
    19001539.wp-block-quote.is-style-large.has-text-align-right:before {
    19011540    left: initial;
    1902     right: -25px;
    1903 }
    1904 
     1541    right: calc(-1 * var(--global--spacing-horizontal));
     1542}
    19051543@media only screen and (max-width: 481px) {
    1906     .wp-block-quote.is-large {
    1907         padding-left: 25px;
    1908     }
     1544
     1545    .wp-block-quote.is-large,
    19091546    .wp-block-quote.is-style-large {
    1910         padding-left: 25px;
    1911     }
    1912     .wp-block-quote.is-large:before, .wp-block-quote.is-style-large:before {
     1547        padding-left: var(--global--spacing-horizontal);
     1548    }
     1549
     1550    .wp-block-quote.is-large:before,
     1551    .wp-block-quote.is-style-large:before {
    19131552        left: 0;
    19141553    }
    1915     .wp-block-quote.is-large.has-text-align-right {
    1916         padding-left: 0;
    1917         padding-right: 25px;
    1918     }
     1554
     1555    .wp-block-quote.is-large.has-text-align-right,
    19191556    .wp-block-quote.is-style-large.has-text-align-right {
    19201557        padding-left: 0;
    1921         padding-right: 25px;
    1922     }
    1923     .wp-block-quote.is-large.has-text-align-right:before, .wp-block-quote.is-style-large.has-text-align-right:before {
     1558        padding-right: var(--global--spacing-horizontal);
     1559    }
     1560
     1561    .wp-block-quote.is-large.has-text-align-right:before,
     1562    .wp-block-quote.is-style-large.has-text-align-right:before {
    19241563        right: 0;
    19251564    }
    19261565}
    1927 
    19281566@media only screen and (max-width: 481px) {
     1567
    19291568    .wp-block-quote {
    1930         padding-left: 13px;
    1931     }
     1569        padding-left: calc(0.5 * var(--global--spacing-horizontal));
     1570    }
     1571
    19321572    .wp-block-quote:before {
    19331573        left: 0;
    19341574    }
     1575
    19351576    .wp-block-quote.has-text-align-right {
    19361577        padding-left: 0;
    1937         padding-right: 13px;
    1938     }
     1578        padding-right: calc(0.5 * var(--global--spacing-horizontal));
     1579    }
     1580
    19391581    .wp-block-quote.has-text-align-right:before {
    19401582        right: 0;
    19411583    }
     1584
    19421585    .wp-block-quote.has-text-align-center {
    19431586        padding-left: 0;
    … …  
    19451588    }
    19461589}
    1947 
    19481590@media only screen and (min-width: 482px) {
     1591
    19491592    .wp-block-quote {
    19501593        margin-left: auto;
    19511594    }
     1595
    19521596    .wp-block-quote.has-text-align-right {
    19531597        margin-right: auto;
    … …  
    19641608
    19651609.wp-block-rss:not(.is-grid) > li {
    1966     margin-top: 50px;
    1967     margin-bottom: 50px;
     1610    margin-top: calc(1.666 * var(--global--spacing-vertical));
     1611    margin-bottom: calc(1.666 * var(--global--spacing-vertical));
    19681612}
    19691613
    … …  
    19771621
    19781622.wp-block-rss.is-grid > li {
    1979     margin-bottom: 30px;
     1623    margin-bottom: var(--global--spacing-vertical);
    19801624}
    19811625
    … …  
    19841628}
    19851629
    1986 .wp-block-rss.is-grid.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1),
    1987 .wp-block-rss.is-grid.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1) ~ li,
    1988 .wp-block-rss.is-grid.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1),
    1989 .wp-block-rss.is-grid.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li,
    1990 .wp-block-rss.is-grid.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1),
    1991 .wp-block-rss.is-grid.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1) ~ li,
    1992 .wp-block-rss.is-grid.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1),
    1993 .wp-block-rss.is-grid.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1) ~ li,
    1994 .wp-block-rss.is-grid.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1),
    1995 .wp-block-rss.is-grid.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1) ~ li {
     1630.wp-block-rss.is-grid.columns-2 > li:nth-last-child(-n+2):nth-child(2n+1),
     1631.wp-block-rss.is-grid.columns-2 > li:nth-last-child(-n+2):nth-child(2n+1) ~ li,
     1632.wp-block-rss.is-grid.columns-3 > li:nth-last-child(-n+3):nth-child(3n+1),
     1633.wp-block-rss.is-grid.columns-3 > li:nth-last-child(-n+3):nth-child(3n+1) ~ li,
     1634.wp-block-rss.is-grid.columns-4 > li:nth-last-child(-n+4):nth-child(4n+1),
     1635.wp-block-rss.is-grid.columns-4 > li:nth-last-child(-n+4):nth-child(4n+1) ~ li,
     1636.wp-block-rss.is-grid.columns-5 > li:nth-last-child(-n+5):nth-child(5n+1),
     1637.wp-block-rss.is-grid.columns-5 > li:nth-last-child(-n+5):nth-child(5n+1) ~ li,
     1638.wp-block-rss.is-grid.columns-6 > li:nth-last-child(-n+6):nth-child(6n+1),
     1639.wp-block-rss.is-grid.columns-6 > li:nth-last-child(-n+6):nth-child(6n+1) ~ li {
    19961640    margin-bottom: 0;
    19971641}
    19981642
    19991643.wp-block-rss > li > * {
    2000     margin-top: 10px;
    2001     margin-bottom: 10px;
     1644    margin-top: calc(0.333 * var(--global--spacing-vertical));
     1645    margin-bottom: calc(0.333 * var(--global--spacing-vertical));
    20021646}
    20031647
    … …  
    20121656.wp-block-rss .wp-block-rss__item-title > a {
    20131657    display: inline-block;
    2014     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2015     font-size: 2rem;
    2016     font-weight: normal;
    2017     line-height: 1.3;
    2018     margin-bottom: 10px;
    2019 }
    2020 
    2021 @media only screen and (min-width: 652px){
    2022     .wp-block-rss .wp-block-rss__item-title > a{
    2023     font-size: 2rem;
    2024     }
     1658    font-family: var(--latest-posts--title-font-family);
     1659    font-size: var(--latest-posts--title-font-size);
     1660    font-weight: var(--heading--font-weight);
     1661    line-height: var(--global--line-height-heading);
     1662    margin-bottom: calc(0.333 * var(--global--spacing-vertical));
    20251663}
    20261664
    20271665.wp-block-rss .wp-block-rss__item-author {
    2028     color: #28303d;
    2029     font-size: 1.25rem;
    2030     line-height: 1.7;
     1666    color: var(--global--color-primary);
     1667    font-size: var(--global--font-size-md);
     1668    line-height: var(--global--line-height-body);
    20311669}
    20321670
    20331671.wp-block-rss .wp-block-rss__item-publish-date {
    2034     color: #28303d;
    2035     font-size: 1rem;
    2036     line-height: 1.7;
    2037 }
    2038 
    2039 [class*="inner-container"] .wp-block-rss .wp-block-rss__item-publish-date,
     1672    color: var(--global--color-primary);
     1673    font-size: var(--global--font-size-xs);
     1674    line-height: var(--global--line-height-body);
     1675}
     1676
     1677[class*=inner-container] .wp-block-rss .wp-block-rss__item-publish-date,
    20401678.has-background .wp-block-rss .wp-block-rss__item-publish-date {
    20411679    color: currentColor;
    20421680}
    20431681
    2044 .wp-block-rss .wp-block-rss__item-excerpt {
    2045     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2046     font-size: 1.125rem;
    2047     line-height: 1.7;
    2048     margin-top: 20px;
    2049 }
    2050 
     1682.wp-block-rss .wp-block-rss__item-excerpt,
    20511683.wp-block-rss .wp-block-rss__item-full-content {
    2052     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2053     font-size: 1.125rem;
    2054     line-height: 1.7;
    2055     margin-top: 20px;
     1684    font-family: var(--latest-posts--description-font-family);
     1685    font-size: var(--latest-posts--description-font-size);
     1686    line-height: var(--global--line-height-body);
     1687    margin-top: calc(0.666 * var(--global--spacing-vertical));
    20561688}
    20571689
    20581690.wp-block-rss.alignfull {
    2059     padding-left: 20px;
    2060     padding-right: 20px;
    2061 }
    2062 
    2063 .entry-content [class*="inner-container"] .wp-block-rss.alignfull,
     1691    padding-left: var(--global--spacing-unit);
     1692    padding-right: var(--global--spacing-unit);
     1693}
     1694
     1695.entry-content [class*=inner-container] .wp-block-rss.alignfull,
    20641696.entry-content .has-background .wp-block-rss.alignfull {
    20651697    padding-left: 0;
    … …  
    20681700
    20691701.wp-block-search {
    2070     max-width: calc(100vw - 30px);
    2071 }
    2072 
    2073 @media only screen and (min-width: 482px){
    2074     .wp-block-search{
    2075     max-width: min(calc(100vw - 100px), 610px);
    2076     }
    2077 }
    2078 
    2079 @media only screen and (min-width: 822px){
    2080     .wp-block-search{
    2081     max-width: min(calc(100vw - 200px), 610px);
    2082     }
     1702    max-width: var(--responsive--aligndefault-width);
    20831703}
    20841704
    20851705.wp-block-search .wp-block-search__label {
    2086     font-size: 1.125rem;
    2087     font-weight: 500;
    2088     margin-bottom: 10px;
     1706    font-size: var(--form--font-size);
     1707    font-weight: var(--form--label-weight);
     1708    margin-bottom: calc(var(--global--spacing-vertical) / 3);
    20891709}
    20901710
    20911711.wp-block-search .wp-block-search__input {
    2092     border: 3px solid #39414d;
    2093     border-radius: 0;
    2094     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2095     font-size: 1.125rem;
    2096     line-height: 1.7;
     1712    border: var(--form--border-width) solid var(--form--border-color);
     1713    border-radius: var(--form--border-radius);
     1714    font-family: var(--form--font-family);
     1715    font-size: var(--form--font-size);
     1716    line-height: var(--form--line-height);
    20971717    max-width: inherit;
    2098     margin-right: -3px;
    2099     padding: 10px;
    2100 }
    2101 
    2102 .wp-block-search .wp-block-search__input:focus {
    2103     border-color: #39414d;
     1718    margin-right: calc(-1 * var(--button--border-width));
     1719    padding: var(--form--spacing-unit);
     1720}
     1721
     1722.is-dark-theme .wp-block-search .wp-block-search__input {
     1723    background: var(--global--color-white-90);
     1724}
     1725
     1726.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__input,
     1727.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__input,
     1728.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__input,
     1729.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__input,
     1730.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__input,
     1731.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__input,
     1732.is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__input {
     1733    border-color: var(--form--color-text);
     1734}
     1735
     1736.has-background.has-gray-background-color .wp-block-search .wp-block-search__input,
     1737.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input,
     1738.has-background.has-black-background-color .wp-block-search .wp-block-search__input {
     1739    border-color: var(--global--color-white);
    21041740}
    21051741
    21061742.wp-block-search .wp-block-search__button {
    2107     line-height: 1.5;
    2108     color: #d1e4dd;
     1743    line-height: var(--button--line-height);
     1744    color: var(--button--color-text);
    21091745    cursor: pointer;
    2110     font-weight: 500;
    2111     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2112     font-size: 1.25rem;
    2113     background-color: #39414d;
    2114     border-radius: 0;
    2115     border: 3px solid #39414d;
     1746    font-weight: var(--button--font-weight);
     1747    font-family: var(--button--font-family);
     1748    font-size: var(--button--font-size);
     1749    background-color: var(--button--color-background);
     1750    border-radius: var(--button--border-radius);
     1751    border: var(--button--border-width) solid var(--button--color-background);
    21161752    text-decoration: none;
    2117     padding: 15px 30px;
     1753    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    21181754    box-shadow: none;
    21191755    margin-left: 0;
    21201756    background-color: transparent;
    2121     color: #39414d;
    2122 }
    2123 
    2124 .wp-block-search .wp-block-search__button:before, .wp-block-search .wp-block-search__button:after {
     1757    color: var(--button--color-text-hover);
     1758}
     1759
     1760.wp-block-search .wp-block-search__button:before,
     1761.wp-block-search .wp-block-search__button:after {
    21251762    content: "";
    21261763    display: block;
    … …  
    21301767
    21311768.wp-block-search .wp-block-search__button:before {
    2132     margin-bottom: -calc(1em - 0);
     1769    margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
    21331770}
    21341771
    21351772.wp-block-search .wp-block-search__button:after {
    2136     margin-top: -calc(1em - 0);
     1773    margin-top: -calc(.5em * var(--button--line-height) + -.39);
    21371774}
    21381775
    … …  
    21431780}
    21441781
    2145 .has-background-dark .wp-block-search .wp-block-search__button:focus {
    2146     color: #39414d;
     1782.is-dark-theme .wp-block-search .wp-block-search__button:focus {
     1783    color: var(--button--color-background);
    21471784}
    21481785
    21491786.wp-block-search .wp-block-search__button:focus:not(.has-background) {
    2150     color: #39414d;
     1787    color: var(--button--color-text-hover);
    21511788}
    21521789
    21531790.wp-block-search .wp-block-search__button:disabled {
    2154     background-color: rgba(255, 255, 255, 0.5);
    2155     border-color: rgba(255, 255, 255, 0.5);
    2156     color: #39414d;
     1791    background-color: var(--global--color-white-50);
     1792    border-color: var(--global--color-white-50);
     1793    color: var(--button--color-text-active);
    21571794}
    21581795
    21591796.wp-block-search .wp-block-search__button:hover {
    2160     background-color: #39414d;
    2161     color: #d1e4dd;
    2162 }
    2163 
    2164 .wp-block[data-align="center"] > * {
     1797    color: var(--button--color-text);
     1798    background-color: var(--button--color-background);
     1799}
     1800
     1801.wp-block-search .wp-block-search__button.has-icon {
     1802    padding: calc(2 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
     1803}
     1804
     1805.wp-block-search .wp-block-search__button.has-icon svg {
     1806    width: 40px;
     1807    height: 40px;
     1808}
     1809
     1810.has-background.has-gray-background-color .wp-block-search .wp-block-search__button,
     1811.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button,
     1812.has-background.has-black-background-color .wp-block-search .wp-block-search__button {
     1813    color: var(--global--color-white);
     1814    border-color: currentColor;
     1815}
     1816
     1817.has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover,
     1818.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover,
     1819.has-background.has-black-background-color .wp-block-search .wp-block-search__button:hover {
     1820    color: var(--global--color-white);
     1821    background-color: var(--button--color-background);
     1822    border-color: var(--global--color-white);
     1823}
     1824
     1825.is-dark-theme .has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover,
     1826.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover,
     1827.is-dark-theme .has-background.has-black-background-color .wp-block-search .wp-block-search__button:hover {
     1828    color: var(--button--color-text);
     1829    background-color: var(--button--color-background);
     1830}
     1831
     1832.has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover,
     1833.has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover,
     1834.has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover,
     1835.has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover,
     1836.has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover,
     1837.has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover,
     1838.has-background.has-yellow-background-color .wp-block-search .wp-block-search__button:hover {
     1839    color: var(--global--color-white);
     1840    background-color: var(--form--border-color);
     1841    border-color: var(--form--border-color);
     1842}
     1843
     1844.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button,
     1845.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button,
     1846.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button,
     1847.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button,
     1848.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button,
     1849.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button,
     1850.is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button {
     1851    color: var(--form--color-text);
     1852    border-color: currentColor;
     1853}
     1854
     1855.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover,
     1856.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover,
     1857.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover,
     1858.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover,
     1859.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover,
     1860.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover,
     1861.is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button:hover {
     1862    color: var(--global--color-white);
     1863    background-color: var(--button--color-text);
     1864    border-color: var(--button--color-text);
     1865}
     1866
     1867.wp-block-search.wp-block-search__button-inside .wp-block-search__input,
     1868.has-background.has-white-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
     1869.has-background.has-green-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
     1870.has-background.has-blue-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
     1871.has-background.has-purple-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
     1872.has-background.has-red-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
     1873.has-background.has-orange-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
     1874.has-background.has-yellow-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input {
     1875    border: none;
     1876}
     1877
     1878.wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button {
     1879    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
     1880}
     1881
     1882.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
     1883    color: var(--button--color-text);
     1884    border-color: currentColor;
     1885}
     1886
     1887.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
     1888    color: var(--global--color-white);
     1889    background-color: var(--button--color-text);
     1890    border-color: var(--button--color-text);
     1891}
     1892
     1893.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button,
     1894.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button,
     1895.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
     1896    color: var(--button--color-text-hover);
     1897    border-color: currentColor;
     1898}
     1899
     1900.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover,
     1901.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover,
     1902.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
     1903    color: var(--global--color-white);
     1904    background-color: var(--button--color-background);
     1905    border-color: var(--button--color-background);
     1906}
     1907
     1908.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button,
     1909.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button,
     1910.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
     1911    color: var(--button--color-text);
     1912    border-color: currentColor;
     1913}
     1914
     1915.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover,
     1916.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover,
     1917.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
     1918    color: var(--global--color-white);
     1919    background-color: var(--button--color-text);
     1920    border-color: var(--button--color-text);
     1921}
     1922
     1923.wp-block[data-align=center] > * {
    21651924    text-align: center;
    21661925}
    21671926
    2168 .wp-block[data-align="center"] .wp-block-search__button-only .wp-block-search__inside-wrapper {
     1927.wp-block[data-align=center] .wp-block-search__button-only .wp-block-search__inside-wrapper {
    21691928    justify-content: center;
    21701929}
    21711930
    2172 .wp-block-separator {
    2173     border-bottom: 1px solid #28303d;
     1931.wp-block-separator,
     1932hr {
     1933    border-bottom: var(--separator--height) solid var(--separator--border-color);
    21741934    clear: both;
    21751935    opacity: 1;
    21761936}
    21771937
    2178 hr {
    2179     border-bottom: 1px solid #28303d;
    2180     clear: both;
    2181     opacity: 1;
    2182 }
    2183 
    2184 .wp-block-separator[style*="text-align:right"] {
    2185     border-right-color: #28303d;
    2186 }
    2187 
    2188 .wp-block-separator[style*="text-align: right"] {
    2189     border-right-color: #28303d;
    2190 }
    2191 
    2192 hr[style*="text-align:right"] {
    2193     border-right-color: #28303d;
    2194 }
    2195 
     1938.wp-block-separator[style*="text-align:right"],
     1939.wp-block-separator[style*="text-align: right"],
     1940hr[style*="text-align:right"],
    21961941hr[style*="text-align: right"] {
    2197     border-right-color: #28303d;
    2198 }
    2199 
    2200 .wp-block-separator:not(.is-style-dots) {
    2201     max-width: calc(100vw - 30px);
    2202 }
    2203 
    2204 @media only screen and (min-width: 482px){
    2205     .wp-block-separator:not(.is-style-dots){
    2206     max-width: min(calc(100vw - 100px), 610px);
    2207     }
    2208 }
    2209 
    2210 @media only screen and (min-width: 822px){
    2211     .wp-block-separator:not(.is-style-dots){
    2212     max-width: min(calc(100vw - 200px), 610px);
    2213     }
    2214 }
    2215 
     1942    border-right-color: var(--separator--border-color);
     1943}
     1944
     1945.wp-block-separator:not(.is-style-dots),
    22161946hr:not(.is-style-dots) {
    2217     max-width: calc(100vw - 30px);
    2218 }
    2219 
    2220 @media only screen and (min-width: 482px){
    2221     hr:not(.is-style-dots){
    2222     max-width: min(calc(100vw - 100px), 610px);
    2223     }
    2224 }
    2225 
    2226 @media only screen and (min-width: 822px){
    2227     hr:not(.is-style-dots){
    2228     max-width: min(calc(100vw - 200px), 610px);
    2229     }
    2230 }
    2231 
    2232 [data-align="full"] > .wp-block-separator,
    2233 [data-align="wide"] > .wp-block-separator, [data-align="full"] >
    2234 hr,
    2235 [data-align="wide"] >
    2236 hr {
     1947    max-width: var(--responsive--aligndefault-width);
     1948}
     1949
     1950[data-align=full] > .wp-block-separator,
     1951[data-align=wide] > .wp-block-separator,
     1952[data-align=full] > hr,
     1953[data-align=wide] > hr {
    22371954    max-width: inherit;
    22381955}
    22391956
    2240 .wp-block-separator.is-style-twentytwentyone-separator-thick {
    2241     border-bottom-width: 3px;
    2242 }
    2243 
     1957.wp-block-separator.is-style-twentytwentyone-separator-thick,
    22441958hr.is-style-twentytwentyone-separator-thick {
    2245     border-bottom-width: 3px;
     1959    border-bottom-width: calc(3 * var(--separator--height));
    22461960}
    22471961
    … …  
    22511965}
    22521966
    2253 .wp-block-separator.is-style-dots.has-background, .wp-block-separator.is-style-dots.has-text-color,
     1967.wp-block-separator.is-style-dots.has-background,
     1968.wp-block-separator.is-style-dots.has-text-color,
    22541969hr.is-style-dots.has-background,
    22551970hr.is-style-dots.has-text-color {
    … …  
    22571972}
    22581973
    2259 .wp-block-separator.is-style-dots.has-background:before, .wp-block-separator.is-style-dots.has-text-color:before,
     1974.wp-block-separator.is-style-dots.has-background:before,
     1975.wp-block-separator.is-style-dots.has-text-color:before,
    22601976hr.is-style-dots.has-background:before,
    22611977hr.is-style-dots.has-text-color:before {
    … …  
    22631979}
    22641980
    2265 .wp-block-separator.is-style-dots:before {
    2266     color: #28303d;
    2267 }
    2268 
     1981.wp-block-separator.is-style-dots:before,
    22691982hr.is-style-dots:before {
    2270     color: #28303d;
     1983    color: var(--separator--border-color);
    22711984}
    22721985
    22731986.has-background:not(.has-background-background-color) .wp-block-separator,
    2274 [class*="background-color"]:not(.has-background-background-color) .wp-block-separator,
    2275 [style*="background-color"]:not(.has-background-background-color) .wp-block-separator,
    2276 .wp-block-cover[style*="background-image"] .wp-block-separator, .has-background:not(.has-background-background-color)
    2277 hr,
    2278 [class*="background-color"]:not(.has-background-background-color)
    2279 hr,
    2280 [style*="background-color"]:not(.has-background-background-color)
    2281 hr,
    2282 .wp-block-cover[style*="background-image"]
    2283 hr {
     1987[class*=background-color]:not(.has-background-background-color) .wp-block-separator,
     1988[style*=background-color]:not(.has-background-background-color) .wp-block-separator,
     1989.wp-block-cover[style*=background-image] .wp-block-separator,
     1990.has-background:not(.has-background-background-color) hr,
     1991[class*=background-color]:not(.has-background-background-color) hr,
     1992[style*=background-color]:not(.has-background-background-color) hr,
     1993.wp-block-cover[style*=background-image] hr {
    22841994    border-color: currentColor;
    22851995}
    … …  
    22912001
    22922002.wp-block-social-links.is-style-twentytwentyone-social-icons-color button {
    2293     color: #28303d;
     2003    color: var(--global--color-primary);
    22942004}
    22952005
    … …  
    22982008}
    22992009
    2300 table th {
    2301     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2302 }
    2303 
     2010table th,
    23042011.wp-block-table th {
    2305     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2306 }
    2307 
    2308 table td {
    2309     padding: 10px;
    2310 }
    2311 
    2312 table th {
    2313     padding: 10px;
    2314 }
    2315 
    2316 .wp-block-table td {
    2317     padding: 10px;
    2318 }
    2319 
     2012    font-family: var(--heading--font-family);
     2013}
     2014
     2015table td,
     2016table th,
     2017.wp-block-table td,
    23202018.wp-block-table th {
    2321     padding: 10px;
    2322 }
    2323 
    2324 table.is-style-regular .has-background {
    2325     color: #28303d;
    2326 }
    2327 
    2328 table.is-style-stripes .has-background thead tr {
    2329     color: #28303d;
    2330 }
    2331 
    2332 table.is-style-stripes .has-background tfoot tr {
    2333     color: #28303d;
    2334 }
    2335 
    2336 table.is-style-stripes .has-background tbody tr:nth-child(even) {
    2337     color: #28303d;
    2338 }
    2339 
    2340 .wp-block-table.is-style-regular .has-background {
    2341     color: #28303d;
    2342 }
    2343 
    2344 .wp-block-table.is-style-stripes .has-background thead tr {
    2345     color: #28303d;
    2346 }
    2347 
    2348 .wp-block-table.is-style-stripes .has-background tfoot tr {
    2349     color: #28303d;
    2350 }
    2351 
     2019    padding: calc(0.5 * var(--global--spacing-unit));
     2020}
     2021
     2022table.is-style-regular .has-background,
     2023table.is-style-stripes .has-background thead tr,
     2024table.is-style-stripes .has-background tfoot tr,
     2025table.is-style-stripes .has-background tbody tr:nth-child(even),
     2026.wp-block-table.is-style-regular .has-background,
     2027.wp-block-table.is-style-stripes .has-background thead tr,
     2028.wp-block-table.is-style-stripes .has-background tfoot tr,
    23522029.wp-block-table.is-style-stripes .has-background tbody tr:nth-child(even) {
    2353     color: #28303d;
    2354 }
    2355 
    2356 table.is-style-stripes {
    2357     border-color: #f0f0f0;
    2358 }
    2359 
     2030    color: var(--table--has-background-text-color);
     2031}
     2032
     2033table.is-style-stripes,
    23602034.wp-block-table.is-style-stripes {
    2361     border-color: #f0f0f0;
     2035    border-color: var(--table--stripes-border-color);
    23622036}
    23632037
    … …  
    23692043}
    23702044
    2371 table.is-style-stripes tbody tr:nth-child(odd) {
    2372     background-color: #f0f0f0;
    2373 }
    2374 
     2045table.is-style-stripes tbody tr:nth-child(odd),
    23752046.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    2376     background-color: #f0f0f0;
     2047    background-color: var(--table--stripes-background-color);
    23772048}
    23782049
    … …  
    23992070    font-weight: bold;
    24002071    text-align: left;
    2401     margin-bottom: 20px;
     2072    margin-bottom: var(--global--spacing-unit);
    24022073    color: currentColor;
    24032074}
    … …  
    24052076.wp-calendar-nav {
    24062077    text-align: left;
    2407     margin-top: 10px;
     2078    margin-top: calc(var(--global--spacing-unit) / 2);
    24082079}
    24092080
    … …  
    24302101}
    24312102
    2432 :root .is-extra-small-text {
    2433     font-size: 1rem;
    2434 }
    2435 
     2103:root .is-extra-small-text,
    24362104:root .has-extra-small-font-size {
    2437     font-size: 1rem;
    2438 }
    2439 
    2440 :root .is-small-text {
    2441     font-size: 1.125rem;
    2442 }
    2443 
     2105    font-size: var(--global--font-size-xs);
     2106}
     2107
     2108:root .is-small-text,
    24442109:root .has-small-font-size {
    2445     font-size: 1.125rem;
    2446 }
    2447 
    2448 :root .is-regular-text {
    2449     font-size: 1.25rem;
    2450 }
    2451 
    2452 :root .has-regular-font-size {
    2453     font-size: 1.25rem;
    2454 }
    2455 
    2456 :root .is-normal-font-size {
    2457     font-size: 1.25rem;
    2458 }
    2459 
    2460 :root .has-normal-font-size {
    2461     font-size: 1.25rem;
    2462 }
    2463 
     2110    font-size: var(--global--font-size-sm);
     2111}
     2112
     2113:root .is-regular-text,
     2114:root .has-regular-font-size,
     2115:root .is-normal-font-size,
     2116:root .has-normal-font-size,
    24642117:root .has-medium-font-size {
    2465     font-size: 1.25rem;
    2466 }
    2467 
    2468 :root .is-large-text {
    2469     font-size: 1.5rem;
    2470     line-height: 1.3;
    2471 }
    2472 
     2118    font-size: var(--global--font-size-base);
     2119}
     2120
     2121:root .is-large-text,
    24732122:root .has-large-font-size {
    2474     font-size: 1.5rem;
    2475     line-height: 1.3;
    2476 }
    2477 
    2478 :root .is-larger-text {
    2479     font-size: 2.5rem;
    2480     line-height: 1.3;
    2481 }
    2482 
    2483 @media only screen and (min-width: 652px){
    2484     :root .is-larger-text{
    2485     font-size: 2.5rem;
    2486     }
    2487 }
    2488 
    2489 :root .has-larger-font-size {
    2490     font-size: 2.5rem;
    2491     line-height: 1.3;
    2492 }
    2493 
    2494 @media only screen and (min-width: 652px){
    2495     :root .has-larger-font-size{
    2496     font-size: 2.5rem;
    2497     }
    2498 }
    2499 
    2500 :root .is-extra-large-text {
    2501     font-size: 2.5rem;
    2502     line-height: 1.3;
    2503 }
    2504 
    2505 @media only screen and (min-width: 652px){
    2506     :root .is-extra-large-text{
    2507     font-size: 2.5rem;
    2508     }
    2509 }
    2510 
     2123    font-size: var(--global--font-size-lg);
     2124    line-height: var(--global--line-height-heading);
     2125}
     2126
     2127:root .is-larger-text,
     2128:root .has-larger-font-size,
     2129:root .is-extra-large-text,
    25112130:root .has-extra-large-font-size {
    2512     font-size: 2.5rem;
    2513     line-height: 1.3;
    2514 }
    2515 
    2516 @media only screen and (min-width: 652px){
    2517     :root .has-extra-large-font-size{
    2518     font-size: 2.5rem;
    2519     }
    2520 }
    2521 
    2522 :root .is-huge-text {
    2523     font-size: 6rem;
    2524     line-height: 1.3;
    2525     font-weight: 300;
    2526 }
    2527 
    2528 @media only screen and (min-width: 652px){
    2529     :root .is-huge-text{
    2530     font-size: 6rem;
    2531     }
    2532 }
    2533 
     2131    font-size: var(--global--font-size-xl);
     2132    line-height: var(--global--line-height-heading);
     2133}
     2134
     2135:root .is-huge-text,
    25342136:root .has-huge-font-size {
    2535     font-size: 6rem;
    2536     line-height: 1.3;
    2537     font-weight: 300;
    2538 }
    2539 
    2540 @media only screen and (min-width: 652px){
    2541     :root .has-huge-font-size{
    2542     font-size: 6rem;
    2543     }
    2544 }
    2545 
    2546 :root .is-gigantic-text {
    2547     font-size: 9rem;
    2548     line-height: 1.3;
    2549     font-weight: 300;
    2550 }
    2551 
    2552 @media only screen and (min-width: 652px){
    2553     :root .is-gigantic-text{
    2554     font-size: 9rem;
    2555     }
    2556 }
    2557 
     2137    font-size: var(--global--font-size-xxl);
     2138    line-height: var(--global--line-height-heading);
     2139    font-weight: var(--heading--font-weight-page-title);
     2140}
     2141
     2142:root .is-gigantic-text,
    25582143:root .has-gigantic-font-size {
    2559     font-size: 9rem;
    2560     line-height: 1.3;
    2561     font-weight: 300;
    2562 }
    2563 
    2564 @media only screen and (min-width: 652px){
    2565     :root .has-gigantic-font-size{
    2566     font-size: 9rem;
    2567     }
     2144    font-size: var(--global--font-size-xxxl);
     2145    line-height: var(--global--line-height-heading);
     2146    font-weight: var(--heading--font-weight-page-title);
    25682147}
    25692148
    … …  
    25732152*/
    25742153.wp-block.editor-post-title__block {
    2575     border-bottom: 3px solid #28303d;
    2576     padding-bottom: 60px;
    2577     margin-bottom: 90px;
    2578     max-width: calc(100vw - 30px);
    2579 }
    2580 @media only screen and (min-width: 482px){
    2581     .wp-block.editor-post-title__block{
    2582     max-width: calc(100vw - 100px);
    2583     }
    2584 }
    2585 @media only screen and (min-width: 822px){
    2586     .wp-block.editor-post-title__block{
    2587     max-width: min(calc(100vw - 200px), 1240px);
    2588     }
     2154    border-bottom: 3px solid var(--global--color-border);
     2155    padding-bottom: calc(2 * var(--global--spacing-vertical));
     2156    margin-bottom: calc(3 * var(--global--spacing-vertical));
     2157    max-width: var(--responsive--alignwide-width);
    25892158}
    25902159
    25912160.wp-block.editor-post-title__block .editor-post-title__input {
    2592     color: #39414d;
    2593     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2594     font-size: 4rem;
    2595     font-weight: 300;
    2596     line-height: 1.1;
    2597 }
    2598 
    2599 @media only screen and (min-width: 652px){
    2600     .wp-block.editor-post-title__block .editor-post-title__input{
    2601     font-size: 6rem;
    2602     }
     2161    color: var(--global--color-secondary);
     2162    font-family: var(--heading--font-family);
     2163    font-size: var(--global--font-size-page-title);
     2164    font-weight: var(--heading--font-weight-page-title);
     2165    line-height: var(--heading--line-height-h1);
    26032166}
    26042167
    26052168.wp-block.block-editor-default-block-appender > textarea {
    2606     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2607     font-size: 1.25rem;
     2169    font-family: var(--global--font-secondary);
     2170    font-size: var(--global--font-size-md);
    26082171}
    26092172
    26102173.has-primary-color[class] {
    2611     color: #28303d;
     2174    color: var(--global--color-primary);
    26122175}
    26132176
    26142177.has-secondary-color[class] {
    2615     color: #39414d;
     2178    color: var(--global--color-secondary);
    26162179}
    26172180
    … …  
    26282191
    26292192.has-primary-background-color[class] {
    2630     background-color: #28303d;
    2631     color: #d1e4dd;
     2193    background-color: var(--global--color-primary);
     2194    color: var(--global--color-background);
    26322195}
    26332196
    26342197.has-secondary-background-color[class] {
    2635     background-color: #39414d;
    2636     color: #d1e4dd;
     2198    background-color: var(--global--color-secondary);
     2199    color: var(--global--color-background);
    26372200}
    26382201
    26392202.has-white-background-color[class] {
    2640     background-color: #fff;
    2641     color: #39414d;
     2203    background-color: var(--global--color-white);
     2204    color: var(--global--color-secondary);
    26422205}
    26432206
    26442207.has-black-background-color[class] {
    2645     background-color: #000;
    2646     color: #28303d;
     2208    background-color: var(--global--color-black);
     2209    color: var(--global--color-primary);
    26472210}
    26482211
    … …  
    26512214 */
    26522215[data-block] {
    2653     margin-top: 30px;
    2654     margin-bottom: 30px;
     2216    margin-top: var(--global--spacing-vertical);
     2217    margin-bottom: var(--global--spacing-vertical);
    26552218}
    26562219
    … …  
    26652228/* Block Alignments */
    26662229.wp-block {
    2667     max-width: calc(100vw - 30px);
    2668 }
    2669 @media only screen and (min-width: 482px){
    2670     .wp-block{
    2671     max-width: min(calc(100vw - 100px), 610px);
    2672     }
    2673 }
    2674 @media only screen and (min-width: 822px){
    2675     .wp-block{
    2676     max-width: min(calc(100vw - 200px), 610px);
    2677     }
    2678 }
    2679 
    2680 .wp-block[data-align="wide"] {
    2681     max-width: calc(100vw - 30px);
    2682 }
    2683 
    2684 @media only screen and (min-width: 482px){
    2685     .wp-block[data-align="wide"]{
    2686     max-width: calc(100vw - 100px);
    2687     }
    2688 }
    2689 
    2690 @media only screen and (min-width: 822px){
    2691     .wp-block[data-align="wide"]{
    2692     max-width: min(calc(100vw - 200px), 1240px);
    2693     }
    2694 }
    2695 
     2230    max-width: var(--responsive--aligndefault-width);
     2231}
     2232
     2233.wp-block[data-align=wide],
    26962234.wp-block.alignwide {
    2697     max-width: calc(100vw - 30px);
    2698 }
    2699 
    2700 @media only screen and (min-width: 482px){
    2701     .wp-block.alignwide{
    2702     max-width: calc(100vw - 100px);
    2703     }
    2704 }
    2705 
    2706 @media only screen and (min-width: 822px){
    2707     .wp-block.alignwide{
    2708     max-width: min(calc(100vw - 200px), 1240px);
    2709     }
    2710 }
    2711 
    2712 .wp-block[data-align="full"], .wp-block.alignfull {
     2235    max-width: var(--responsive--alignwide-width);
     2236}
     2237
     2238.wp-block[data-align=full],
     2239.wp-block.alignfull {
    27132240    max-width: none;
    2714 }
    2715 
    2716 .block-editor-block-list__layout:not(.edit-site-block-editor__block-list) .wp-block[data-align="full"] > [data-block], .block-editor-block-list__layout:not(.edit-site-block-editor__block-list) .wp-block.alignfull > [data-block] {
    2717     margin-top: 0;
    2718     margin-bottom: 0;
    27192241}
    27202242
    27212243.alignleft {
    27222244    margin: 0;
    2723     margin-right: 25px;
     2245    margin-right: var(--global--spacing-horizontal);
    27242246}
    27252247
    27262248.alignright {
    27272249    margin: 0;
    2728     margin-left: 25px;
     2250    margin-left: var(--global--spacing-horizontal);
    27292251}
    27302252
    27312253.has-drop-cap:not(:focus)::first-letter {
    2732     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2733     font-weight: normal;
     2254    font-family: var(--heading--font-family);
     2255    font-weight: var(--heading--font-weight);
    27342256    line-height: 0.66;
    27352257    text-transform: uppercase;
    … …  
    27372259    float: left;
    27382260    margin: 0.1em 0.1em 0 0;
    2739     font-size: 5rem;
    2740 }
    2741 
    2742 @media only screen and (min-width: 652px){
    2743     .has-drop-cap:not(:focus)::first-letter{
    2744     font-size: 7rem;
    2745     }
     2261    font-size: calc(1.2 * var(--heading--font-size-h1));
    27462262}
    27472263
    27482264@media only screen and (min-width: 482px) {
    2749     .wp-block[data-align="left"] > * {
     2265
     2266    .wp-block[data-align=left] > * {
    27502267        max-width: 290px;
    2751         margin-right: 25px;
    2752     }
    2753     .wp-block[data-align="right"] > * {
     2268        margin-right: var(--global--spacing-horizontal);
     2269    }
     2270
     2271    .wp-block[data-align=right] > * {
    27542272        max-width: 290px;
    2755         margin-left: 25px;
     2273        margin-left: var(--global--spacing-horizontal);
    27562274    }
    27572275}
    27582276
    27592277html {
    2760     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2761     line-height: 1.7;
     2278    font-family: var(--global--font-secondary);
     2279    line-height: var(--global--line-height-body);
    27622280}
    27632281
    27642282body {
    2765     color: #28303d;
    2766     background-color: #d1e4dd;
    2767     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2768     font-size: 1.25rem;
     2283    --wp--typography--line-height: var(--global--line-height-body);
     2284    color: var(--global--color-primary);
     2285    background-color: var(--global--color-background);
     2286    font-family: var(--global--font-secondary);
     2287    font-size: var(--global--font-size-base);
    27692288    font-weight: normal;
    27702289    -moz-osx-font-smoothing: grayscale;
    … …  
    27732292
    27742293.wp-block a {
    2775     color: #28303d;
     2294    color: var(--wp--style--color--link, var(--global--color-primary));
    27762295}
    27772296
    … …  
    27812300
    27822301.wp-block a:focus {
    2783     outline: 2px solid #28303d;
     2302    outline: 2px solid var(--wp--style--color--link, var(--global--color-primary));
    27842303    text-decoration: none;
    27852304}
    27862305
    2787 .has-background:not(.has-background-background-color) .has-link-color a {
    2788     color: #28303d;
    2789 }
    2790 
     2306.has-background:not(.has-background-background-color) .has-link-color a,
    27912307.has-background:not(.has-background-background-color).has-link-color a {
    2792     color: #28303d;
     2308    color: var(--wp--style--color--link, var(--global--color-primary));
    27932309}
    27942310
    … …  
    27992315
    28002316.has-black-color[class] {
    2801     color: #000;
     2317    color: var(--global--color-black);
    28022318}
    28032319
    28042320.has-gray-color[class] {
    2805     color: #39414d;
     2321    color: var(--global--color-gray);
    28062322}
    28072323
    28082324.has-dark-gray-color[class] {
    2809     color: #28303d;
     2325    color: var(--global--color-dark-gray);
    28102326}
    28112327
    28122328.has-green-color[class] {
    2813     color: #d1e4dd;
     2329    color: var(--global--color-green);
    28142330}
    28152331
    28162332.has-blue-color[class] {
    2817     color: #d1dfe4;
     2333    color: var(--global--color-blue);
    28182334}
    28192335
    28202336.has-purple-color[class] {
    2821     color: #d1d1e4;
     2337    color: var(--global--color-purple);
    28222338}
    28232339
    28242340.has-red-color[class] {
    2825     color: #e4d1d1;
     2341    color: var(--global--color-red);
    28262342}
    28272343
    28282344.has-orange-color[class] {
    2829     color: #e4dad1;
     2345    color: var(--global--color-orange);
    28302346}
    28312347
    28322348.has-yellow-color[class] {
    2833     color: #eeeadd;
     2349    color: var(--global--color-yellow);
    28342350}
    28352351
    28362352.has-white-color[class] {
    2837     color: #fff;
     2353    color: var(--global--color-white);
    28382354}
    28392355
    … …  
    28502366
    28512367.has-black-background-color[class] {
    2852     background-color: #000;
     2368    background-color: var(--global--color-black);
    28532369}
    28542370
    28552371.has-gray-background-color[class] {
    2856     background-color: #39414d;
     2372    background-color: var(--global--color-gray);
    28572373}
    28582374
    28592375.has-dark-gray-background-color[class] {
    2860     background-color: #28303d;
     2376    background-color: var(--global--color-dark-gray);
    28612377}
    28622378
    28632379.has-green-background-color[class] {
    2864     background-color: #d1e4dd;
     2380    background-color: var(--global--color-green);
    28652381}
    28662382
    28672383.has-blue-background-color[class] {
    2868     background-color: #d1dfe4;
     2384    background-color: var(--global--color-blue);
    28692385}
    28702386
    28712387.has-purple-background-color[class] {
    2872     background-color: #d1d1e4;
     2388    background-color: var(--global--color-purple);
    28732389}
    28742390
    28752391.has-red-background-color[class] {
    2876     background-color: #e4d1d1;
     2392    background-color: var(--global--color-red);
    28772393}
    28782394
    28792395.has-orange-background-color[class] {
    2880     background-color: #e4dad1;
     2396    background-color: var(--global--color-orange);
    28812397}
    28822398
    28832399.has-yellow-background-color[class] {
    2884     background-color: #eeeadd;
     2400    background-color: var(--global--color-yellow);
    28852401}
    28862402
    28872403.has-white-background-color[class] {
    2888     background-color: #fff;
    2889 }
    2890 
    2891 :not(.has-text-color).has-black-background-color[class] {
    2892     color: #fff;
    2893 }
    2894 
    2895 :not(.has-text-color).has-gray-background-color[class] {
    2896     color: #fff;
    2897 }
    2898 
     2404    background-color: var(--global--color-white);
     2405}
     2406
     2407:not(.has-text-color).has-black-background-color[class],
     2408:not(.has-text-color).has-gray-background-color[class],
    28992409:not(.has-text-color).has-dark-gray-background-color[class] {
    2900     color: #fff;
    2901 }
    2902 
    2903 :not(.has-text-color).has-green-background-color[class] {
    2904     color: #28303d;
    2905 }
    2906 
    2907 :not(.has-text-color).has-blue-background-color[class] {
    2908     color: #28303d;
    2909 }
    2910 
    2911 :not(.has-text-color).has-purple-background-color[class] {
    2912     color: #28303d;
    2913 }
    2914 
    2915 :not(.has-text-color).has-red-background-color[class] {
    2916     color: #28303d;
    2917 }
    2918 
    2919 :not(.has-text-color).has-orange-background-color[class] {
    2920     color: #28303d;
    2921 }
    2922 
    2923 :not(.has-text-color).has-yellow-background-color[class] {
    2924     color: #28303d;
    2925 }
    2926 
     2410    color: var(--global--color-white);
     2411}
     2412
     2413:not(.has-text-color).has-green-background-color[class],
     2414:not(.has-text-color).has-blue-background-color[class],
     2415:not(.has-text-color).has-purple-background-color[class],
     2416:not(.has-text-color).has-red-background-color[class],
     2417:not(.has-text-color).has-orange-background-color[class],
     2418:not(.has-text-color).has-yellow-background-color[class],
    29272419:not(.has-text-color).has-white-background-color[class] {
    2928     color: #28303d;
     2420    color: var(--global--color-dark-gray);
    29292421}
    29302422
    29312423.has-purple-to-yellow-gradient-background {
    2932     background: linear-gradient(160deg, #d1d1e4, #eeeadd);
     2424    background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-yellow));
    29332425}
    29342426
    29352427.has-yellow-to-purple-gradient-background {
    2936     background: linear-gradient(160deg, #eeeadd, #d1d1e4);
     2428    background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-purple));
    29372429}
    29382430
    29392431.has-green-to-yellow-gradient-background {
    2940     background: linear-gradient(160deg, #d1e4dd, #eeeadd);
     2432    background: linear-gradient(160deg, var(--global--color-green), var(--global--color-yellow));
    29412433}
    29422434
    29432435.has-yellow-to-green-gradient-background {
    2944     background: linear-gradient(160deg, #eeeadd, #d1e4dd);
     2436    background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-green));
    29452437}
    29462438
    29472439.has-red-to-yellow-gradient-background {
    2948     background: linear-gradient(160deg, #e4d1d1, #eeeadd);
     2440    background: linear-gradient(160deg, var(--global--color-red), var(--global--color-yellow));
    29492441}
    29502442
    29512443.has-yellow-to-red-gradient-background {
    2952     background: linear-gradient(160deg, #eeeadd, #e4d1d1);
     2444    background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-red));
    29532445}
    29542446
    29552447.has-purple-to-red-gradient-background {
    2956     background: linear-gradient(160deg, #d1d1e4, #e4d1d1);
     2448    background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-red));
    29572449}
    29582450
    29592451.has-red-to-purple-gradient-background {
    2960     background: linear-gradient(160deg, #e4d1d1, #d1d1e4);
    2961 }
    2962 /*# sourceMappingURL=ie-editor.css.map */
     2452    background: linear-gradient(160deg, var(--global--color-red), var(--global--color-purple));
     2453}

  • trunk/src/wp-content/themes/twentytwentyone/assets/css/ie.css

    r49478 r49574  
    11@charset "UTF-8";
     2
    23/*
    34Theme Name: Twenty Twenty-One
    … …  
    1819Twenty Twenty-One is distributed under the terms of the GNU GPL.
    1920*/
     21
    2022/**
    2123 * SETTINGS
    … …  
    9395 * Measure..............The width of a line of text, in characters.
    9496 */
     97
    9598/* Categories 01 to 03 are the basics. */
     99
    96100/* Variables */
    97101:root {
     102
    98103    /* Font Family */
     104    --global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
     105    --global--font-secondary: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
     106
    99107    /* Font Size */
     108    --global--font-size-base: 1.25rem;
     109    --global--font-size-xs: 1rem;
     110    --global--font-size-sm: 1.125rem;
     111    --global--font-size-md: 1.25rem;
     112    --global--font-size-lg: 1.5rem;
     113    --global--font-size-xl: 2.25rem;
     114    --global--font-size-xxl: 4rem;
     115    --global--font-size-xxxl: 5rem;
     116    --global--font-size-page-title: var(--global--font-size-xxl);
     117    --global--letter-spacing: normal;
     118
    100119    /* Line Height */
     120    --global--line-height-body: 1.7;
     121    --global--line-height-heading: 1.3;
     122    --global--line-height-page-title: 1.1;
     123
    101124    /* Headings */
     125    --heading--font-family: var(--global--font-primary);
     126    --heading--font-size-h6: var(--global--font-size-xs);
     127    --heading--font-size-h5: var(--global--font-size-sm);
     128    --heading--font-size-h4: var(--global--font-size-lg);
     129    --heading--font-size-h3: calc(1.25 * var(--global--font-size-lg));
     130    --heading--font-size-h2: var(--global--font-size-xl);
     131    --heading--font-size-h1: var(--global--font-size-page-title);
     132    --heading--letter-spacing-h6: 0.05em;
     133    --heading--letter-spacing-h5: 0.05em;
     134    --heading--letter-spacing-h4: var(--global--letter-spacing);
     135    --heading--letter-spacing-h3: var(--global--letter-spacing);
     136    --heading--letter-spacing-h2: var(--global--letter-spacing);
     137    --heading--letter-spacing-h1: var(--global--letter-spacing);
     138    --heading--line-height-h6: var(--global--line-height-heading);
     139    --heading--line-height-h5: var(--global--line-height-heading);
     140    --heading--line-height-h4: var(--global--line-height-heading);
     141    --heading--line-height-h3: var(--global--line-height-heading);
     142    --heading--line-height-h2: var(--global--line-height-heading);
     143    --heading--line-height-h1: var(--global--line-height-page-title);
     144    --heading--font-weight: normal;
     145    --heading--font-weight-page-title: 300;
     146    --heading--font-weight-strong: 600;
     147
    102148    /* Block: Latest posts */
     149    --latest-posts--title-font-family: var(--heading--font-family);
     150    --latest-posts--title-font-size: var(--heading--font-size-h3);
     151    --latest-posts--description-font-family: var(--global--font-secondary);
     152    --latest-posts--description-font-size: var(--global--font-size-sm);
     153    --list--font-family: var(--global--font-secondary);
     154    --definition-term--font-family: var(--global--font-primary);
     155
    103156    /* Colors */
     157    --global--color-black: #000;
     158    --global--color-dark-gray: #28303d;
     159    --global--color-gray: #39414d;
     160    --global--color-light-gray: #f0f0f0;
     161    --global--color-green: #d1e4dd;
     162    --global--color-blue: #d1dfe4;
     163    --global--color-purple: #d1d1e4;
     164    --global--color-red: #e4d1d1;
     165    --global--color-orange: #e4dad1;
     166    --global--color-yellow: #eeeadd;
     167    --global--color-white: #fff;
     168    --global--color-white-50: rgba(255, 255, 255, 0.5);
     169    --global--color-white-90: rgba(255, 255, 255, 0.9);
     170    --global--color-primary: var(--global--color-dark-gray);
     171
    104172    /* Body text color, site title, footer text color. */
     173    --global--color-secondary: var(--global--color-gray);
     174
    105175    /* Headings */
     176    --global--color-primary-hover: var(--global--color-primary);
     177    --global--color-background: var(--global--color-green);
     178
    106179    /* Mint, default body background */
     180    --global--color-border: var(--global--color-primary);
     181
    107182    /* Used for borders (separators) */
     183
    108184    /* Spacing */
     185    --global--spacing-unit: 20px;
     186    --global--spacing-measure: unset;
     187    --global--spacing-horizontal: 25px;
     188    --global--spacing-vertical: 30px;
     189
    109190    /* Elevation */
     191    --global--elevation: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
     192
    110193    /* Forms */
     194    --form--font-family: var(--global--font-secondary);
     195    --form--font-size: var(--global--font-size-sm);
     196    --form--line-height: var(--global--line-height-body);
     197    --form--color-text: var(--global--color-dark-gray);
     198    --form--color-ranged: var(--global--color-secondary);
     199    --form--label-weight: 500;
     200    --form--border-color: var(--global--color-secondary);
     201    --form--border-width: 3px;
     202    --form--border-radius: 0;
     203    --form--spacing-unit: calc(0.5 * var(--global--spacing-unit));
     204
    111205    /* Cover block */
     206    --cover--height: calc(15 * var(--global--spacing-vertical));
     207    --cover--color-foreground: var(--global--color-white);
     208    --cover--color-background: var(--global--color-black);
     209
    112210    /* Buttons */
     211    --button--color-text: var(--global--color-background);
     212    --button--color-text-hover: var(--global--color-secondary);
     213    --button--color-text-active: var(--global--color-secondary);
     214    --button--color-background: var(--global--color-secondary);
     215    --button--color-background-active: var(--global--color-background);
     216    --button--font-family: var(--global--font-primary);
     217    --button--font-size: var(--global--font-size-base);
     218    --button--font-weight: 500;
     219    --button--line-height: 1.5;
     220    --button--border-width: 3px;
     221    --button--border-radius: 0;
     222    --button--padding-vertical: 15px;
     223    --button--padding-horizontal: calc(2 * var(--button--padding-vertical));
     224
    113225    /* entry */
     226    --entry-header--color: var(--global--color-primary);
     227    --entry-header--color-link: currentColor;
     228    --entry-header--color-hover: var(--global--color-primary-hover);
     229    --entry-header--color-focus: var(--global--color-secondary);
     230    --entry-header--font-size: var(--heading--font-size-h2);
     231    --entry-content--font-family: var(--global--font-secondary);
     232    --entry-author-bio--font-family: var(--heading--font-family);
     233    --entry-author-bio--font-size: var(--heading--font-size-h4);
     234
    114235    /* Header */
     236    --branding--color-text: var(--global--color-primary);
     237    --branding--color-link: var(--global--color-primary);
     238    --branding--color-link-hover: var(--global--color-secondary);
     239    --branding--title--font-family: var(--global--font-primary);
     240    --branding--title--font-size: var(--global--font-size-lg);
     241    --branding--title--font-size-mobile: var(--heading--font-size-h4);
     242    --branding--title--font-weight: normal;
     243    --branding--title--text-transform: uppercase;
     244    --branding--description--font-family: var(--global--font-secondary);
     245    --branding--description--font-size: var(--global--font-size-sm);
     246    --branding--description--font-family: var(--global--font-secondary);
     247    --branding--logo--max-width: 300px;
     248    --branding--logo--max-height: 100px;
     249    --branding--logo--max-width-mobile: 96px;
     250    --branding--logo--max-height-mobile: 96px;
     251
    115252    /* Main navigation */
     253    --primary-nav--font-family: var(--global--font-secondary);
     254    --primary-nav--font-family-mobile: var(--global--font-primary);
     255    --primary-nav--font-size: var(--global--font-size-md);
     256    --primary-nav--font-size-sub-menu: var(--global--font-size-xs);
     257    --primary-nav--font-size-mobile: var(--global--font-size-sm);
     258    --primary-nav--font-size-sub-menu-mobile: var(--global--font-size-sm);
     259    --primary-nav--font-size-button: var(--global--font-size-xs);
     260    --primary-nav--font-style: normal;
     261    --primary-nav--font-style-sub-menu-mobile: normal;
     262    --primary-nav--font-weight: normal;
     263    --primary-nav--font-weight-button: 500;
     264    --primary-nav--color-link: var(--global--color-primary);
     265    --primary-nav--color-link-hover: var(--global--color-primary-hover);
     266    --primary-nav--color-text: var(--global--color-primary);
     267    --primary-nav--padding: calc(0.66 * var(--global--spacing-unit));
     268    --primary-nav--border-color: var(--global--color-primary);
     269
    116270    /* Pagination */
     271    --pagination--color-text: var(--global--color-primary);
     272    --pagination--color-link-hover: var(--global--color-primary-hover);
     273    --pagination--font-family: var(--global--font-secondary);
     274    --pagination--font-size: var(--global--font-size-lg);
     275    --pagination--font-weight: normal;
     276    --pagination--font-weight-strong: 600;
     277
    117278    /* Footer */
     279    --footer--color-text: var(--global--color-primary);
     280    --footer--color-link: var(--global--color-primary);
     281    --footer--color-link-hover: var(--global--color-primary-hover);
     282    --footer--font-family: var(--global--font-primary);
     283    --footer--font-size: var(--global--font-size-sm);
     284
    118285    /* Block: Pull quote */
     286    --pullquote--font-family: var(--global--font-primary);
     287    --pullquote--font-size: var(--heading--font-size-h3);
     288    --pullquote--font-style: normal;
     289    --pullquote--letter-spacing: var(--heading--letter-spacing-h4);
     290    --pullquote--line-height: var(--global--line-height-heading);
     291    --pullquote--border-width: 3px;
     292    --pullquote--border-color: var(--global--color-primary);
     293    --pullquote--color-foreground: var(--global--color-primary);
     294    --pullquote--color-background: var(--global--color-background);
     295    --quote--font-family: var(--global--font-secondary);
     296    --quote--font-size: var(--global--font-size-md);
     297    --quote--font-size-large: var(--global--font-size-xl);
     298    --quote--font-style: normal;
     299    --quote--font-weight: 700;
     300    --quote--font-weight-strong: bolder;
     301    --quote--font-style-large: normal;
     302    --quote--font-style-cite: normal;
     303    --quote--line-height: var(--global--line-height-body);
     304    --quote--line-height-large: 1.35;
     305    --separator--border-color: var(--global--color-border);
     306    --separator--height: 1px;
     307
    119308    /* Block: Table */
     309    --table--stripes-border-color: var(--global--color-light-gray);
     310    --table--stripes-background-color: var(--global--color-light-gray);
     311    --table--has-background-text-color: var(--global--color-dark-gray);
     312
    120313    /* Widgets */
     314    --widget--line-height-list: 1.9;
     315    --widget--line-height-title: 1.4;
     316    --widget--font-weight-title: 700;
     317    --widget--spacing-menu: calc(0.66 * var(--global--spacing-unit));
     318
    121319    /* Admin-bar height */
     320    --global--admin-bar--height: 0;
     321}
     322
     323.admin-bar {
     324    --global--admin-bar--height: 32px;
     325}
     326@media only screen and (max-width: 782px) {
     327
     328    .admin-bar {
     329        --global--admin-bar--height: 46px;
     330    }
     331}
     332
     333@media only screen and (min-width: 652px) {
     334
     335    :root {
     336        --global--font-size-xl: 2.5rem;
     337        --global--font-size-xxl: 6rem;
     338        --global--font-size-xxxl: 9rem;
     339        --heading--font-size-h3: 2rem;
     340        --heading--font-size-h2: 3rem;
     341    }
    122342}
    123343
    124344/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
     345
    125346/* Document
    126347   ========================================================================== */
     348
    127349/**
    128350 * 1. Correct the line height in all browsers.
    … …  
    131353html {
    132354    line-height: 1.15;
     355
    133356    /* 1 */
    134357    -webkit-text-size-adjust: 100%;
     358
    135359    /* 2 */
    136360}
    … …  
    138362/* Sections
    139363   ========================================================================== */
     364
    140365/**
    141366 * Remove the margin in all browsers.
    … …  
    163388/* Grouping content
    164389   ========================================================================== */
     390
    165391/**
    166392 * 1. Add the correct box sizing in Firefox.
    … …  
    169395hr {
    170396    box-sizing: content-box;
     397
    171398    /* 1 */
    172399    height: 0;
     400
    173401    /* 1 */
    174402    overflow: visible;
     403
    175404    /* 2 */
    176405}
    … …  
    182411pre {
    183412    font-family: monospace;
     413
    184414    /* 1 */
    185415    font-size: 1em;
     416
    186417    /* 2 */
    187418}
    … …  
    189420/* Text-level semantics
    190421   ========================================================================== */
     422
    191423/**
    192424 * Remove the gray background on active links in IE 10.
    … …  
    203435abbr[title] {
    204436    border-bottom: none;
     437
    205438    /* 1 */
    206439    text-decoration: underline;
     440
    207441    /* 2 */
    208442    text-decoration-style: dotted;
     443
    209444    /* 2 */
    210445}
    … …  
    226461samp {
    227462    font-family: monospace;
     463
    228464    /* 1 */
    229465    font-size: 1em;
     466
    230467    /* 2 */
    231468}
    … …  
    260497/* Embedded content
    261498   ========================================================================== */
     499
    262500/**
    263501 * Remove the border on images inside links in IE 10.
    … …  
    269507/* Forms
    270508   ========================================================================== */
     509
    271510/**
    272511 * 1. Change the font styles in all browsers.
    … …  
    279518textarea {
    280519    font-family: inherit;
     520
    281521    /* 1 */
    282522    font-size: 100%;
     523
    283524    /* 1 */
    284525    line-height: 1.15;
     526
    285527    /* 1 */
    286528    margin: 0;
     529
    287530    /* 2 */
    288531}
    … …  
    294537button,
    295538input {
     539
    296540    /* 1 */
    297541    overflow: visible;
    … …  
    304548button,
    305549select {
     550
    306551    /* 1 */
    307552    text-transform: none;
    … …  
    312557 */
    313558button,
    314 [type="button"],
    315 [type="reset"],
    316 [type="submit"] {
     559[type=button],
     560[type=reset],
     561[type=submit] {
    317562    -webkit-appearance: button;
    318563}
    … …  
    322567 */
    323568button::-moz-focus-inner,
    324 [type="button"]::-moz-focus-inner,
    325 [type="reset"]::-moz-focus-inner,
    326 [type="submit"]::-moz-focus-inner {
     569[type=button]::-moz-focus-inner,
     570[type=reset]::-moz-focus-inner,
     571[type=submit]::-moz-focus-inner {
    327572    border-style: none;
    328573    padding: 0;
    … …  
    333578 */
    334579button:-moz-focusring,
    335 [type="button"]:-moz-focusring,
    336 [type="reset"]:-moz-focusring,
    337 [type="submit"]:-moz-focusring {
     580[type=button]:-moz-focusring,
     581[type=reset]:-moz-focusring,
     582[type=submit]:-moz-focusring {
    338583    outline: 1px dotted ButtonText;
    339584}
    … …  
    354599legend {
    355600    box-sizing: border-box;
     601
    356602    /* 1 */
    357603    color: inherit;
     604
    358605    /* 2 */
    359606    display: table;
     607
    360608    /* 1 */
    361609    max-width: 100%;
     610
    362611    /* 1 */
    363612    padding: 0;
     613
    364614    /* 3 */
    365615    white-space: normal;
     616
    366617    /* 1 */
    367618}
    … …  
    385636 * 2. Remove the padding in IE 10.
    386637 */
    387 [type="checkbox"],
    388 [type="radio"] {
     638[type=checkbox],
     639[type=radio] {
    389640    box-sizing: border-box;
     641
    390642    /* 1 */
    391643    padding: 0;
     644
    392645    /* 2 */
    393646}
    … …  
    396649 * Correct the cursor style of increment and decrement buttons in Chrome.
    397650 */
    398 [type="number"]::-webkit-inner-spin-button,
    399 [type="number"]::-webkit-outer-spin-button {
     651[type=number]::-webkit-inner-spin-button,
     652[type=number]::-webkit-outer-spin-button {
    400653    height: auto;
    401654}
    … …  
    405658 * 2. Correct the outline style in Safari.
    406659 */
    407 [type="search"] {
     660[type=search] {
    408661    -webkit-appearance: textfield;
     662
    409663    /* 1 */
    410664    outline-offset: -2px;
     665
    411666    /* 2 */
    412667}
    … …  
    415670 * Remove the inner padding in Chrome and Safari on macOS.
    416671 */
    417 [type="search"]::-webkit-search-decoration {
     672[type=search]::-webkit-search-decoration {
    418673    -webkit-appearance: none;
    419674}
    … …  
    425680::-webkit-file-upload-button {
    426681    -webkit-appearance: button;
     682
    427683    /* 1 */
    428684    font: inherit;
     685
    429686    /* 2 */
    430687}
    … …  
    432689/* Interactive
    433690   ========================================================================== */
     691
    434692/*
    435693 * Add the correct display in Edge, IE 10+, and Firefox.
    … …  
    448706/* Misc
    449707   ========================================================================== */
     708
    450709/**
    451710 * Add the correct display in IE 10+.
    … …  
    465724 * Repsonsive Styles
    466725 */
     726
    467727/**
    468728 * Required Variables
    469729 */
     730
    470731/**
    471732 * Root Media Query Variables
    472733 */
     734:root {
     735    --responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal) * 0.6);
     736    --responsive--aligndefault-width: calc(100vw - var(--responsive--spacing-horizontal));
     737    --responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal));
     738    --responsive--alignfull-width: 100%;
     739    --responsive--alignright-margin: var(--global--spacing-horizontal);
     740    --responsive--alignleft-margin: var(--global--spacing-horizontal);
     741}
     742
     743@media only screen and (min-width: 482px) {
     744
     745    :root {
     746        --responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), 610px);
     747        --responsive--alignwide-width: calc(100vw - 4 * var(--global--spacing-horizontal));
     748        --responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
     749        --responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
     750    }
     751}
     752@media only screen and (min-width: 822px) {
     753
     754    :root {
     755        --responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 610px);
     756        --responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px);
     757    }
     758}
    473759
    474760/**
    475761 * Extends
    476762 */
     763.post-thumbnail,
     764.entry-content .wp-audio-shortcode,
     765.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
     766*[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
    477767.default-max-width {
    478     max-width: calc(100vw - 30px);
     768    max-width: var(--responsive--aligndefault-width);
    479769    margin-left: auto;
    480770    margin-right: auto;
    481771}
    482 @media only screen and (min-width: 482px){
    483     .default-max-width{
    484     max-width: min(calc(100vw - 100px), 610px);
    485     }
    486 }
    487 @media only screen and (min-width: 822px){
    488     .default-max-width{
    489     max-width: min(calc(100vw - 200px), 610px);
    490     }
    491 }
    492 .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) {
    493     max-width: calc(100vw - 30px);
     772
     773.widget-area,
     774.pagination,
     775.comments-pagination,
     776.post-navigation,
     777.site-footer,
     778.site-header,
     779.alignwide,
     780.wide-max-width {
     781    max-width: var(--responsive--alignwide-width);
    494782    margin-left: auto;
    495783    margin-right: auto;
    496784}
    497 @media only screen and (min-width: 482px){
    498     .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce){
    499     max-width: min(calc(100vw - 100px), 610px);
    500     }
    501 }
    502 @media only screen and (min-width: 822px){
    503     .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce){
    504     max-width: min(calc(100vw - 200px), 610px);
    505     }
    506 }
    507 *[class*="inner-container"] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) {
    508     max-width: calc(100vw - 30px);
     785
     786.alignfull,
     787.wp-block-group .wp-block-group__inner-container > *.alignfull,
     788.full-max-width {
     789    max-width: var(--responsive--alignfull-width);
     790    width: var(--responsive--alignfull-width);
    509791    margin-left: auto;
    510792    margin-right: auto;
    511793}
    512 @media only screen and (min-width: 482px){
    513     *[class*="inner-container"] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce){
    514     max-width: min(calc(100vw - 100px), 610px);
    515     }
    516 }
    517 @media only screen and (min-width: 822px){
    518     *[class*="inner-container"] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce){
    519     max-width: min(calc(100vw - 200px), 610px);
    520     }
    521 }
    522 .entry-content .wp-audio-shortcode {
    523     max-width: calc(100vw - 30px);
    524     margin-left: auto;
    525     margin-right: auto;
    526 }
    527 @media only screen and (min-width: 482px){
    528     .entry-content .wp-audio-shortcode{
    529     max-width: min(calc(100vw - 100px), 610px);
    530     }
    531 }
    532 @media only screen and (min-width: 822px){
    533     .entry-content .wp-audio-shortcode{
    534     max-width: min(calc(100vw - 200px), 610px);
    535     }
    536 }
    537 .post-thumbnail {
    538     max-width: calc(100vw - 30px);
    539     margin-left: auto;
    540     margin-right: auto;
    541 }
    542 @media only screen and (min-width: 482px){
    543     .post-thumbnail{
    544     max-width: min(calc(100vw - 100px), 610px);
    545     }
    546 }
    547 @media only screen and (min-width: 822px){
    548     .post-thumbnail{
    549     max-width: min(calc(100vw - 200px), 610px);
    550     }
    551 }
    552 
    553 .wide-max-width {
    554     max-width: calc(100vw - 30px);
    555     margin-left: auto;
    556     margin-right: auto;
    557 }
    558 
    559 @media only screen and (min-width: 482px){
    560     .wide-max-width{
    561     max-width: calc(100vw - 100px);
    562     }
    563 }
    564 
    565 @media only screen and (min-width: 822px){
    566     .wide-max-width{
    567     max-width: min(calc(100vw - 200px), 1240px);
    568     }
    569 }
    570 
    571 .alignwide {
    572     max-width: calc(100vw - 30px);
    573     margin-left: auto;
    574     margin-right: auto;
    575 }
    576 
    577 @media only screen and (min-width: 482px){
    578     .alignwide{
    579     max-width: calc(100vw - 100px);
    580     }
    581 }
    582 
    583 @media only screen and (min-width: 822px){
    584     .alignwide{
    585     max-width: min(calc(100vw - 200px), 1240px);
    586     }
    587 }
    588 
    589 .site-header {
    590     max-width: calc(100vw - 30px);
    591     margin-left: auto;
    592     margin-right: auto;
    593 }
    594 
    595 @media only screen and (min-width: 482px){
    596     .site-header{
    597     max-width: calc(100vw - 100px);
    598     }
    599 }
    600 
    601 @media only screen and (min-width: 822px){
    602     .site-header{
    603     max-width: min(calc(100vw - 200px), 1240px);
    604     }
    605 }
    606 
    607 .site-footer {
    608     max-width: calc(100vw - 30px);
    609     margin-left: auto;
    610     margin-right: auto;
    611 }
    612 
    613 @media only screen and (min-width: 482px){
    614     .site-footer{
    615     max-width: calc(100vw - 100px);
    616     }
    617 }
    618 
    619 @media only screen and (min-width: 822px){
    620     .site-footer{
    621     max-width: min(calc(100vw - 200px), 1240px);
    622     }
    623 }
    624 
    625 .post-navigation {
    626     max-width: calc(100vw - 30px);
    627     margin-left: auto;
    628     margin-right: auto;
    629 }
    630 
    631 @media only screen and (min-width: 482px){
    632     .post-navigation{
    633     max-width: calc(100vw - 100px);
    634     }
    635 }
    636 
    637 @media only screen and (min-width: 822px){
    638     .post-navigation{
    639     max-width: min(calc(100vw - 200px), 1240px);
    640     }
    641 }
    642 
    643 .pagination {
    644     max-width: calc(100vw - 30px);
    645     margin-left: auto;
    646     margin-right: auto;
    647 }
    648 
    649 @media only screen and (min-width: 482px){
    650     .pagination{
    651     max-width: calc(100vw - 100px);
    652     }
    653 }
    654 
    655 @media only screen and (min-width: 822px){
    656     .pagination{
    657     max-width: min(calc(100vw - 200px), 1240px);
    658     }
    659 }
    660 
    661 .comments-pagination {
    662     max-width: calc(100vw - 30px);
    663     margin-left: auto;
    664     margin-right: auto;
    665 }
    666 
    667 @media only screen and (min-width: 482px){
    668     .comments-pagination{
    669     max-width: calc(100vw - 100px);
    670     }
    671 }
    672 
    673 @media only screen and (min-width: 822px){
    674     .comments-pagination{
    675     max-width: min(calc(100vw - 200px), 1240px);
    676     }
    677 }
    678 
    679 .widget-area {
    680     max-width: calc(100vw - 30px);
    681     margin-left: auto;
    682     margin-right: auto;
    683 }
    684 
    685 @media only screen and (min-width: 482px){
    686     .widget-area{
    687     max-width: calc(100vw - 100px);
    688     }
    689 }
    690 
    691 @media only screen and (min-width: 822px){
    692     .widget-area{
    693     max-width: min(calc(100vw - 200px), 1240px);
    694     }
    695 }
    696 
    697 .full-max-width {
    698     max-width: 100%;
    699     width: 100%;
    700     margin-left: auto;
    701     margin-right: auto;
    702 }
    703 
    704 .wp-block-group .wp-block-group__inner-container > *.alignfull {
    705     max-width: 100%;
    706     width: 100%;
    707     margin-left: auto;
    708     margin-right: auto;
    709 }
    710 
    711 .alignfull {
    712     max-width: 100%;
    713     width: 100%;
    714     margin-left: auto;
    715     margin-right: auto;
    716 }
    717794
    718795@media only screen and (min-width: 482px) {
     796
     797    .alignfull,
    719798    .full-max-width {
    720         max-width: 100%;
     799        max-width: var(--responsive--alignfull-width);
    721800        width: auto;
    722801        margin-left: auto;
    723802        margin-right: auto;
    724803    }
    725     .alignfull {
    726         max-width: 100%;
    727         width: auto;
    728         margin-left: auto;
    729         margin-right: auto;
    730     }
    731 }
    732 
    733 .alignwide [class*="inner-container"] > .alignwide {
     804}
     805
     806.entry-header .post-thumbnail,
     807.singular .post-thumbnail,
     808.alignfull [class*=inner-container] > .alignwide,
     809.alignwide [class*=inner-container] > .alignwide {
    734810    margin-left: auto;
    735811    margin-right: auto;
    736     width: calc(100vw - 30px);
    737     max-width: 100%;
    738 }
    739 
    740 @media only screen and (min-width: 482px){
    741     .alignwide [class*="inner-container"] > .alignwide{
    742     width: calc(100vw - 100px);
    743     }
    744 }
    745 
    746 @media only screen and (min-width: 822px){
    747     .alignwide [class*="inner-container"] > .alignwide{
    748     width: min(calc(100vw - 200px), 1240px);
    749     }
    750 }
    751 
    752 .alignfull [class*="inner-container"] > .alignwide {
    753     margin-left: auto;
    754     margin-right: auto;
    755     width: calc(100vw - 30px);
    756     max-width: 100%;
    757 }
    758 
    759 @media only screen and (min-width: 482px){
    760     .alignfull [class*="inner-container"] > .alignwide{
    761     width: calc(100vw - 100px);
    762     }
    763 }
    764 
    765 @media only screen and (min-width: 822px){
    766     .alignfull [class*="inner-container"] > .alignwide{
    767     width: min(calc(100vw - 200px), 1240px);
    768     }
    769 }
    770 
    771 .entry-header .post-thumbnail {
    772     margin-left: auto;
    773     margin-right: auto;
    774     width: calc(100vw - 30px);
    775     max-width: 100%;
    776 }
    777 
    778 @media only screen and (min-width: 482px){
    779     .entry-header .post-thumbnail{
    780     width: calc(100vw - 100px);
    781     }
    782 }
    783 
    784 @media only screen and (min-width: 822px){
    785     .entry-header .post-thumbnail{
    786     width: min(calc(100vw - 200px), 1240px);
    787     }
    788 }
    789 
    790 .singular .post-thumbnail {
    791     margin-left: auto;
    792     margin-right: auto;
    793     width: calc(100vw - 30px);
    794     max-width: 100%;
    795 }
    796 
    797 @media only screen and (min-width: 482px){
    798     .singular .post-thumbnail{
    799     width: calc(100vw - 100px);
    800     }
    801 }
    802 
    803 @media only screen and (min-width: 822px){
    804     .singular .post-thumbnail{
    805     width: min(calc(100vw - 200px), 1240px);
    806     }
     812    width: var(--responsive--alignwide-width);
     813    max-width: var(--responsive--alignfull-width);
    807814}
    808815
    809816@media only screen and (min-width: 482px) {
     817
    810818    .entry-content > .alignleft {
     819
    811820        /*rtl:ignore*/
    812         margin-left: calc(50vw - min(calc(100vw - 4 * 25px), 610px)*1);
     821        margin-left: var(--responsive--alignleft-margin);
     822
    813823        /*rtl:ignore*/
    814         margin-right: 25px;
    815     }
    816     @media only screen and (min-width: 482px){
    817         .entry-content > .alignleft{
    818         margin-left: calc(50vw - min(calc(100vw - 4 * 25px), 610px)*1);
    819         }
    820     }
    821     @media only screen and (min-width: 482px){
    822         .entry-content > .alignleft{
    823         margin-left: calc(50vw - min(calc(100vw - 4 * 25px), 610px)*1);
    824         }
    825     }
    826     @media only screen and (min-width: 822px){
    827         .entry-content > .alignleft{
    828         margin-left: calc(50vw - min(calc(100vw - 4 * 25px), 610px)*1);
    829         }
    830     }
    831 }
    832 
     824        margin-right: var(--global--spacing-horizontal);
     825    }
     826}
    833827@media only screen and (min-width: 482px) {
     828
    834829    .entry-content > .alignright {
     830
    835831        /*rtl:ignore*/
    836         margin-left: 25px;
     832        margin-left: var(--global--spacing-horizontal);
     833
    837834        /*rtl:ignore*/
    838         margin-right: calc(50vw - min(calc(100vw - 4 * 25px), 610px)*1);
    839     }
    840     @media only screen and (min-width: 482px){
    841         .entry-content > .alignright{
    842         margin-right: calc(50vw - min(calc(100vw - 4 * 25px), 610px)*1);
    843         }
    844     }
    845     @media only screen and (min-width: 482px){
    846         .entry-content > .alignright{
    847         margin-right: calc(50vw - min(calc(100vw - 4 * 25px), 610px)*1);
    848         }
    849     }
    850     @media only screen and (min-width: 822px){
    851         .entry-content > .alignright{
    852         margin-right: calc(50vw - min(calc(100vw - 4 * 25px), 610px)*1);
    853         }
     835        margin-right: var(--responsive--alignright-margin);
    854836    }
    855837}
    … …  
    863845 * - See: globals/_global-width-responsive.scss
    864846 */
     847
    865848/**
    866849 * Top Level Wrappers (header, main, footer)
    867850 * - Set vertical padding and horizontal margins
    868851 */
    869 .site-header {
    870     padding-top: 30px;
    871     padding-bottom: 30px;
     852.site-header,
     853.site-main,
     854.widget-area,
     855.site-footer {
     856    padding-top: var(--global--spacing-vertical);
     857    padding-bottom: var(--global--spacing-vertical);
    872858    margin-left: auto;
    873859    margin-right: auto;
    874860}
    875 .site-main {
    876     padding-top: 30px;
    877     padding-bottom: 30px;
    878     margin-left: auto;
    879     margin-right: auto;
    880 }
    881 .widget-area {
    882     padding-top: 30px;
    883     padding-bottom: 30px;
    884     margin-left: auto;
    885     margin-right: auto;
    886 }
    887 .site-footer {
    888     padding-top: 30px;
    889     padding-bottom: 30px;
    890     margin-left: auto;
    891     margin-right: auto;
    892 }
    893861
    894862.site-header {
    895     padding-top: 23px;
    896     padding-bottom: 60px;
    897 }
    898 
     863    padding-top: calc(0.75 * var(--global--spacing-vertical));
     864    padding-bottom: calc(2 * var(--global--spacing-vertical));
     865}
    899866@media only screen and (min-width: 482px) {
     867
    900868    .site-header {
    901         padding-bottom: 90px;
     869        padding-bottom: calc(3 * var(--global--spacing-vertical));
    902870    }
    903871}
    … …  
    908876 */
    909877.site-main > * {
    910     margin-top: 90px;
    911     margin-bottom: 90px;
     878    margin-top: calc(3 * var(--global--spacing-vertical));
     879    margin-bottom: calc(3 * var(--global--spacing-vertical));
    912880}
    913881
    … …  
    923891 * Set the default maximum responsive content-width
    924892 */
     893
    925894/**
    926895 * Set the wide maximum responsive content-width
    927896 */
     897
    928898/**
    929899 * Set the full maximum responsive content-width
    930900 */
     901
    931902/*
    932903 * Block & non-gutenberg content wrappers
    933904 * - Set margins
    934905 */
    935 .entry-header {
    936     margin-top: 30px;
     906.entry-header,
     907.post-thumbnail,
     908.entry-content,
     909.entry-footer,
     910.author-bio {
     911    margin-top: var(--global--spacing-vertical);
    937912    margin-right: auto;
    938     margin-bottom: 30px;
    939     margin-left: auto;
    940 }
    941 .post-thumbnail {
    942     margin-top: 30px;
    943     margin-right: auto;
    944     margin-bottom: 30px;
    945     margin-left: auto;
    946 }
    947 .entry-content {
    948     margin-top: 30px;
    949     margin-right: auto;
    950     margin-bottom: 30px;
    951     margin-left: auto;
    952 }
    953 .entry-footer {
    954     margin-top: 30px;
    955     margin-right: auto;
    956     margin-bottom: 30px;
    957     margin-left: auto;
    958 }
    959 .author-bio {
    960     margin-top: 30px;
    961     margin-right: auto;
    962     margin-bottom: 30px;
     913    margin-bottom: var(--global--spacing-vertical);
    963914    margin-left: auto;
    964915}
    … …  
    968919 * - Sets spacing-vertical margin logic
    969920 */
    970 .site-main > article > * {
    971     margin-top: 20px;
    972     margin-bottom: 20px;
    973 }
    974 .site-main > .not-found > * {
    975     margin-top: 20px;
    976     margin-bottom: 20px;
    977 }
    978 .entry-content > * {
    979     margin-top: 20px;
    980     margin-bottom: 20px;
    981 }
    982 [class*="inner-container"] > * {
    983     margin-top: 20px;
    984     margin-bottom: 20px;
    985 }
     921.site-main > article > *,
     922.site-main > .not-found > *,
     923.entry-content > *,
     924[class*=inner-container] > *,
    986925.wp-block-template-part > * {
    987     margin-top: 20px;
    988     margin-bottom: 20px;
    989 }
    990 
     926    margin-top: calc(0.666 * var(--global--spacing-vertical));
     927    margin-bottom: calc(0.666 * var(--global--spacing-vertical));
     928}
    991929@media only screen and (min-width: 482px) {
    992     .site-main > article > * {
    993         margin-top: 30px;
    994         margin-bottom: 30px;
    995     }
    996     .site-main > .not-found > * {
    997         margin-top: 30px;
    998         margin-bottom: 30px;
    999     }
    1000     .entry-content > * {
    1001         margin-top: 30px;
    1002         margin-bottom: 30px;
    1003     }
    1004     [class*="inner-container"] > * {
    1005         margin-top: 30px;
    1006         margin-bottom: 30px;
    1007     }
     930
     931    .site-main > article > *,
     932    .site-main > .not-found > *,
     933    .entry-content > *,
     934    [class*=inner-container] > *,
    1008935    .wp-block-template-part > * {
    1009         margin-top: 30px;
    1010         margin-bottom: 30px;
     936        margin-top: var(--global--spacing-vertical);
     937        margin-bottom: var(--global--spacing-vertical);
    1011938    }
    1012939}
    … …  
    1015942.site-main > .not-found > *:first-child,
    1016943.entry-content > *:first-child,
    1017 [class*="inner-container"] > *:first-child,
     944[class*=inner-container] > *:first-child,
    1018945.wp-block-template-part > *:first-child {
    1019946    margin-top: 0;
    … …  
    1023950.site-main > .not-found > *:last-child,
    1024951.entry-content > *:last-child,
    1025 [class*="inner-container"] > *:last-child,
     952[class*=inner-container] > *:last-child,
    1026953.wp-block-template-part > *:last-child {
    1027954    margin-bottom: 0;
    1028955}
    1029956
    1030 .site-footer > * {
    1031     margin-top: 20px;
    1032     margin-bottom: 20px;
    1033 }
    1034 
     957.site-footer > *,
    1035958.widget-area > * {
    1036     margin-top: 20px;
    1037     margin-bottom: 20px;
    1038 }
    1039 
     959    margin-top: calc(0.666 * var(--global--spacing-vertical));
     960    margin-bottom: calc(0.666 * var(--global--spacing-vertical));
     961}
    1040962@media only screen and (min-width: 482px) {
    1041     .site-footer > * {
    1042         margin-top: 30px;
    1043         margin-bottom: 30px;
    1044     }
     963
     964    .site-footer > *,
    1045965    .widget-area > * {
    1046         margin-top: 30px;
    1047         margin-bottom: 30px;
     966        margin-top: var(--global--spacing-vertical);
     967        margin-bottom: var(--global--spacing-vertical);
    1048968    }
    1049969}
    … …  
    1053973 * - Sets spacing-unit margins
    1054974 */
    1055 .entry-header > * {
    1056     margin-top: 20px;
    1057     margin-bottom: 20px;
    1058 }
    1059 .post-thumbnail > * {
    1060     margin-top: 20px;
    1061     margin-bottom: 20px;
    1062 }
    1063 .page-content > * {
    1064     margin-top: 20px;
    1065     margin-bottom: 20px;
    1066 }
    1067 .comment-content > * {
    1068     margin-top: 20px;
    1069     margin-bottom: 20px;
    1070 }
     975.entry-header > *,
     976.post-thumbnail > *,
     977.page-content > *,
     978.comment-content > *,
    1071979.widget > * {
    1072     margin-top: 20px;
    1073     margin-bottom: 20px;
     980    margin-top: var(--global--spacing-unit);
     981    margin-bottom: var(--global--spacing-unit);
    1074982}
    1075983
    … …  
    10951003 */
    10961004.entry-content > * {
     1005
    10971006    /* Reset alignleft and alignright margins after alignfull */
    10981007}
    10991008
    1100 .entry-content > *.alignleft, .entry-content > *.alignright,
     1009.entry-content > *.alignleft,
     1010.entry-content > *.alignright,
    11011011.entry-content > *.alignleft:first-child + *,
    1102 .entry-content > *.alignright:first-child + *, .entry-content > *.alignfull.has-background {
     1012.entry-content > *.alignright:first-child + *,
     1013.entry-content > *.alignfull.has-background {
    11031014    margin-top: 0;
    11041015}
    11051016
    1106 .entry-content > *:last-child, .entry-content > *.alignfull.has-background {
     1017.entry-content > *:last-child,
     1018.entry-content > *.alignfull.has-background {
    11071019    margin-bottom: 0;
    11081020}
    11091021
    1110 .entry-content > *.alignfull + .alignleft {
    1111     margin-top: 30px;
    1112 }
    1113 
     1022.entry-content > *.alignfull + .alignleft,
    11141023.entry-content > *.alignfull + .alignright {
    1115     margin-top: 30px;
     1024    margin-top: var(--global--spacing-vertical);
    11161025}
    11171026
    … …  
    11551064 */
    11561065html {
     1066
    11571067    /* Apply border-box across the entire page. */
    11581068    box-sizing: border-box;
    1159     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1160     line-height: 1.7;
     1069    font-family: var(--global--font-secondary);
     1070    line-height: var(--global--line-height-body);
    11611071}
    11621072
    … …  
    11641074 * Relax the definition a bit, to allow components to override it manually.
    11651075 */
    1166 *, *::before, *::after {
     1076*,
     1077*::before,
     1078*::after {
    11671079    box-sizing: inherit;
    11681080}
    11691081
    11701082body {
    1171     font-size: 1.25rem;
     1083    font-size: var(--global--font-size-base);
    11721084    font-weight: normal;
    1173     color: #28303d;
     1085    color: var(--global--color-primary);
    11741086    text-align: left;
    1175     background-color: #d1e4dd;
     1087    background-color: var(--global--color-background);
    11761088}
    11771089
    … …  
    12101122    padding: 0;
    12111123    position: relative;
    1212     margin: 30px 0 30px 25px;
     1124    margin: var(--global--spacing-vertical) 0 var(--global--spacing-vertical) var(--global--spacing-horizontal);
    12131125}
    12141126
    12151127blockquote > * {
    1216     margin-top: 20px;
    1217     margin-bottom: 20px;
     1128    margin-top: var(--global--spacing-unit);
     1129    margin-bottom: var(--global--spacing-unit);
    12181130}
    12191131
    … …  
    12271139
    12281140blockquote p {
    1229     letter-spacing: normal;
    1230     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1231     font-size: 1.25rem;
    1232     font-style: normal;
    1233     font-weight: 700;
    1234     line-height: 1.7;
    1235 }
    1236 
    1237 blockquote cite {
    1238     font-weight: normal;
    1239     color: #28303d;
    1240     font-size: 1rem;
    1241     letter-spacing: normal;
    1242 }
    1243 
     1141    letter-spacing: var(--heading--letter-spacing-h4);
     1142    font-family: var(--quote--font-family);
     1143    font-size: var(--quote--font-size);
     1144    font-style: var(--quote--font-style);
     1145    font-weight: var(--quote--font-weight);
     1146    line-height: var(--quote--line-height);
     1147}
     1148
     1149blockquote cite,
    12441150blockquote footer {
    12451151    font-weight: normal;
    1246     color: #28303d;
    1247     font-size: 1rem;
    1248     letter-spacing: normal;
    1249 }
    1250 
    1251 blockquote.alignleft, blockquote.alignright {
     1152    color: var(--global--color-primary);
     1153    font-size: var(--global--font-size-xs);
     1154    letter-spacing: var(--global--letter-spacing);
     1155}
     1156
     1157blockquote.alignleft,
     1158blockquote.alignright {
    12521159    padding-left: inherit;
    12531160}
    12541161
    1255 blockquote.alignleft p {
    1256     font-size: 1.125rem;
     1162blockquote.alignleft p,
     1163blockquote.alignright p {
     1164    font-size: var(--heading--font-size-h5);
    12571165    max-width: inherit;
    12581166    width: inherit;
    12591167}
    12601168
    1261 blockquote.alignright p {
    1262     font-size: 1.125rem;
    1263     max-width: inherit;
    1264     width: inherit;
    1265 }
    1266 
    1267 blockquote.alignleft cite {
    1268     font-size: 1rem;
    1269     letter-spacing: normal;
    1270 }
    1271 
    1272 blockquote.alignleft footer {
    1273     font-size: 1rem;
    1274     letter-spacing: normal;
    1275 }
    1276 
    1277 blockquote.alignright cite {
    1278     font-size: 1rem;
    1279     letter-spacing: normal;
    1280 }
    1281 
     1169blockquote.alignleft cite,
     1170blockquote.alignleft footer,
     1171blockquote.alignright cite,
    12821172blockquote.alignright footer {
    1283     font-size: 1rem;
    1284     letter-spacing: normal;
     1173    font-size: var(--global--font-size-xs);
     1174    letter-spacing: var(--global--letter-spacing);
    12851175}
    12861176
    12871177blockquote strong {
    1288     font-weight: normal;
     1178    font-weight: var(--quote--font-weight-strong);
    12891179}
    12901180
    12911181blockquote:before {
    1292     content: "\201C";
    1293     font-size: 1.25rem;
    1294     line-height: 1.7;
    1295     position: absolute;
    1296     left: -12px;
    1297 }
    1298 
    1299 blockquote .wp-block-quote__citation {
    1300     color: #28303d;
    1301     font-size: 1rem;
    1302     font-style: normal;
    1303 }
    1304 
    1305 blockquote cite {
    1306     color: #28303d;
    1307     font-size: 1rem;
    1308     font-style: normal;
    1309 }
    1310 
     1182    content: "“";
     1183    font-size: var(--quote--font-size);
     1184    line-height: var(--quote--line-height);
     1185}
     1186
     1187blockquote .wp-block-quote__citation,
     1188blockquote cite,
    13111189blockquote footer {
    1312     color: #28303d;
    1313     font-size: 1rem;
    1314     font-style: normal;
    1315 }
    1316 
     1190    color: var(--global--color-primary);
     1191    font-size: var(--global--font-size-xs);
     1192    font-style: var(--quote--font-style-cite);
     1193}
    13171194@media only screen and (max-width: 481px) {
     1195
    13181196    blockquote {
    1319         padding-left: 13px;
    1320     }
     1197        padding-left: calc(0.5 * var(--global--spacing-horizontal));
     1198    }
     1199
    13211200    blockquote:before {
    13221201        left: 0;
    … …  
    13241203}
    13251204
    1326 input[type="text"] {
    1327     border: 3px solid #39414d;
    1328     border-radius: 0;
    1329     color: #28303d;
    1330     line-height: 1.7;
    1331     padding: 10px;
     1205input[type=text],
     1206input[type=email],
     1207input[type=url],
     1208input[type=password],
     1209input[type=search],
     1210input[type=number],
     1211input[type=tel],
     1212input[type=date],
     1213input[type=month],