WordPress.org
Get WordPress

Make WordPress Core

Changeset 49728 for branches/5.6


Ignore:
Timestamp:
12/01/2020 07:25:43 PM (6 years ago)
Author:
desrosj
Message:

Twenty Twenty-One: Sync the latest changes for 5.6 RC2.

This will be the final sync from GitHub before placing that repository into read-only mode. All further changes should now flow entirely through Trac.

For a full list of changes since [49633], see ​https://github.com/WordPress/twentytwentyone/compare/1d5a895...53acd9b.

Props poena, luminuu, kjellr, ryelle, allancole, melchoyce, felipeelia, aljullu, kebbet, chaton666, Clorith, mkaz, ingereck, paaljoachim.
Reviewed by desrosj, SergeyBiryukov.
Merges [49726] to the 5.6 branch.
Fixes #51526.

Location:
branches/5.6
Files:
1 deleted
45 edited

Legend:

Unmodified
Added
Removed

  • branches/5.6

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

    r49633 r49728  
    99
    1010        /* 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);
    1113
    1214        /* 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;
    1325
    1426        /* Line Height */
     27        --global--line-height-body: 1.7;
     28        --global--line-height-heading: 1.3;
     29        --global--line-height-page-title: 1.1;
    1530
    1631        /* 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;
    1754
    1855        /* 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);
    1962
    2063        /* 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);
    2178
    2279        /* Body text color, site title, footer text color. */
     80        --global--color-secondary: var(--global--color-gray);
    2381
    2482        /* Headings */
     83        --global--color-primary-hover: var(--global--color-primary);
     84        --global--color-background: var(--global--color-green);
    2585
    2686        /* Mint, default body background */
     87        --global--color-border: var(--global--color-primary);
    2788
    2889        /* Used for borders (separators) */
    2990
    3091        /* Spacing */
     92        --global--spacing-unit: 20px;
     93        --global--spacing-measure: unset;
     94        --global--spacing-horizontal: 25px;
     95        --global--spacing-vertical: 30px;
    3196
    3297        /* Elevation */
     98        --global--elevation: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
    3399
    34100        /* 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));
    35111
    36112        /* 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);
    37116
    38117        /* 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));
    39131
    40132        /* 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);
    41141
    42142        /* 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;
    43158
    44159        /* 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);
    45176
    46177        /* 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;
    47184
    48185        /* 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);
    49191
    50192        /* 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;
    51214
    52215        /* 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);
    53219
    54220        /* 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));
    55225
    56226        /* 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        }
    57249}
    58250
    … …  
    68260 * Root Media Query Variables
    69261 */
     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}
    70287
    71288/**
    … …  
    73290 */
    74291.default-max-width {
    75         max-width: calc(100vw - 30px);
     292        max-width: var(--responsive--aligndefault-width);
    76293        margin-left: auto;
    77294        margin-right: auto;
    78295}
    79 @media only screen and (min-width: 482px) {
    80 
    81         .default-max-width {
    82                 max-width: min(calc(100vw - 100px), 610px);
    83         }
    84 }
    85 @media only screen and (min-width: 822px) {
    86 
    87         .default-max-width {
    88                 max-width: min(calc(100vw - 200px), 610px);
    89         }
    90 }
    91296
    92297.wide-max-width {
    93         max-width: calc(100vw - 30px);
     298        max-width: var(--responsive--alignwide-width);
    94299        margin-left: auto;
    95300        margin-right: auto;
    … …  
    98303@media only screen and (min-width: 482px) {
    99304
    100         .wide-max-width {
    101                 max-width: calc(100vw - 100px);
    102         }
    103 }
    104 
    105 @media only screen and (min-width: 822px) {
    106 
    107         .wide-max-width {
    108                 max-width: min(calc(100vw - 200px), 1240px);
    109         }
    110 }
    111 
    112 @media only screen and (min-width: 482px) {
    113 
    114305        .full-max-width {
    115                 max-width: 100%;
     306                max-width: var(--responsive--alignfull-width);
    116307                width: auto;
    117308                margin-left: auto;
    … …  
    123314        padding: 0;
    124315        position: relative;
    125         margin: 30px 0 30px 25px;
     316        margin: var(--global--spacing-vertical) 0 var(--global--spacing-vertical) var(--global--spacing-horizontal);
    126317}
    127318
    128319blockquote > * {
    129         margin-top: 20px;
    130         margin-bottom: 20px;
     320        margin-top: var(--global--spacing-unit);
     321        margin-bottom: var(--global--spacing-unit);
    131322}
    132323
    … …  
    140331
    141332blockquote p {
    142         letter-spacing: normal;
    143         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    144         font-size: 1.25rem;
    145         font-style: normal;
    146         font-weight: 700;
    147         line-height: 1.7;
    148 }
    149 
    150 blockquote cite {
    151         font-weight: normal;
    152         color: #28303d;
    153         font-size: 1rem;
    154         letter-spacing: normal;
    155 }
    156 
     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,
    157342blockquote footer {
    158343        font-weight: normal;
    159         color: #28303d;
    160         font-size: 1rem;
    161         letter-spacing: normal;
     344        color: var(--global--color-primary);
     345        font-size: var(--global--font-size-xs);
     346        letter-spacing: var(--global--letter-spacing);
    162347}
    163348
    … …  
    167352}
    168353
    169 blockquote.alignleft p {
    170         font-size: 1.125rem;
     354blockquote.alignleft p,
     355blockquote.alignright p {
     356        font-size: var(--heading--font-size-h5);
    171357        max-width: inherit;
    172358        width: inherit;
    173359}
    174360
    175 blockquote.alignright p {
    176         font-size: 1.125rem;
    177         max-width: inherit;
    178         width: inherit;
    179 }
    180 
    181 blockquote.alignleft cite {
    182         font-size: 1rem;
    183         letter-spacing: normal;
    184 }
    185 
    186 blockquote.alignleft footer {
    187         font-size: 1rem;
    188         letter-spacing: normal;
    189 }
    190 
    191 blockquote.alignright cite {
    192         font-size: 1rem;
    193         letter-spacing: normal;
    194 }
    195 
     361blockquote.alignleft cite,
     362blockquote.alignleft footer,
     363blockquote.alignright cite,
    196364blockquote.alignright footer {
    197         font-size: 1rem;
    198         letter-spacing: normal;
     365        font-size: var(--global--font-size-xs);
     366        letter-spacing: var(--global--letter-spacing);
    199367}
    200368
    201369blockquote strong {
    202         font-weight: bolder;
     370        font-weight: var(--quote--font-weight-strong);
    203371}
    204372
    205373blockquote:before {
    206374        content: "“";
    207         font-size: 1.25rem;
    208         line-height: 1.7;
    209 }
    210 
    211 blockquote .wp-block-quote__citation {
    212         color: #28303d;
    213         font-size: 1rem;
    214         font-style: normal;
    215 }
    216 
    217 blockquote cite {
    218         color: #28303d;
    219         font-size: 1rem;
    220         font-style: normal;
    221 }
    222 
     375        font-size: var(--quote--font-size);
     376        line-height: var(--quote--line-height);
     377        position: absolute;
     378        left: calc(-0.5 * var(--global--spacing-horizontal));
     379}
     380
     381blockquote .wp-block-quote__citation,
     382blockquote cite,
    223383blockquote footer {
    224         color: #28303d;
    225         font-size: 1rem;
    226         font-style: normal;
     384        color: var(--global--color-primary);
     385        font-size: var(--global--font-size-xs);
     386        font-style: var(--quote--font-style-cite);
    227387}
    228388@media only screen and (max-width: 481px) {
    229389
    230390        blockquote {
    231                 padding-left: 13px;
     391                padding-left: calc(0.5 * var(--global--spacing-horizontal));
    232392        }
    233393
    … …  
    257417
    258418/* Media captions */
    259 figcaption {
     419figcaption,
     420.wp-caption,
     421.wp-caption-text,
     422.wp-block-embed figcaption {
    260423        color: currentColor;
    261         font-size: 1rem;
    262         line-height: 1.7;
    263         margin-top: 10px;
    264         margin-bottom: 20px;
    265         text-align: center;
    266 }
    267 
    268 .wp-caption {
    269         color: currentColor;
    270         font-size: 1rem;
    271         line-height: 1.7;
    272         margin-top: 10px;
    273         margin-bottom: 20px;
    274         text-align: center;
    275 }
    276 
    277 .wp-caption-text {
    278         color: currentColor;
    279         font-size: 1rem;
    280         line-height: 1.7;
    281         margin-top: 10px;
    282         margin-bottom: 20px;
     424        font-size: var(--global--font-size-xs);
     425        line-height: var(--global--line-height-body);
     426        margin-top: calc(0.5 * var(--global--spacing-unit));
     427        margin-bottom: var(--global--spacing-unit);
    283428        text-align: center;
    284429}
    … …  
    289434.alignright .wp-caption,
    290435.alignleft .wp-caption-text,
    291 .alignright .wp-caption-text {
     436.alignright .wp-caption-text,
     437.alignleft .wp-block-embed figcaption,
     438.alignright .wp-block-embed figcaption {
    292439        margin-bottom: 0;
    293440}
    … …  
    304451
    305452select {
    306         border: 3px solid #39414d;
    307         border-radius: 0;
    308         color: #28303d;
    309         font-size: 1.125rem;
     453        border: var(--form--border-width) solid var(--form--border-color);
     454        border-radius: var(--form--border-radius);
     455        color: var(--form--color-text);
     456        font-size: var(--form--font-size);
    310457        -moz-appearance: none;
    311458        -webkit-appearance: none;
    312459        appearance: none;
    313         padding: 10px 30px 10px 10px;
    314         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;
    315         background-position: right 10px top 60%;
     460        padding: var(--form--spacing-unit) calc(3 * var(--form--spacing-unit)) var(--form--spacing-unit) var(--form--spacing-unit);
     461        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;
     462        background-position: right var(--form--spacing-unit) top 60%;
    316463}
    317464
    … …  
    323470a {
    324471        cursor: pointer;
    325         color: #28303d;
     472        color: var(--wp--style--color--link, var(--global--color-primary));
    326473        text-underline-offset: 3px;
    327474        text-decoration-skip-ink: all;
    … …  
    333480}
    334481
    335 .site a:focus {
     482.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
    336483
    337484        /* Only visible in Windows High Contrast mode */
    338485        outline: 2px solid transparent;
     486        text-decoration: underline 1px dotted currentColor;
     487        text-decoration-skip-ink: none;
    339488        background: rgba(255, 255, 255, 0.9);
    340489}
    341490
    342 .is-dark-theme .site a:focus {
    343         color: #d1e4dd;
    344 }
    345 
    346 .is-dark-theme .site a:focus .meta-nav {
    347         color: #d1e4dd;
    348 }
    349 
    350 .has-background-white .site a:focus {
     491.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),
     492.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
     493        color: var(--wp--style--color--link, var(--global--color-background));
     494}
     495
     496.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
    351497        background: rgba(0, 0, 0, 0.9);
    352         color: #fff;
    353 }
    354 
    355 .has-background-white .site a:focus .meta-nav {
    356         color: #fff;
    357 }
    358 
    359 .site a:focus.skip-link {
     498        color: var(--wp--style--color--link, var(--global--color-white));
     499}
     500
     501.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
     502        color: var(--wp--style--color--link, var(--global--color-white));
     503}
     504
     505.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link {
    360506
    361507        /* Only visible in Windows High Contrast mode */
    … …  
    364510}
    365511
    366 .site a:focus.skip-link:focus {
     512.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link:focus {
    367513        color: #21759b;
    368514        background-color: #f1f1f1;
    369515}
    370516
    371 .site a:focus img {
    372         outline: 2px dotted #28303d;
    373 }
    374 
    375 .has-background:not(.has-background-background-color) .has-link-color a {
    376         color: #28303d;
    377 }
    378 
    379 .has-background:not(.has-background-background-color).has-link-color a {
    380         color: #28303d;
     517.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img {
     518        outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary));
     519}
     520
     521.has-background .has-link-color a,
     522.has-background.has-link-color a {
     523        color: var(--wp--style--color--link, var(--global--color-primary));
    381524}
    382525
    383526.wp-block-button__link {
    384         line-height: 1.5;
    385         color: #d1e4dd;
     527        line-height: var(--button--line-height);
     528        color: var(--button--color-text);
    386529        cursor: pointer;
    387         font-weight: 500;
    388         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    389         font-size: 1.25rem;
    390         background-color: #39414d;
    391         border-radius: 0;
    392         border: 3px solid #39414d;
     530        font-weight: var(--button--font-weight);
     531        font-family: var(--button--font-family);
     532        font-size: var(--button--font-size);
     533        background-color: var(--button--color-background);
     534        border-radius: var(--button--border-radius);
     535        border: var(--button--border-width) solid var(--button--color-background);
    393536        text-decoration: none;
    394         padding: 15px 30px;
    395 }
    396 
    397 .wp-block-button__link:before,
    398 .wp-block-button__link:after {
    399         content: "";
    400         display: block;
    401         height: 0;
    402         width: 0;
    403 }
    404 
    405 .wp-block-button__link:before {
    406         margin-bottom: -calc(1em - 0);
    407 }
    408 
    409 .wp-block-button__link:after {
    410         margin-top: -calc(1em - 0);
     537        padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    411538}
    412539
    … …  
    418545
    419546.is-dark-theme .wp-block-button__link:focus {
    420         color: #39414d;
     547        color: var(--button--color-background);
    421548}
    422549
    423550.wp-block-button__link:focus:not(.has-background) {
    424         color: #39414d;
     551        color: var(--button--color-text-hover);
    425552}
    426553
    427554.wp-block-button__link:disabled {
    428         background-color: rgba(255, 255, 255, 0.5);
    429         border-color: rgba(255, 255, 255, 0.5);
    430         color: #39414d;
     555        background-color: var(--global--color-white-50);
     556        border-color: var(--global--color-white-50);
     557        color: var(--button--color-text-active);
    431558}
    432559
    … …  
    440567
    441568[data-block].wp-block-buttons .wp-block-button:first-child {
    442         margin-top: 30px;
     569        margin-top: var(--global--spacing-vertical);
    443570}
    444571
    445572[data-block].wp-block-buttons .wp-block-button:last-child {
    446         margin-bottom: 30px;
     573        margin-bottom: var(--global--spacing-vertical);
    447574}
    448575
    449576.wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
    450         color: #39414d !important;
     577        color: var(--button--color-text-active) !important;
    451578        background: transparent !important;
    452         border-color: #39414d;
     579        border-color: var(--button--color-background);
    453580}
    454581
    455582.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    456         color: #39414d !important;
     583        color: var(--button--color-text-hover) !important;
    457584        background: transparent !important;
    458         border-color: #39414d;
     585        border-color: var(--button--color-background);
    459586}
    460587
    461588.wp-block-button.is-style-outline .wp-block-button__link {
    462         color: #39414d;
     589        color: var(--button--color-background);
    463590        background: transparent;
    464         border: 3px solid currentColor;
    465         padding: 15px 30px;
    466 }
    467 
    468 .wp-block-button.is-style-outline .wp-block-button__link:active {
    469         background-color: #39414d;
    470         color: #d1e4dd;
    471         border-color: #39414d;
    472 }
    473 
     591        border: var(--button--border-width) solid currentColor;
     592        padding: var(--button--padding-vertical) var(--button--padding-horizontal);
     593}
     594
     595.wp-block-button.is-style-outline .wp-block-button__link:active,
    474596.wp-block-button.is-style-outline .wp-block-button__link:hover {
    475         background-color: #39414d;
    476         color: #d1e4dd;
    477         border-color: #39414d;
     597        background-color: var(--button--color-background);
     598        color: var(--button--color-text);
     599        border-color: var(--button--color-background);
    478600}
    479601
    480602.wp-block-button.is-style-outline .wp-block-button__link.has-background {
    481         border-color: #39414d;
    482 }
    483 
    484 .wp-block-button.is-style-outline .wp-block-button__link.has-background:active {
    485         background-color: #39414d !important;
    486 }
    487 
     603        border-color: var(--button--color-background);
     604}
     605
     606.wp-block-button.is-style-outline .wp-block-button__link.has-background:active,
    488607.wp-block-button.is-style-outline .wp-block-button__link.has-background:hover {
    489         background-color: #39414d !important;
     608        background-color: var(--button--color-background) !important;
    490609}
    491610
    492611.wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) {
    493         color: #28303d;
    494 }
    495 
    496 .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color) {
    497         color: #fff;
    498 }
    499 
    500 .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color) {
    501         color: #fff;
    502 }
    503 
     612        color: var(--global--color-dark-gray);
     613}
     614
     615.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color),
     616.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color),
    504617.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-black-background-color:not(.has-text-color) {
    505         color: #fff;
    506 }
    507 
    508 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-white-background-color {
    509         color: #28303d;
    510 }
    511 
    512 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-green-background-color {
    513         color: #28303d;
    514 }
    515 
    516 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-blue-background-color {
    517         color: #28303d;
    518 }
    519 
    520 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-purple-background-color {
    521         color: #28303d;
    522 }
    523 
    524 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-red-background-color {
    525         color: #28303d;
    526 }
    527 
    528 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-orange-background-color {
    529         color: #28303d;
    530 }
    531 
     618        color: var(--global--color-white);
     619}
     620
     621.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-white-background-color,
     622.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-green-background-color,
     623.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-blue-background-color,
     624.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-purple-background-color,
     625.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-red-background-color,
     626.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-orange-background-color,
    532627.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-yellow-background-color {
    533         color: #28303d;
     628        color: var(--global--color-dark-gray);
    534629}
    535630
    … …  
    538633}
    539634
    540 .wp-block-button.is-style-outline .wp-block-button__link.has-text-color:active {
    541         color: #d1e4dd !important;
    542         border-color: #39414d;
    543 }
    544 
     635.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:active,
    545636.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:hover {
    546         color: #d1e4dd !important;
    547         border-color: #39414d;
     637        color: var(--button--color-text) !important;
     638        border-color: var(--button--color-background);
    548639}
    549640
    … …  
    558649
    559650.wp-block-code code {
    560         font-size: 1rem;
     651        font-size: var(--global--font-size-xs);
    561652        white-space: pre !important;
    562653        overflow-x: auto;
    … …  
    564655
    565656.wp-block-code {
    566         border-color: #28303d;
     657        border-color: var(--global--color-border);
    567658        border-radius: 0;
    568659        border-style: solid;
    569660        border-width: 0.1rem;
    570         padding: 20px;
     661        padding: var(--global--spacing-unit);
    571662        color: currentColor;
    572663}
    573664
    574 .wp-block-cover {
    575         background-color: #000;
    576         min-height: 450px;
    577         margin-top: inherit;
    578         margin-bottom: inherit;
    579 }
    580 
     665.wp-block-cover,
    581666.wp-block-cover-image {
    582         background-color: #000;
    583         min-height: 450px;
     667        background-color: var(--cover--color-background);
     668        min-height: var(--cover--height);
    584669        margin-top: inherit;
    585670        margin-bottom: inherit;
    … …  
    594679[data-align=full] .wp-block-cover-image {
    595680        margin-top: 0;
     681        margin-bottom: 0;
     682}
     683
     684.wp-block-cover > .wp-block-cover__inner-container > *:first-child,
     685.wp-block-cover-image > .wp-block-cover__inner-container > *:first-child {
     686        margin-top: 0;
     687}
     688
     689.wp-block-cover > .wp-block-cover__inner-container > *:last-child:not(.block-list-appender),
     690.wp-block-cover-image > .wp-block-cover__inner-container > *:last-child:not(.block-list-appender) {
     691        margin-bottom: 0;
     692}
     693
     694.wp-block-cover.has-child-selected > .wp-block-cover__inner-container > *:nth-last-child(2),
     695.wp-block-cover.is-selected > .wp-block-cover__inner-container > *:nth-last-child(2),
     696.wp-block-cover-image.has-child-selected > .wp-block-cover__inner-container > *:nth-last-child(2),
     697.wp-block-cover-image.is-selected > .wp-block-cover__inner-container > *:nth-last-child(2) {
    596698        margin-bottom: 0;
    597699}
    … …  
    619721}
    620722
    621 .wp-block-cover .wp-block-cover__inner-container .has-link-color a {
    622         color: #28303d;
    623 }
    624 
    625 .wp-block-cover .wp-block-cover-image-text .has-link-color a {
    626         color: #28303d;
    627 }
    628 
    629 .wp-block-cover .wp-block-cover-text .has-link-color a {
    630         color: #28303d;
    631 }
    632 
    633 .wp-block-cover .block-editor-block-list__block .has-link-color a {
    634         color: #28303d;
    635 }
    636 
    637 .wp-block-cover-image .wp-block-cover__inner-container .has-link-color a {
    638         color: #28303d;
    639 }
    640 
    641 .wp-block-cover-image .wp-block-cover-image-text .has-link-color a {
    642         color: #28303d;
    643 }
    644 
    645 .wp-block-cover-image .wp-block-cover-text .has-link-color a {
    646         color: #28303d;
    647 }
    648 
     723.wp-block-cover .wp-block-cover__inner-container .has-link-color a,
     724.wp-block-cover .wp-block-cover-image-text .has-link-color a,
     725.wp-block-cover .wp-block-cover-text .has-link-color a,
     726.wp-block-cover .block-editor-block-list__block .has-link-color a,
     727.wp-block-cover-image .wp-block-cover__inner-container .has-link-color a,
     728.wp-block-cover-image .wp-block-cover-image-text .has-link-color a,
     729.wp-block-cover-image .wp-block-cover-text .has-link-color a,
    649730.wp-block-cover-image .block-editor-block-list__block .has-link-color a {
    650         color: #28303d;
    651 }
    652 
    653 .wp-block-cover:not([class*=background-color]) .wp-block-cover__inner-container {
    654         color: #fff;
    655 }
    656 
    657 .wp-block-cover:not([class*=background-color]) .wp-block-cover-image-text {
    658         color: #fff;
    659 }
    660 
    661 .wp-block-cover:not([class*=background-color]) .wp-block-cover-text {
    662         color: #fff;
    663 }
    664 
    665 .wp-block-cover:not([class*=background-color]) .block-editor-block-list__block {
    666         color: #fff;
    667 }
    668 
    669 .wp-block-cover-image:not([class*=background-color]) .wp-block-cover__inner-container {
    670         color: #fff;
    671 }
    672 
    673 .wp-block-cover-image:not([class*=background-color]) .wp-block-cover-image-text {
    674         color: #fff;
    675 }
    676 
    677 .wp-block-cover-image:not([class*=background-color]) .wp-block-cover-text {
    678         color: #fff;
    679 }
    680 
     731        color: var(--wp--style--color--link, var(--global--color-primary));
     732}
     733
     734.wp-block-cover:not([class*=background-color]) .wp-block-cover__inner-container,
     735.wp-block-cover:not([class*=background-color]) .wp-block-cover-image-text,
     736.wp-block-cover:not([class*=background-color]) .wp-block-cover-text,
     737.wp-block-cover:not([class*=background-color]) .block-editor-block-list__block,
     738.wp-block-cover-image:not([class*=background-color]) .wp-block-cover__inner-container,
     739.wp-block-cover-image:not([class*=background-color]) .wp-block-cover-image-text,
     740.wp-block-cover-image:not([class*=background-color]) .wp-block-cover-text,
    681741.wp-block-cover-image:not([class*=background-color]) .block-editor-block-list__block {
    682         color: #fff;
    683 }
    684 
    685 .wp-block-cover h2 {
    686         font-size: 2.25rem;
    687         letter-spacing: normal;
    688         line-height: 1.3;
     742        color: var(--cover--color-foreground);
     743}
     744
     745.wp-block-cover h2,
     746.wp-block-cover-image h2 {
     747        font-size: var(--heading--font-size-h2);
     748        letter-spacing: var(--heading--letter-spacing-h2);
     749        line-height: var(--heading--line-height-h2);
    689750        padding: 0;
    690751        max-width: inherit;
    691752        text-align: inherit;
    692753}
    693 @media only screen and (min-width: 652px) {
    694 
    695         .wp-block-cover h2 {
    696                 font-size: 3rem;
    697         }
    698 }
    699 @media only screen and (min-width: 652px) {
    700 
    701         .wp-block-cover h2 {
    702                 font-size: 3rem;
    703         }
    704 }
    705 
    706 .wp-block-cover-image h2 {
    707         font-size: 2.25rem;
    708         letter-spacing: normal;
    709         line-height: 1.3;
    710         padding: 0;
    711         max-width: inherit;
    712         text-align: inherit;
    713 }
    714 @media only screen and (min-width: 652px) {
    715 
    716         .wp-block-cover-image h2 {
    717                 font-size: 3rem;
    718         }
    719 }
    720 @media only screen and (min-width: 652px) {
    721 
    722         .wp-block-cover-image h2 {
    723                 font-size: 3rem;
    724         }
    725 }
    726754
    727755.wp-block-cover h2.has-text-align-left,
    … …  
    740768}
    741769
    742 .wp-block-cover.is-style-twentytwentyone-border {
    743         border: 3px solid #28303d;
    744 }
    745 
     770.wp-block-cover.is-style-twentytwentyone-border,
    746771.wp-block-cover-image.is-style-twentytwentyone-border {
    747         border: 3px solid #28303d;
     772        border: calc(3 * var(--separator--height)) solid var(--global--color-border);
    748773}
    749774
    … …  
    756781        max-width: inherit;
    757782}
     783
     784.wp-block-columns > .wp-block-column > *:first-child {
     785        margin-top: 0;
     786}
     787
     788.wp-block-columns > .wp-block-column > *:last-child:not(.block-list-appender) {
     789        margin-bottom: 0;
     790}
     791
     792.wp-block-columns.has-child-selected > .wp-block-column > *:nth-last-child(2),
     793.wp-block-columns.is-selected > .wp-block-column > *:nth-last-child(2) {
     794        margin-bottom: 0;
     795}
    758796@media only screen and (min-width: 652px) {
    759797
    760798        .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) {
    761                 margin-left: -50px;
    762                 margin-top: 63px;
     799                margin-left: calc(-2 * var(--global--spacing-horizontal));
     800                margin-top: calc(2.5 * var(--global--spacing-horizontal));
    763801                z-index: 2;
    764802        }
    765803
    766         .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > p:not(.has-background) {
    767                 background-color: #d1e4dd;
    768                 padding: 20px;
    769         }
    770 
    771         .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h1:not(.has-background) {
    772                 background-color: #d1e4dd;
    773                 padding: 20px;
    774         }
    775 
    776         .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h2:not(.has-background) {
    777                 background-color: #d1e4dd;
    778                 padding: 20px;
    779         }
    780 
    781         .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h3:not(.has-background) {
    782                 background-color: #d1e4dd;
    783                 padding: 20px;
    784         }
    785 
    786         .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h4:not(.has-background) {
    787                 background-color: #d1e4dd;
    788                 padding: 20px;
    789         }
    790 
    791         .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h5:not(.has-background) {
    792                 background-color: #d1e4dd;
    793                 padding: 20px;
    794         }
    795 
    796         .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h6:not(.has-background) {
    797                 background-color: #d1e4dd;
    798                 padding: 20px;
    799         }
    800 
    801         .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background) {
    802                 background-color: #d1e4dd;
    803                 padding: 20px;
    804         }
    805 
     804        .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > p:not(.has-background),
     805        .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h1:not(.has-background),
     806        .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h2:not(.has-background),
     807        .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h3:not(.has-background),
     808        .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h4:not(.has-background),
     809        .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h5:not(.has-background),
     810        .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h6:not(.has-background),
     811        .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background),
     812        .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background),
     813        .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > pre:not(.has-background) {
     814                background-color: var(--global--color-background);
     815                padding: var(--global--spacing-unit);
     816        }
     817
     818        .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background),
    806819        .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background) {
    807                 background-color: #d1e4dd;
    808                 padding: 20px;
    809         }
    810 
    811         .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > pre:not(.has-background) {
    812                 background-color: #d1e4dd;
    813                 padding: 20px;
    814         }
    815 
    816         .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background) {
    817                 padding-left: 50px;
    818         }
    819 
    820         .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background) {
    821                 padding-left: 50px;
     820                padding-left: calc(2 * var(--global--spacing-horizontal));
    822821        }
    823822
    … …  
    827826}
    828827
    829 .wp-block[data-align=full] .wp-block-columns p:not(.has-background) {
    830         padding-left: 20px;
    831         padding-right: 20px;
    832 }
    833 
    834 .wp-block[data-align=full] .wp-block-columns h1:not(.has-background) {
    835         padding-left: 20px;
    836         padding-right: 20px;
    837 }
    838 
    839 .wp-block[data-align=full] .wp-block-columns h2:not(.has-background) {
    840         padding-left: 20px;
    841         padding-right: 20px;
    842 }
    843 
    844 .wp-block[data-align=full] .wp-block-columns h3:not(.has-background) {
    845         padding-left: 20px;
    846         padding-right: 20px;
    847 }
    848 
    849 .wp-block[data-align=full] .wp-block-columns h4:not(.has-background) {
    850         padding-left: 20px;
    851         padding-right: 20px;
    852 }
    853 
    854 .wp-block[data-align=full] .wp-block-columns h5:not(.has-background) {
    855         padding-left: 20px;
    856         padding-right: 20px;
    857 }
    858 
    859 .wp-block[data-align=full] .wp-block-columns h6:not(.has-background) {
    860         padding-left: 20px;
    861         padding-right: 20px;
     828.wp-block[data-align=full] > .wp-block-columns p:not(.has-background),
     829.wp-block[data-align=full] > .wp-block-columns h1:not(.has-background),
     830.wp-block[data-align=full] > .wp-block-columns h2:not(.has-background),
     831.wp-block[data-align=full] > .wp-block-columns h3:not(.has-background),
     832.wp-block[data-align=full] > .wp-block-columns h4:not(.has-background),
     833.wp-block[data-align=full] > .wp-block-columns h5:not(.has-background),
     834.wp-block[data-align=full] > .wp-block-columns h6:not(.has-background) {
     835        padding-left: var(--global--spacing-unit);
     836        padding-right: var(--global--spacing-unit);
    862837}
    863838
    … …  
    874849
    875850.wp-block-file .wp-block-file__button {
    876         line-height: 1.5;
    877         color: #d1e4dd;
     851        line-height: var(--button--line-height);
     852        color: var(--button--color-text);
    878853        cursor: pointer;
    879         font-weight: 500;
    880         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    881         font-size: 1.25rem;
    882         background-color: #39414d;
    883         border-radius: 0;
    884         border: 3px solid #39414d;
     854        font-weight: var(--button--font-weight);
     855        font-family: var(--button--font-family);
     856        font-size: var(--button--font-size);
     857        background-color: var(--button--color-background);
     858        border-radius: var(--button--border-radius);
     859        border: var(--button--border-width) solid var(--button--color-background);
    885860        text-decoration: none;
    886         padding: 15px 30px;
     861        padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    887862        display: inline-block;
    888 }
    889 
    890 .wp-block-file .wp-block-file__button:before,
    891 .wp-block-file .wp-block-file__button:after {
    892         content: "";
    893         display: block;
    894         height: 0;
    895         width: 0;
    896 }
    897 
    898 .wp-block-file .wp-block-file__button:before {
    899         margin-bottom: -calc(1em - 0);
    900 }
    901 
    902 .wp-block-file .wp-block-file__button:after {
    903         margin-top: -calc(1em - 0);
    904863}
    905864
    … …  
    911870
    912871.is-dark-theme .wp-block-file .wp-block-file__button:focus {
    913         color: #39414d;
     872        color: var(--button--color-background);
    914873}
    915874
    916875.wp-block-file .wp-block-file__button:focus:not(.has-background) {
    917         color: #39414d;
     876        color: var(--button--color-text-hover);
    918877}
    919878
    920879.wp-block-file .wp-block-file__button:disabled {
    921         background-color: rgba(255, 255, 255, 0.5);
    922         border-color: rgba(255, 255, 255, 0.5);
    923         color: #39414d;
     880        background-color: var(--global--color-white-50);
     881        border-color: var(--global--color-white-50);
     882        color: var(--button--color-text-active);
    924883}
    925884
    926885.wp-block-file .wp-block-file__button:hover {
    927         color: #39414d;
     886        color: var(--button--color-text-hover);
    928887        background: transparent;
    929888}
    … …  
    934893
    935894.wp-block-gallery figcaption a {
    936         color: #fff;
     895        color: var(--global--color-white);
    937896}
    938897
    … …  
    951910
    952911.wp-block-group.has-background {
    953         padding: 30px;
     912        padding: var(--global--spacing-vertical);
    954913}
    955914
    … …  
    960919
    961920.wp-block-group.is-style-twentytwentyone-border {
    962         border: 3px solid #28303d;
    963         padding: 30px;
     921        border: calc(3 * var(--separator--height)) solid var(--global--color-border);
     922        padding: var(--global--spacing-vertical);
    964923}
    965924
    966925.wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > [data-align=full] {
    967         max-width: calc(100% + 60px);
    968         width: calc(100% + 60px);
    969         margin-left: -30px;
    970 }
    971 
    972 .wp-block-group .wp-block-group__inner-container > *:last-child {
     926        max-width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical)));
     927        width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical)));
     928        margin-left: calc(-1 * var(--global--spacing-vertical));
     929}
     930
     931.wp-block-group > .wp-block-group__inner-container > *:first-child {
     932        margin-top: 0;
     933}
     934
     935.wp-block-group > .wp-block-group__inner-container > *:last-child:not(.block-list-appender) {
     936        margin-bottom: 0;
     937}
     938
     939.wp-block-group.has-child-selected > .wp-block-group__inner-container > *:nth-last-child(2),
     940.wp-block-group.is-selected > .wp-block-group__inner-container > *:nth-last-child(2) {
    973941        margin-bottom: 0;
    974942}
    … …  
    979947}
    980948
    981 .wp-block-heading h1 {
    982         clear: both;
    983         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    984         font-weight: normal;
    985 }
    986 
    987 h1 {
    988         clear: both;
    989         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    990         font-weight: normal;
    991 }
    992 
    993 .h1 {
    994         clear: both;
    995         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    996         font-weight: normal;
    997 }
    998 
    999 .wp-block-heading h2 {
    1000         clear: both;
    1001         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1002         font-weight: normal;
    1003 }
    1004 
    1005 h2 {
    1006         clear: both;
    1007         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1008         font-weight: normal;
    1009 }
    1010 
    1011 .h2 {
    1012         clear: both;
    1013         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1014         font-weight: normal;
    1015 }
    1016 
    1017 .wp-block-heading h3 {
    1018         clear: both;
    1019         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1020         font-weight: normal;
    1021 }
    1022 
    1023 h3 {
    1024         clear: both;
    1025         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1026         font-weight: normal;
    1027 }
    1028 
    1029 .h3 {
    1030         clear: both;
    1031         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1032         font-weight: normal;
    1033 }
    1034 
    1035 .wp-block-heading h4 {
    1036         clear: both;
    1037         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1038         font-weight: normal;
    1039 }
    1040 
    1041 h4 {
    1042         clear: both;
    1043         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1044         font-weight: normal;
    1045 }
    1046 
    1047 .h4 {
    1048         clear: both;
    1049         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1050         font-weight: normal;
    1051 }
    1052 
    1053 .wp-block-heading h5 {
    1054         clear: both;
    1055         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1056         font-weight: normal;
    1057 }
    1058 
    1059 h5 {
    1060         clear: both;
    1061         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1062         font-weight: normal;
    1063 }
    1064 
    1065 .h5 {
    1066         clear: both;
    1067         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1068         font-weight: normal;
    1069 }
    1070 
    1071 .wp-block-heading h6 {
    1072         clear: both;
    1073         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1074         font-weight: normal;
    1075 }
    1076 
    1077 h6 {
    1078         clear: both;
    1079         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1080         font-weight: normal;
    1081 }
    1082 
     949.wp-block-heading h1,
     950h1,
     951.h1,
     952.wp-block-heading h2,
     953h2,
     954.h2,
     955.wp-block-heading h3,
     956h3,
     957.h3,
     958.wp-block-heading h4,
     959h4,
     960.h4,
     961.wp-block-heading h5,
     962h5,
     963.h5,
     964.wp-block-heading h6,
     965h6,
    1083966.h6 {
    1084967        clear: both;
    1085         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1086         font-weight: normal;
    1087 }
    1088 
    1089 .wp-block-heading h1 strong {
    1090         font-weight: 600;
    1091 }
    1092 
    1093 h1 strong {
    1094         font-weight: 600;
    1095 }
    1096 
    1097 .h1 strong {
    1098         font-weight: 600;
    1099 }
    1100 
    1101 .wp-block-heading h2 strong {
    1102         font-weight: 600;
    1103 }
    1104 
    1105 h2 strong {
    1106         font-weight: 600;
    1107 }
    1108 
    1109 .h2 strong {
    1110         font-weight: 600;
    1111 }
    1112 
    1113 .wp-block-heading h3 strong {
    1114         font-weight: 600;
    1115 }
    1116 
    1117 h3 strong {
    1118         font-weight: 600;
    1119 }
    1120 
    1121 .h3 strong {
    1122         font-weight: 600;
    1123 }
    1124 
    1125 .wp-block-heading h4 strong {
    1126         font-weight: 600;
    1127 }
    1128 
    1129 h4 strong {
    1130         font-weight: 600;
    1131 }
    1132 
    1133 .h4 strong {
    1134         font-weight: 600;
    1135 }
    1136 
    1137 .wp-block-heading h5 strong {
    1138         font-weight: 600;
    1139 }
    1140 
    1141 h5 strong {
    1142         font-weight: 600;
    1143 }
    1144 
    1145 .h5 strong {
    1146         font-weight: 600;
    1147 }
    1148 
    1149 .wp-block-heading h6 strong {
    1150         font-weight: 600;
    1151 }
    1152 
    1153 h6 strong {
    1154         font-weight: 600;
    1155 }
    1156 
     968        font-family: var(--heading--font-family);
     969        font-weight: var(--heading--font-weight);
     970}
     971
     972.wp-block-heading h1 strong,
     973h1 strong,
     974.h1 strong,
     975.wp-block-heading h2 strong,
     976h2 strong,
     977.h2 strong,
     978.wp-block-heading h3 strong,
     979h3 strong,
     980.h3 strong,
     981.wp-block-heading h4 strong,
     982h4 strong,
     983.h4 strong,
     984.wp-block-heading h5 strong,
     985h5 strong,
     986.h5 strong,
     987.wp-block-heading h6 strong,
     988h6 strong,
    1157989.h6 strong {
    1158         font-weight: 600;
    1159 }
    1160 
    1161 .wp-block-heading h1[style*="--wp--typography--line-height"] {
    1162         line-height: --global--line-height-body;
    1163 }
    1164 
    1165 h1[style*="--wp--typography--line-height"] {
    1166         line-height: --global--line-height-body;
    1167 }
    1168 
    1169 .h1[style*="--wp--typography--line-height"] {
    1170         line-height: --global--line-height-body;
    1171 }
    1172 
    1173 .wp-block-heading h2[style*="--wp--typography--line-height"] {
    1174         line-height: --global--line-height-body;
    1175 }
    1176 
    1177 h2[style*="--wp--typography--line-height"] {
    1178         line-height: --global--line-height-body;
    1179 }
    1180 
    1181 .h2[style*="--wp--typography--line-height"] {
    1182         line-height: --global--line-height-body;
    1183 }
    1184 
    1185 .wp-block-heading h3[style*="--wp--typography--line-height"] {
    1186         line-height: --global--line-height-body;
    1187 }
    1188 
    1189 h3[style*="--wp--typography--line-height"] {
    1190         line-height: --global--line-height-body;
    1191 }
    1192 
    1193 .h3[style*="--wp--typography--line-height"] {
    1194         line-height: --global--line-height-body;
    1195 }
    1196 
    1197 .wp-block-heading h4[style*="--wp--typography--line-height"] {
    1198         line-height: --global--line-height-body;
    1199 }
    1200 
    1201 h4[style*="--wp--typography--line-height"] {
    1202         line-height: --global--line-height-body;
    1203 }
    1204 
    1205 .h4[style*="--wp--typography--line-height"] {
    1206         line-height: --global--line-height-body;
    1207 }
    1208 
    1209 .wp-block-heading h5[style*="--wp--typography--line-height"] {
    1210         line-height: --global--line-height-body;
    1211 }
    1212 
    1213 h5[style*="--wp--typography--line-height"] {
    1214         line-height: --global--line-height-body;
    1215 }
    1216 
    1217 .h5[style*="--wp--typography--line-height"] {
    1218         line-height: --global--line-height-body;
    1219 }
    1220 
    1221 .wp-block-heading h6[style*="--wp--typography--line-height"] {
    1222         line-height: --global--line-height-body;
    1223 }
    1224 
    1225 h6[style*="--wp--typography--line-height"] {
    1226         line-height: --global--line-height-body;
    1227 }
    1228 
     990        font-weight: var(--heading--font-weight-strong);
     991}
     992
     993.wp-block-heading h1[style*="--wp--typography--line-height"],
     994h1[style*="--wp--typography--line-height"],
     995.h1[style*="--wp--typography--line-height"],
     996.wp-block-heading h2[style*="--wp--typography--line-height"],
     997h2[style*="--wp--typography--line-height"],
     998.h2[style*="--wp--typography--line-height"],
     999.wp-block-heading h3[style*="--wp--typography--line-height"],
     1000h3[style*="--wp--typography--line-height"],
     1001.h3[style*="--wp--typography--line-height"],
     1002.wp-block-heading h4[style*="--wp--typography--line-height"],
     1003h4[style*="--wp--typography--line-height"],
     1004.h4[style*="--wp--typography--line-height"],
     1005.wp-block-heading h5[style*="--wp--typography--line-height"],
     1006h5[style*="--wp--typography--line-height"],
     1007.h5[style*="--wp--typography--line-height"],
     1008.wp-block-heading h6[style*="--wp--typography--line-height"],
     1009h6[style*="--wp--typography--line-height"],
    12291010.h6[style*="--wp--typography--line-height"] {
    1230         line-height: --global--line-height-body;
    1231 }
    1232 
    1233 .wp-block-heading h1 {
    1234         font-size: 4rem;
    1235         letter-spacing: normal;
    1236         line-height: 1.1;
    1237 }
    1238 
    1239 @media only screen and (min-width: 652px) {
    1240 
    1241         .wp-block-heading h1 {
    1242                 font-size: 6rem;
    1243         }
    1244 }
    1245 
    1246 h1 {
    1247         font-size: 4rem;
    1248         letter-spacing: normal;
    1249         line-height: 1.1;
    1250 }
    1251 
    1252 @media only screen and (min-width: 652px) {
    1253 
    1254         h1 {
    1255                 font-size: 6rem;
    1256         }
    1257 }
    1258 
     1011        line-height: var(--wp--typography--line-height, --global--line-height-body);
     1012}
     1013
     1014.wp-block-heading h1,
     1015h1,
    12591016.h1 {
    1260         font-size: 4rem;
    1261         letter-spacing: normal;
    1262         line-height: 1.1;
    1263 }
    1264 
    1265 @media only screen and (min-width: 652px) {
    1266 
    1267         .h1 {
    1268                 font-size: 6rem;
    1269         }
    1270 }
    1271 
    1272 .wp-block-heading h2 {
    1273         font-size: 2.25rem;
    1274         letter-spacing: normal;
    1275         line-height: 1.3;
    1276 }
    1277 
    1278 @media only screen and (min-width: 652px) {
    1279 
    1280         .wp-block-heading h2 {
    1281                 font-size: 3rem;
    1282         }
    1283 }
    1284 
    1285 @media only screen and (min-width: 652px) {
    1286 
    1287         .wp-block-heading h2 {
    1288                 font-size: 3rem;
    1289         }
    1290 }
    1291 
    1292 h2 {
    1293         font-size: 2.25rem;
    1294         letter-spacing: normal;
    1295         line-height: 1.3;
    1296 }
    1297 
    1298 @media only screen and (min-width: 652px) {
    1299 
    1300         h2 {
    1301                 font-size: 3rem;
    1302         }
    1303 }
    1304 
    1305 @media only screen and (min-width: 652px) {
    1306 
    1307         h2 {
    1308                 font-size: 3rem;
    1309         }
    1310 }
    1311 
     1017        font-size: var(--heading--font-size-h1);
     1018        letter-spacing: var(--heading--letter-spacing-h1);
     1019        line-height: var(--heading--line-height-h1);
     1020}
     1021
     1022.wp-block-heading h2,
     1023h2,
    13121024.h2 {
    1313         font-size: 2.25rem;
    1314         letter-spacing: normal;
    1315         line-height: 1.3;
    1316 }
    1317 
    1318 @media only screen and (min-width: 652px) {
    1319 
    1320         .h2 {
    1321                 font-size: 3rem;
    1322         }
    1323 }
    1324 
    1325 @media only screen and (min-width: 652px) {
    1326 
    1327         .h2 {
    1328                 font-size: 3rem;
    1329         }
    1330 }
    1331 
    1332 .wp-block-heading h3 {
    1333         font-size: 2rem;
    1334         letter-spacing: normal;
    1335         line-height: 1.3;
    1336 }
    1337 
    1338 @media only screen and (min-width: 652px) {
    1339 
    1340         .wp-block-heading h3 {
    1341                 font-size: 2rem;
    1342         }
    1343 }
    1344 
    1345 h3 {
    1346         font-size: 2rem;
    1347         letter-spacing: normal;
    1348         line-height: 1.3;
    1349 }
    1350 
    1351 @media only screen and (min-width: 652px) {
    1352 
    1353         h3 {
    1354                 font-size: 2rem;
    1355         }
    1356 }
    1357 
     1025        font-size: var(--heading--font-size-h2);
     1026        letter-spacing: var(--heading--letter-spacing-h2);
     1027        line-height: var(--heading--line-height-h2);
     1028}
     1029
     1030.wp-block-heading h3,
     1031h3,
    13581032.h3 {
    1359         font-size: 2rem;
    1360         letter-spacing: normal;
    1361         line-height: 1.3;
    1362 }
    1363 
    1364 @media only screen and (min-width: 652px) {
    1365 
    1366         .h3 {
    1367                 font-size: 2rem;
    1368         }
    1369 }
    1370 
    1371 .wp-block-heading h4 {
    1372         font-size: 1.5rem;
    1373         font-weight: 600;
    1374         letter-spacing: normal;
    1375         line-height: 1.3;
    1376 }
    1377 
    1378 h4 {
    1379         font-size: 1.5rem;
    1380         font-weight: 600;
    1381         letter-spacing: normal;
    1382         line-height: 1.3;
    1383 }
    1384 
     1033        font-size: var(--heading--font-size-h3);
     1034        letter-spacing: var(--heading--letter-spacing-h3);
     1035        line-height: var(--heading--line-height-h3);
     1036}
     1037
     1038.wp-block-heading h4,
     1039h4,
    13851040.h4 {
    1386         font-size: 1.5rem;
    1387         font-weight: 600;
    1388         letter-spacing: normal;
    1389         line-height: 1.3;
    1390 }
    1391 
    1392 .wp-block-heading h5 {
    1393         font-size: 1.125rem;
    1394         font-weight: 600;
    1395         letter-spacing: 0.05em;
    1396         line-height: 1.3;
    1397 }
    1398 
    1399 h5 {
    1400         font-size: 1.125rem;
    1401         font-weight: 600;
    1402         letter-spacing: 0.05em;
    1403         line-height: 1.3;
    1404 }
    1405 
     1041        font-size: var(--heading--font-size-h4);
     1042        font-weight: var(--heading--font-weight-strong);
     1043        letter-spacing: var(--heading--letter-spacing-h4);
     1044        line-height: var(--heading--line-height-h4);
     1045}
     1046
     1047.wp-block-heading h5,
     1048h5,
    14061049.h5 {
    1407         font-size: 1.125rem;
    1408         font-weight: 600;
    1409         letter-spacing: 0.05em;
    1410         line-height: 1.3;
    1411 }
    1412 
    1413 .wp-block-heading h6 {
    1414         font-size: 1rem;
    1415         font-weight: 600;
    1416         letter-spacing: 0.05em;
    1417         line-height: 1.3;
    1418 }
    1419 
    1420 h6 {
    1421         font-size: 1rem;
    1422         font-weight: 600;
    1423         letter-spacing: 0.05em;
    1424         line-height: 1.3;
    1425 }
    1426 
     1050        font-size: var(--heading--font-size-h5);
     1051        font-weight: var(--heading--font-weight-strong);
     1052        letter-spacing: var(--heading--letter-spacing-h5);
     1053        line-height: var(--heading--line-height-h5);
     1054}
     1055
     1056.wp-block-heading h6,
     1057h6,
    14271058.h6 {
    1428         font-size: 1rem;
    1429         font-weight: 600;
    1430         letter-spacing: 0.05em;
    1431         line-height: 1.3;
     1059        font-size: var(--heading--font-size-h6);
     1060        font-weight: var(--heading--font-weight-strong);
     1061        letter-spacing: var(--heading--letter-spacing-h6);
     1062        line-height: var(--heading--line-height-h6);
    14321063}
    14331064
    14341065[data-type="core/html"] textarea {
    1435         color: #28303d;
     1066        color: var(--global--color-dark-gray);
    14361067        border-radius: 0;
    1437         padding: 20px;
     1068        padding: var(--global--spacing-unit);
    14381069}
    14391070
    … …  
    14481079
    14491080/* Block Styles */
    1450 .wp-block-image.is-style-twentytwentyone-border img {
    1451         border: 3px solid #28303d;
    1452 }
    1453 
     1081.wp-block-image.is-style-twentytwentyone-border img,
    14541082.wp-block-image.is-style-twentytwentyone-image-frame img {
    1455         border: 3px solid #28303d;
     1083        border: calc(3 * var(--separator--height)) solid var(--global--color-border);
    14561084}
    14571085
    14581086.wp-block-image.is-style-twentytwentyone-image-frame img {
    1459         padding: 20px;
     1087        padding: var(--global--spacing-unit);
    14601088}
    14611089
    … …  
    14691097
    14701098.wp-block-latest-posts:not(.is-grid) > li {
    1471         margin-top: 50px;
    1472         margin-bottom: 50px;
     1099        margin-top: calc(1.666 * var(--global--spacing-vertical));
     1100        margin-bottom: calc(1.666 * var(--global--spacing-vertical));
    14731101}
    14741102
    … …  
    14871115
    14881116.wp-block-latest-posts.is-grid > li {
    1489         margin-bottom: 30px;
     1117        margin-bottom: var(--global--spacing-vertical);
    14901118}
    14911119
    … …  
    14951123
    14961124.wp-block-latest-posts > li > * {
    1497         margin-top: 10px;
    1498         margin-bottom: 10px;
     1125        margin-top: calc(0.333 * var(--global--spacing-vertical));
     1126        margin-bottom: calc(0.333 * var(--global--spacing-vertical));
    14991127}
    15001128
    … …  
    15091137.wp-block-latest-posts > li > a {
    15101138        display: inline-block;
    1511         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1512         font-size: 2rem;
    1513         font-weight: normal;
    1514         line-height: 1.3;
    1515         margin-bottom: 10px;
    1516 }
    1517 @media only screen and (min-width: 652px) {
    1518 
    1519         .wp-block-latest-posts > li > a {
    1520                 font-size: 2rem;
    1521         }
     1139        font-family: var(--latest-posts--title-font-family);
     1140        font-size: var(--latest-posts--title-font-size);
     1141        font-weight: var(--heading--font-weight);
     1142        line-height: var(--global--line-height-heading);
     1143        margin-bottom: calc(0.333 * var(--global--spacing-vertical));
    15221144}
    15231145
    15241146.wp-block-latest-posts .wp-block-latest-posts__post-author {
    1525         color: #28303d;
    1526         font-size: 1.25rem;
    1527         line-height: 1.7;
     1147        color: var(--global--color-primary);
     1148        font-size: var(--global--font-size-md);
     1149        line-height: var(--global--line-height-body);
    15281150}
    15291151
    15301152.wp-block-latest-posts .wp-block-latest-posts__post-date {
    1531         color: #28303d;
    1532         font-size: 1rem;
    1533         line-height: 1.7;
     1153        color: var(--global--color-primary);
     1154        font-size: var(--global--font-size-xs);
     1155        line-height: var(--global--line-height-body);
    15341156}
    15351157
    … …  
    15391161}
    15401162
    1541 .wp-block-latest-posts .wp-block-latest-posts__post-excerpt {
    1542         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1543         font-size: 1.125rem;
    1544         line-height: 1.7;
    1545         margin-top: 20px;
    1546 }
    1547 
     1163.wp-block-latest-posts .wp-block-latest-posts__post-excerpt,
    15481164.wp-block-latest-posts .wp-block-latest-posts__post-full-content {
    1549         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1550         font-size: 1.125rem;
    1551         line-height: 1.7;
    1552         margin-top: 20px;
     1165        font-family: var(--latest-posts--description-font-family);
     1166        font-size: var(--latest-posts--description-font-size);
     1167        line-height: var(--global--line-height-body);
     1168        margin-top: calc(0.666 * var(--global--spacing-vertical));
    15531169}
    15541170
    15551171.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers {
    1556         border-top: 3px solid #28303d;
    1557         border-bottom: 3px solid #28303d;
    1558 }
    1559 
    1560 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li {
    1561         padding-bottom: 30px;
    1562         border-bottom: 1px solid #28303d;
    1563         margin-top: 30px;
    1564         margin-bottom: 30px;
    1565 }
    1566 
     1172        border-top: calc(3 * var(--separator--height)) solid var(--global--color-border);
     1173        border-bottom: calc(3 * var(--separator--height)) solid var(--global--color-border);
     1174}
     1175
     1176.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li,
    15671177.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li {
    1568         padding-bottom: 30px;
    1569         border-bottom: 1px solid #28303d;
    1570         margin-top: 30px;
    1571         margin-bottom: 30px;
     1178        padding-bottom: var(--global--spacing-vertical);
     1179        border-bottom: var(--separator--height) solid var(--global--color-border);
     1180        margin-top: var(--global--spacing-vertical);
     1181        margin-bottom: var(--global--spacing-vertical);
    15721182}
    15731183
    … …  
    15791189
    15801190.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid {
    1581         box-shadow: inset 0 -1px 0 0 #28303d;
    1582         border-bottom: 2px solid #28303d;
     1191        box-shadow: inset 0 -1px 0 0 var(--global--color-border);
     1192        border-bottom: calc(2 * var(--separator--height)) solid var(--global--color-border);
    15831193}
    15841194
    15851195.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li {
    15861196        margin: 0;
    1587         padding-top: 30px;
    1588         padding-right: 25px;
     1197        padding-top: var(--global--spacing-vertical);
     1198        padding-right: var(--global--spacing-horizontal);
    15891199}
    15901200
    15911201.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li:last-child {
    1592         padding-bottom: 30px;
     1202        padding-bottom: var(--global--spacing-vertical);
    15931203}
    15941204@media screen and (min-width: 600px) {
    15951205
    15961206        .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-2 li {
    1597                 width: 50%;
     1207                width: calc((100% / 2));
    15981208        }
    15991209
    16001210        .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-3 li {
    1601                 width: 33%;
     1211                width: calc((100% / 3));
    16021212        }
    16031213
    16041214        .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-4 li {
    1605                 width: 25%;
     1215                width: calc((100% / 4));
    16061216        }
    16071217
    16081218        .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-5 li {
    1609                 width: 20%;
     1219                width: calc((100% / 5));
    16101220        }
    16111221
    16121222        .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-6 li {
    1613                 width: 17%;
     1223                width: calc((100% / 6));
    16141224        }
    16151225}
    16161226
    16171227.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li {
    1618         border: 3px solid #28303d;
    1619         padding: 30px 25px;
     1228        border: calc(3 * var(--separator--height)) solid var(--global--color-border);
     1229        padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
    16201230}
    16211231
    16221232.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li:last-child {
    1623         padding-bottom: 30px;
    1624         margin-bottom: 30px;
     1233        padding-bottom: var(--global--spacing-vertical);
     1234        margin-bottom: var(--global--spacing-vertical);
    16251235}
    16261236
    16271237.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders:not(.is-grid) li {
    1628         margin-top: 25px;
    1629         margin-bottom: 25px;
     1238        margin-top: var(--global--spacing-horizontal);
     1239        margin-bottom: var(--global--spacing-horizontal);
    16301240}
    16311241
    … …  
    16731283}
    16741284
    1675 ul {
    1676         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1677         margin: 30px 0;
    1678         padding-left: 50px;
    1679 }
    1680 
     1285ul,
    16811286ol {
    1682         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1683         margin: 30px 0;
    1684         padding-left: 50px;
     1287        font-family: var(--list--font-family);
     1288        margin: var(--global--spacing-vertical) 0;
     1289        padding-left: calc(2 * var(--global--spacing-horizontal));
    16851290}
    16861291
    … …  
    17051310
    17061311dt {
    1707         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     1312        font-family: var(--definition-term--font-family);
    17081313        font-weight: bold;
    17091314}
    … …  
    17141319}
    17151320
     1321.wp-block-media-text > .wp-block-media-text__content > *:first-child {
     1322        margin-top: 0;
     1323}
     1324
     1325.wp-block-media-text > .wp-block-media-text__content > *:last-child:not(.block-list-appender) {
     1326        margin-bottom: 0;
     1327}
     1328
     1329.wp-block-media-text.has-child-selected > .wp-block-media-text__content > *:nth-last-child(2),
     1330.wp-block-media-text.is-selected > .wp-block-media-text__content > *:nth-last-child(2) {
     1331        margin-bottom: 0;
     1332}
     1333
    17161334.wp-block-media-text .wp-block-media-text__content {
    1717         padding: 25px;
    1718 }
    1719 
    1720 .wp-block-media-text .wp-block-media-text__content [data-block]:first-child {
    1721         margin-top: 0;
    1722 }
    1723 
    1724 .wp-block-media-text .wp-block-media-text__content [data-block]:last-child {
    1725         margin-bottom: 0;
     1335        padding: var(--global--spacing-horizontal);
    17261336}
    17271337
    17281338.wp-block-media-text.is-style-twentytwentyone-border {
    1729         border: 3px solid #28303d;
     1339        border: calc(3 * var(--separator--height)) solid var(--global--color-border);
    17301340}
    17311341
    17321342.wp-block-navigation .wp-block-navigation__container {
    1733         background: #d1e4dd;
     1343        background: var(--global--color-background);
    17341344        padding: 0;
    17351345}
    17361346
    17371347.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content {
    1738         padding: 13px;
     1348        padding: var(--primary-nav--padding);
    17391349}
    17401350
    17411351.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__label {
    1742         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1743         font-size: 1.25rem;
    1744         font-weight: normal;
     1352        font-family: var(--primary-nav--font-family);
     1353        font-size: var(--primary-nav--font-size);
     1354        font-weight: var(--primary-nav--font-weight);
    17451355}
    17461356
    17471357.wp-block-navigation .has-child .wp-block-navigation__container {
    1748         box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
    1749 }
    1750 
    1751 .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover {
    1752         color: #28303d;
    1753 }
    1754 
     1358        box-shadow: var(--global--elevation);
     1359}
     1360
     1361.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover,
    17551362.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:focus {
    1756         color: #28303d;
     1363        color: var(--primary-nav--color-link-hover);
    17571364}
    17581365
    … …  
    17621369
    17631370p {
    1764         line-height: --global--line-height-body;
     1371        line-height: var(--wp--typography--line-height, --global--line-height-body);
    17651372}
    17661373
    17671374p.has-background {
    1768         padding: 20px;
     1375        padding: var(--global--spacing-unit);
    17691376}
    17701377
    … …  
    17721379        overflow-x: auto;
    17731380        white-space: pre !important;
    1774         font-size: 1rem;
     1381        font-size: var(--global--font-size-xs);
    17751382}
    17761383
    17771384.wp-block-pullquote {
    1778         padding: 40px 0;
     1385        padding: calc(2 * var(--global--spacing-unit)) 0;
    17791386        text-align: center;
    1780         border-width: 3px;
     1387        border-width: var(--pullquote--border-width);
    17811388        border-bottom-style: solid;
    17821389        border-top-style: solid;
    … …  
    17901397        content: "“";
    17911398        display: block;
     1399        position: relative;
     1400        left: 0;
    17921401        font-size: 3rem;
    17931402        font-weight: 500;
    … …  
    17961405
    17971406.wp-block-pullquote p {
    1798         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1799         font-size: 2rem;
    1800         font-style: normal;
     1407        font-family: var(--pullquote--font-family);
     1408        font-size: var(--pullquote--font-size);
     1409        font-style: var(--pullquote--font-style);
    18011410        font-weight: 700;
    1802         letter-spacing: normal;
    1803         line-height: 1.3;
     1411        letter-spacing: var(--pullquote--letter-spacing);
     1412        line-height: var(--pullquote--line-height);
    18041413        margin: 0;
    1805 }
    1806 @media only screen and (min-width: 652px) {
    1807 
    1808         .wp-block-pullquote p {
    1809                 font-size: 2rem;
    1810         }
    18111414}
    18121415
    … …  
    18151418}
    18161419
    1817 .wp-block-pullquote .wp-block-pullquote__citation {
    1818         font-size: 1rem;
    1819         font-style: normal;
    1820         text-transform: none;
    1821 }
    1822 
    1823 .wp-block-pullquote cite {
    1824         font-size: 1rem;
    1825         font-style: normal;
    1826         text-transform: none;
    1827 }
    1828 
     1420.wp-block-pullquote .wp-block-pullquote__citation,
     1421.wp-block-pullquote cite,
    18291422.wp-block-pullquote footer {
    1830         font-size: 1rem;
    1831         font-style: normal;
     1423        font-size: var(--global--font-size-xs);
     1424        font-style: var(--pullquote--font-style);
    18321425        text-transform: none;
    18331426}
    … …  
    18401433        margin-left: auto;
    18411434        margin-right: auto;
    1842         padding: 50px;
    1843         border-width: 3px;
     1435        padding: calc(2.5 * var(--global--spacing-unit));
     1436        border-width: var(--pullquote--border-width);
    18441437        border-style: solid;
    1845         border-color: #28303d;
     1438        border-color: var(--pullquote--border-color);
    18461439}
    18471440@media (min-width: 600px) {
    18481441
    18491442        .wp-block-pullquote.is-style-solid-color {
    1850                 padding: 100px;
     1443                padding: calc(5 * var(--global--spacing-unit));
    18511444        }
    18521445}
    … …  
    18561449}
    18571450
    1858 .wp-block-pullquote.is-style-solid-color.alignleft blockquote {
    1859         padding-left: 20px;
    1860         padding-right: 20px;
    1861         max-width: inherit;
    1862 }
    1863 
     1451.wp-block-pullquote.is-style-solid-color.alignleft blockquote,
    18641452.wp-block-pullquote.is-style-solid-color.alignright blockquote {
    1865         padding-left: 20px;
    1866         padding-right: 20px;
     1453        padding-left: var(--global--spacing-unit);
     1454        padding-right: var(--global--spacing-unit);
    18671455        max-width: inherit;
    18681456}
    … …  
    18741462
    18751463.wp-block-pullquote.is-style-solid-color blockquote p {
    1876         font-size: 2rem;
    1877 }
    1878 @media only screen and (min-width: 652px) {
    1879 
    1880         .wp-block-pullquote.is-style-solid-color blockquote p {
    1881                 font-size: 2rem;
    1882         }
     1464        font-size: var(--pullquote--font-size);
    18831465}
    18841466
    … …  
    18901472
    18911473.wp-block[data-align=full] .wp-block-pullquote:not(.is-style-solid-color) blockquote {
    1892         padding: 0 40px;
     1474        padding: 0 calc(2 * var(--global--spacing-unit));
     1475}
     1476
     1477.wp-block[data-align=left] .wp-block-pullquote.is-style-solid-color,
     1478.wp-block[data-align=right] .wp-block-pullquote.is-style-solid-color {
     1479        padding: var(--global--spacing-unit);
    18931480}
    18941481
    … …  
    18961483        position: relative;
    18971484        border-left: none;
    1898         margin: 30px auto 30px 25px;
     1485        margin: var(--global--spacing-vertical) auto var(--global--spacing-vertical) var(--global--spacing-horizontal);
    18991486}
    19001487
    19011488.wp-block-quote p {
    1902         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1903         font-size: 1.25rem;
    1904         font-style: normal;
    1905         font-weight: 700;
    1906         line-height: 1.7;
     1489        font-family: var(--quote--font-family);
     1490        font-size: var(--quote--font-size);
     1491        font-style: var(--quote--font-style);
     1492        font-weight: var(--quote--font-weight);
     1493        line-height: var(--quote--line-height);
    19071494}
    19081495
    19091496.wp-block-quote strong {
    1910         font-weight: bolder;
     1497        font-weight: var(--quote--font-weight-strong);
    19111498}
    19121499
    19131500.wp-block-quote:before {
    19141501        content: "“";
    1915         font-size: 1.25rem;
    1916         line-height: 1.7;
    1917         position: absolute;
    1918         left: -12px;
     1502        font-size: var(--quote--font-size);
     1503        line-height: var(--quote--line-height);
     1504        left: calc(-0.5 * var(--global--spacing-horizontal));
    19191505}
    19201506
    19211507.wp-block-quote .wp-block-quote__citation {
    1922         color: #28303d;
    1923         font-size: 1rem;
    1924         font-style: normal;
    1925 }
    1926 
    1927 .has-background:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
    1928 [class*=background-color]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
    1929 [style*=background-color]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
     1508        color: var(--global--color-primary);
     1509        font-size: var(--global--font-size-xs);
     1510        font-style: var(--quote--font-style-cite);
     1511}
     1512
     1513.has-background .wp-block-quote .wp-block-quote__citation,
     1514[class*=background-color] .wp-block-quote .wp-block-quote__citation,
     1515[style*=background-color] .wp-block-quote .wp-block-quote__citation,
    19301516.wp-block-cover[style*=background-image] .wp-block-quote .wp-block-quote__citation {
    19311517        color: currentColor;
    … …  
    19331519
    19341520.wp-block-quote.has-text-align-right {
    1935         margin: 30px 25px 30px auto;
     1521        margin: var(--global--spacing-vertical) var(--global--spacing-horizontal) var(--global--spacing-vertical) auto;
    19361522        padding-right: 0;
    19371523        border-right: none;
    … …  
    19391525
    19401526.wp-block-quote.has-text-align-right:before {
     1527        display: none;
     1528}
     1529
     1530.wp-block-quote.has-text-align-right p:before {
    19411531        content: "”";
    1942         left: initial;
    1943         right: -12px;
     1532        font-size: var(--quote--font-size);
     1533        font-weight: normal;
     1534        line-height: var(--quote--line-height);
     1535        margin-right: 5px;
    19441536}
    19451537
    19461538.wp-block-quote.has-text-align-center {
    1947         margin: 30px auto;
     1539        margin: var(--global--spacing-vertical) auto;
    19481540}
    19491541
    … …  
    19521544}
    19531545
    1954 .wp-block-quote.is-large {
    1955         padding-left: 0;
    1956 
    1957         /* Resetting margins to match _block-container.scss */
    1958         margin-top: 30px;
    1959         margin-bottom: 30px;
    1960 }
    1961 
     1546.wp-block-quote.is-large,
    19621547.wp-block-quote.is-style-large {
    19631548        padding-left: 0;
    19641549
    19651550        /* Resetting margins to match _block-container.scss */
    1966         margin-top: 30px;
    1967         margin-bottom: 30px;
    1968 }
    1969 
    1970 .wp-block-quote.is-large p {
    1971         font-size: 2.25rem;
    1972         font-style: normal;
    1973         line-height: 1.35;
    1974 }
    1975 @media only screen and (min-width: 652px) {
    1976 
    1977         .wp-block-quote.is-large p {
    1978                 font-size: 2.5rem;
    1979         }
    1980 }
    1981 
     1551        margin-top: var(--global--spacing-vertical);
     1552        margin-bottom: var(--global--spacing-vertical);
     1553}
     1554
     1555.wp-block-quote.is-large p,
    19821556.wp-block-quote.is-style-large p {
    1983         font-size: 2.25rem;
    1984         font-style: normal;
    1985         line-height: 1.35;
    1986 }
    1987 @media only screen and (min-width: 652px) {
    1988 
    1989         .wp-block-quote.is-style-large p {
    1990                 font-size: 2.5rem;
    1991         }
    1992 }
    1993 
    1994 .wp-block-quote.is-large:before {
    1995         font-size: 2.25rem;
    1996         line-height: 1.35;
    1997         left: -25px;
    1998 }
    1999 @media only screen and (min-width: 652px) {
    2000 
    2001         .wp-block-quote.is-large:before {
    2002                 font-size: 2.5rem;
    2003         }
    2004 }
    2005 
     1557        font-size: var(--quote--font-size-large);
     1558        font-style: var(--quote--font-style-large);
     1559        line-height: var(--quote--line-height-large);
     1560}
     1561
     1562.wp-block-quote.is-large:before,
    20061563.wp-block-quote.is-style-large:before {
    2007         font-size: 2.25rem;
    2008         line-height: 1.35;
    2009         left: -25px;
    2010 }
    2011 @media only screen and (min-width: 652px) {
    2012 
    2013         .wp-block-quote.is-style-large:before {
    2014                 font-size: 2.5rem;
    2015         }
    2016 }
    2017 
    2018 .wp-block-quote.is-large.has-text-align-right:before {
    2019         left: initial;
    2020         right: -25px;
    2021 }
    2022 
     1564        font-size: var(--quote--font-size-large);
     1565        line-height: var(--quote--line-height-large);
     1566        left: calc(-1 * var(--global--spacing-horizontal));
     1567}
     1568
     1569.wp-block-quote.is-large.has-text-align-right:before,
    20231570.wp-block-quote.is-style-large.has-text-align-right:before {
    2024         left: initial;
    2025         right: -25px;
     1571        display: none;
     1572}
     1573
     1574.wp-block-quote.is-large.has-text-align-right p:before,
     1575.wp-block-quote.is-style-large.has-text-align-right p:before {
     1576        content: "”";
     1577        font-size: var(--quote--font-size-large);
     1578        font-weight: normal;
     1579        line-height: var(--quote--line-height-large);
     1580        margin-right: 10px;
    20261581}
    20271582@media only screen and (max-width: 481px) {
    20281583
    2029         .wp-block-quote.is-large {
    2030                 padding-left: 25px;
    2031         }
    2032 
     1584        .wp-block-quote.is-large,
    20331585        .wp-block-quote.is-style-large {
    2034                 padding-left: 25px;
     1586                padding-left: var(--global--spacing-horizontal);
    20351587        }
    20361588
    … …  
    20401592        }
    20411593
    2042         .wp-block-quote.is-large.has-text-align-right {
    2043                 padding-left: 0;
    2044                 padding-right: 25px;
    2045         }
    2046 
     1594        .wp-block-quote.is-large.has-text-align-right,
    20471595        .wp-block-quote.is-style-large.has-text-align-right {
    20481596                padding-left: 0;
    2049                 padding-right: 25px;
     1597                padding-right: var(--global--spacing-horizontal);
    20501598        }
    20511599
    … …  
    20581606
    20591607        .wp-block-quote {
    2060                 padding-left: 13px;
     1608                padding-left: calc(0.5 * var(--global--spacing-horizontal));
    20611609        }
    20621610
    … …  
    20671615        .wp-block-quote.has-text-align-right {
    20681616                padding-left: 0;
    2069                 padding-right: 13px;
     1617                padding-right: calc(0.5 * var(--global--spacing-horizontal));
    20701618        }
    20711619
    … …  
    20991647
    21001648.wp-block-rss:not(.is-grid) > li {
    2101         margin-top: 50px;
    2102         margin-bottom: 50px;
     1649        margin-top: calc(1.666 * var(--global--spacing-vertical));
     1650        margin-bottom: calc(1.666 * var(--global--spacing-vertical));
    21031651}
    21041652
    … …  
    21121660
    21131661.wp-block-rss.is-grid > li {
    2114         margin-bottom: 30px;
     1662        margin-bottom: var(--global--spacing-vertical);
    21151663}
    21161664
    … …  
    21331681
    21341682.wp-block-rss > li > * {
    2135         margin-top: 10px;
    2136         margin-bottom: 10px;
     1683        margin-top: calc(0.333 * var(--global--spacing-vertical));
     1684        margin-bottom: calc(0.333 * var(--global--spacing-vertical));
    21371685}
    21381686
    … …  
    21471695.wp-block-rss .wp-block-rss__item-title > a {
    21481696        display: inline-block;
    2149         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2150         font-size: 2rem;
    2151         font-weight: normal;
    2152         line-height: 1.3;
    2153         margin-bottom: 10px;
    2154 }
    2155 @media only screen and (min-width: 652px) {
    2156 
    2157         .wp-block-rss .wp-block-rss__item-title > a {
    2158                 font-size: 2rem;
    2159         }
     1697        font-family: var(--latest-posts--title-font-family);
     1698        font-size: var(--latest-posts--title-font-size);
     1699        font-weight: var(--heading--font-weight);
     1700        line-height: var(--global--line-height-heading);
     1701        margin-bottom: calc(0.333 * var(--global--spacing-vertical));
    21601702}
    21611703
    21621704.wp-block-rss .wp-block-rss__item-author {
    2163         color: #28303d;
    2164         font-size: 1.25rem;
    2165         line-height: 1.7;
     1705        color: var(--global--color-primary);
     1706        font-size: var(--global--font-size-md);
     1707        line-height: var(--global--line-height-body);
    21661708}
    21671709
    21681710.wp-block-rss .wp-block-rss__item-publish-date {
    2169         color: #28303d;
    2170         font-size: 1rem;
    2171         line-height: 1.7;
     1711        color: var(--global--color-primary);
     1712        font-size: var(--global--font-size-xs);
     1713        line-height: var(--global--line-height-body);
    21721714}
    21731715
    … …  
    21771719}
    21781720
    2179 .wp-block-rss .wp-block-rss__item-excerpt {
    2180         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2181         font-size: 1.125rem;
    2182         line-height: 1.7;
    2183         margin-top: 20px;
    2184 }
    2185 
     1721.wp-block-rss .wp-block-rss__item-excerpt,
    21861722.wp-block-rss .wp-block-rss__item-full-content {
    2187         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2188         font-size: 1.125rem;
    2189         line-height: 1.7;
    2190         margin-top: 20px;
     1723        font-family: var(--latest-posts--description-font-family);
     1724        font-size: var(--latest-posts--description-font-size);
     1725        line-height: var(--global--line-height-body);
     1726        margin-top: calc(0.666 * var(--global--spacing-vertical));
    21911727}
    21921728
    21931729.wp-block-rss.alignfull {
    2194         padding-left: 20px;
    2195         padding-right: 20px;
     1730        padding-left: var(--global--spacing-unit);
     1731        padding-right: var(--global--spacing-unit);
    21961732}
    21971733
    … …  
    22031739
    22041740.wp-block-search {
    2205         max-width: calc(100vw - 30px);
    2206 }
    2207 
    2208 @media only screen and (min-width: 482px) {
    2209 
    2210         .wp-block-search {
    2211                 max-width: min(calc(100vw - 100px), 610px);
    2212         }
    2213 }
    2214 
    2215 @media only screen and (min-width: 822px) {
    2216 
    2217         .wp-block-search {
    2218                 max-width: min(calc(100vw - 200px), 610px);
    2219         }
     1741        max-width: var(--responsive--aligndefault-width);
    22201742}
    22211743
    22221744.wp-block-search .wp-block-search__label {
    2223         font-size: 1.125rem;
    2224         font-weight: 500;
    2225         margin-bottom: 10px;
     1745        font-size: var(--form--font-size);
     1746        font-weight: var(--form--label-weight);
     1747        margin-bottom: calc(var(--global--spacing-vertical) / 3);
    22261748}
    22271749
    22281750.wp-block-search .wp-block-search__input {
    2229         border: 3px solid #39414d;
    2230         border-radius: 0;
    2231         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2232         font-size: 1.125rem;
    2233         line-height: 1.7;
     1751        border: var(--form--border-width) solid var(--form--border-color);
     1752        border-radius: var(--form--border-radius);
     1753        font-family: var(--form--font-family);
     1754        font-size: var(--form--font-size);
     1755        line-height: var(--form--line-height);
    22341756        max-width: inherit;
    2235         margin-right: -3px;
    2236         padding: 10px;
     1757        margin-right: calc(-1 * var(--button--border-width));
     1758        padding: var(--form--spacing-unit);
    22371759}
    22381760
    22391761.is-dark-theme .wp-block-search .wp-block-search__input {
    2240         background: rgba(255, 255, 255, 0.9);
    2241 }
    2242 
    2243 .is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__input {
    2244         border-color: #28303d;
    2245 }
    2246 
    2247 .is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__input {
    2248         border-color: #28303d;
    2249 }
    2250 
    2251 .is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__input {
    2252         border-color: #28303d;
    2253 }
    2254 
    2255 .is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__input {
    2256         border-color: #28303d;
    2257 }
    2258 
    2259 .is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__input {
    2260         border-color: #28303d;
    2261 }
    2262 
    2263 .is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__input {
    2264         border-color: #28303d;
    2265 }
    2266 
     1762        background: var(--global--color-white-90);
     1763}
     1764
     1765.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__input,
     1766.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__input,
     1767.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__input,
     1768.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__input,
     1769.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__input,
     1770.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__input,
    22671771.is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__input {
    2268         border-color: #28303d;
    2269 }
    2270 
    2271 .has-background.has-gray-background-color .wp-block-search .wp-block-search__input {
    2272         border-color: #fff;
    2273 }
    2274 
    2275 .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input {
    2276         border-color: #fff;
    2277 }
    2278 
     1772        border-color: var(--form--color-text);
     1773}
     1774
     1775.has-background.has-gray-background-color .wp-block-search .wp-block-search__input,
     1776.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input,
    22791777.has-background.has-black-background-color .wp-block-search .wp-block-search__input {
    2280         border-color: #fff;
     1778        border-color: var(--global--color-white);
    22811779}
    22821780
    22831781.wp-block-search .wp-block-search__button {
    2284         line-height: 1.5;
    2285         color: #d1e4dd;
     1782        line-height: var(--button--line-height);
     1783        color: var(--button--color-text);
    22861784        cursor: pointer;
    2287         font-weight: 500;
    2288         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2289         font-size: 1.25rem;
    2290         background-color: #39414d;
    2291         border-radius: 0;
    2292         border: 3px solid #39414d;
     1785        font-weight: var(--button--font-weight);
     1786        font-family: var(--button--font-family);
     1787        font-size: var(--button--font-size);
     1788        background-color: var(--button--color-background);
     1789        border-radius: var(--button--border-radius);
     1790        border: var(--button--border-width) solid var(--button--color-background);
    22931791        text-decoration: none;
    2294         padding: 15px 30px;
     1792        padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    22951793        box-shadow: none;
    22961794        margin-left: 0;
    22971795        background-color: transparent;
    2298         color: #39414d;
    2299 }
    2300 
    2301 .wp-block-search .wp-block-search__button:before,
    2302 .wp-block-search .wp-block-search__button:after {
    2303         content: "";
    2304         display: block;
    2305         height: 0;
    2306         width: 0;
    2307 }
    2308 
    2309 .wp-block-search .wp-block-search__button:before {
    2310         margin-bottom: -calc(1em - 0);
    2311 }
    2312 
    2313 .wp-block-search .wp-block-search__button:after {
    2314         margin-top: -calc(1em - 0);
     1796        color: var(--button--color-text-hover);
    23151797}
    23161798
    … …  
    23221804
    23231805.is-dark-theme .wp-block-search .wp-block-search__button:focus {
    2324         color: #39414d;
     1806        color: var(--button--color-background);
    23251807}
    23261808
    23271809.wp-block-search .wp-block-search__button:focus:not(.has-background) {
    2328         color: #39414d;
     1810        color: var(--button--color-text-hover);
    23291811}
    23301812
    23311813.wp-block-search .wp-block-search__button:disabled {
    2332         background-color: rgba(255, 255, 255, 0.5);
    2333         border-color: rgba(255, 255, 255, 0.5);
    2334         color: #39414d;
     1814        background-color: var(--global--color-white-50);
     1815        border-color: var(--global--color-white-50);
     1816        color: var(--button--color-text-active);
    23351817}
    23361818
    23371819.wp-block-search .wp-block-search__button:hover {
    2338         color: #d1e4dd;
    2339         background-color: #39414d;
     1820        color: var(--button--color-text);
     1821        background-color: var(--button--color-background);
    23401822}
    23411823
    23421824.wp-block-search .wp-block-search__button.has-icon {
    2343         padding: 30px 15px;
     1825        padding: calc(2 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
    23441826}
    23451827
    … …  
    23491831}
    23501832
    2351 .has-background.has-gray-background-color .wp-block-search .wp-block-search__button {
    2352         color: #fff;
     1833.has-background.has-gray-background-color .wp-block-search .wp-block-search__button,
     1834.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button,
     1835.has-background.has-black-background-color .wp-block-search .wp-block-search__button {
     1836        color: var(--global--color-white);
    23531837        border-color: currentColor;
    23541838}
    23551839
    2356 .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button {
    2357         color: #fff;
     1840.has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover,
     1841.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover,
     1842.has-background.has-black-background-color .wp-block-search .wp-block-search__button:hover {
     1843        color: var(--global--color-white);
     1844        background-color: var(--button--color-background);
     1845        border-color: var(--global--color-white);
     1846}
     1847
     1848.is-dark-theme .has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover,
     1849.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover,
     1850.is-dark-theme .has-background.has-black-background-color .wp-block-search .wp-block-search__button:hover {
     1851        color: var(--button--color-text);
     1852        background-color: var(--button--color-background);
     1853}
     1854
     1855.has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover,
     1856.has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover,
     1857.has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover,
     1858.has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover,
     1859.has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover,
     1860.has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover,
     1861.has-background.has-yellow-background-color .wp-block-search .wp-block-search__button:hover {
     1862        color: var(--global--color-white);
     1863        background-color: var(--form--border-color);
     1864        border-color: var(--form--border-color);
     1865}
     1866
     1867.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button,
     1868.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button,
     1869.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button,
     1870.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button,
     1871.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button,
     1872.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button,
     1873.is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button {
     1874        color: var(--form--color-text);
    23581875        border-color: currentColor;
    23591876}
    23601877
    2361 .has-background.has-black-background-color .wp-block-search .wp-block-search__button {
    2362         color: #fff;
    2363         border-color: currentColor;
    2364 }
    2365 
    2366 .has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover {
    2367         color: #fff;
    2368         background-color: #39414d;
    2369         border-color: #fff;
    2370 }
    2371 
    2372 .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover {
    2373         color: #fff;
    2374         background-color: #39414d;
    2375         border-color: #fff;
    2376 }
    2377 
    2378 .has-background.has-black-background-color .wp-block-search .wp-block-search__button:hover {
    2379         color: #fff;
    2380         background-color: #39414d;
    2381         border-color: #fff;
    2382 }
    2383 
    2384 .is-dark-theme .has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover {
    2385         color: #d1e4dd;
    2386         background-color: #39414d;
    2387 }
    2388 
    2389 .is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover {
    2390         color: #d1e4dd;
    2391         background-color: #39414d;
    2392 }
    2393 
    2394 .is-dark-theme .has-background.has-black-background-color .wp-block-search .wp-block-search__button:hover {
    2395         color: #d1e4dd;
    2396         background-color: #39414d;
    2397 }
    2398 
    2399 .has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover {
    2400         color: #fff;
    2401         background-color: #39414d;
    2402         border-color: #39414d;
    2403 }
    2404 
    2405 .has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover {
    2406         color: #fff;
    2407         background-color: #39414d;
    2408         border-color: #39414d;
    2409 }
    2410 
    2411 .has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover {
    2412         color: #fff;
    2413         background-color: #39414d;
    2414         border-color: #39414d;
    2415 }
    2416 
    2417 .has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover {
    2418         color: #fff;
    2419         background-color: #39414d;
    2420         border-color: #39414d;
    2421 }
    2422 
    2423 .has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover {
    2424         color: #fff;
    2425         background-color: #39414d;
    2426         border-color: #39414d;
    2427 }
    2428 
    2429 .has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover {
    2430         color: #fff;
    2431         background-color: #39414d;
    2432         border-color: #39414d;
    2433 }
    2434 
    2435 .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button:hover {
    2436         color: #fff;
    2437         background-color: #39414d;
    2438         border-color: #39414d;
    2439 }
    2440 
    2441 .is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button {
    2442         color: #28303d;
    2443         border-color: currentColor;
    2444 }
    2445 
    2446 .is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button {
    2447         color: #28303d;
    2448         border-color: currentColor;
    2449 }
    2450 
    2451 .is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button {
    2452         color: #28303d;
    2453         border-color: currentColor;
    2454 }
    2455 
    2456 .is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button {
    2457         color: #28303d;
    2458         border-color: currentColor;
    2459 }
    2460 
    2461 .is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button {
    2462         color: #28303d;
    2463         border-color: currentColor;
    2464 }
    2465 
    2466 .is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button {
    2467         color: #28303d;
    2468         border-color: currentColor;
    2469 }
    2470 
    2471 .is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button {
    2472         color: #28303d;
    2473         border-color: currentColor;
    2474 }
    2475 
    2476 .is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover {
    2477         color: #fff;
    2478         background-color: #d1e4dd;
    2479         border-color: #d1e4dd;
    2480 }
    2481 
    2482 .is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover {
    2483         color: #fff;
    2484         background-color: #d1e4dd;
    2485         border-color: #d1e4dd;
    2486 }
    2487 
    2488 .is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover {
    2489         color: #fff;
    2490         background-color: #d1e4dd;
    2491         border-color: #d1e4dd;
    2492 }
    2493 
    2494 .is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover {
    2495         color: #fff;
    2496         background-color: #d1e4dd;
    2497         border-color: #d1e4dd;
    2498 }
    2499 
    2500 .is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover {
    2501         color: #fff;
    2502         background-color: #d1e4dd;
    2503         border-color: #d1e4dd;
    2504 }
    2505 
    2506 .is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover {
    2507         color: #fff;
    2508         background-color: #d1e4dd;
    2509         border-color: #d1e4dd;
    2510 }
    2511 
     1878.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover,
     1879.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover,
     1880.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover,
     1881.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover,
     1882.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover,
     1883.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover,
    25121884.is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button:hover {
    2513         color: #fff;
    2514         background-color: #d1e4dd;
    2515         border-color: #d1e4dd;
     1885        color: var(--global--color-white);
     1886        background-color: var(--button--color-text);
     1887        border-color: var(--button--color-text);
    25161888}
    25171889
    … …  
    25281900
    25291901.wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button {
    2530         padding: 15px 30px;
     1902        padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    25311903}
    25321904
    25331905.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
    2534         color: #d1e4dd;
     1906        color: var(--button--color-text);
    25351907        border-color: currentColor;
    25361908}
    25371909
    25381910.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
    2539         color: #fff;
    2540         background-color: #d1e4dd;
    2541         border-color: #d1e4dd;
    2542 }
    2543 
    2544 .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
    2545         color: #39414d;
     1911        color: var(--global--color-white);
     1912        background-color: var(--button--color-text);
     1913        border-color: var(--button--color-text);
     1914}
     1915
     1916.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button,
     1917.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button,
     1918.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
     1919        color: var(--button--color-text-hover);
    25461920        border-color: currentColor;
    25471921}
    25481922
    2549 .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
    2550         color: #39414d;
     1923.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover,
     1924.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover,
     1925.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
     1926        color: var(--global--color-white);
     1927        background-color: var(--button--color-background);
     1928        border-color: var(--button--color-background);
     1929}
     1930
     1931.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button,
     1932.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button,
     1933.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
     1934        color: var(--button--color-text);
    25511935        border-color: currentColor;
    25521936}
    25531937
    2554 .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
    2555         color: #39414d;
    2556         border-color: currentColor;
    2557 }
    2558 
    2559 .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
    2560         color: #fff;
    2561         background-color: #39414d;
    2562         border-color: #39414d;
    2563 }
    2564 
    2565 .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
    2566         color: #fff;
    2567         background-color: #39414d;
    2568         border-color: #39414d;
    2569 }
    2570 
    2571 .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
    2572         color: #fff;
    2573         background-color: #39414d;
    2574         border-color: #39414d;
    2575 }
    2576 
    2577 .is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
    2578         color: #d1e4dd;
    2579         border-color: currentColor;
    2580 }
    2581 
    2582 .is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
    2583         color: #d1e4dd;
    2584         border-color: currentColor;
    2585 }
    2586 
    2587 .is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
    2588         color: #d1e4dd;
    2589         border-color: currentColor;
    2590 }
    2591 
    2592 .is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
    2593         color: #fff;
    2594         background-color: #d1e4dd;
    2595         border-color: #d1e4dd;
    2596 }
    2597 
    2598 .is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
    2599         color: #fff;
    2600         background-color: #d1e4dd;
    2601         border-color: #d1e4dd;
    2602 }
    2603 
     1938.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover,
     1939.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover,
    26041940.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
    2605         color: #fff;
    2606         background-color: #d1e4dd;
    2607         border-color: #d1e4dd;
     1941        color: var(--global--color-white);
     1942        background-color: var(--button--color-text);
     1943        border-color: var(--button--color-text);
    26081944}
    26091945
    … …  
    26161952}
    26171953
    2618 .wp-block-separator {
    2619         border-bottom: 1px solid #28303d;
     1954.wp-block-separator,
     1955hr {
     1956        border-bottom: var(--separator--height) solid var(--separator--border-color);
    26201957        clear: both;
    26211958        opacity: 1;
    26221959}
    26231960
    2624 hr {
    2625         border-bottom: 1px solid #28303d;
    2626         clear: both;
    2627         opacity: 1;
    2628 }
    2629 
    2630 .wp-block-separator[style*="text-align:right"] {
    2631         border-right-color: #28303d;
    2632 }
    2633 
    2634 .wp-block-separator[style*="text-align: right"] {
    2635         border-right-color: #28303d;
    2636 }
    2637 
    2638 hr[style*="text-align:right"] {
    2639         border-right-color: #28303d;
    2640 }
    2641 
     1961.wp-block-separator[style*="text-align:right"],
     1962.wp-block-separator[style*="text-align: right"],
     1963hr[style*="text-align:right"],
    26421964hr[style*="text-align: right"] {
    2643         border-right-color: #28303d;
    2644 }
    2645 
    2646 .wp-block-separator:not(.is-style-dots) {
    2647         max-width: calc(100vw - 30px);
    2648 }
    2649 @media only screen and (min-width: 482px) {
    2650 
    2651         .wp-block-separator:not(.is-style-dots) {
    2652                 max-width: min(calc(100vw - 100px), 610px);
    2653         }
    2654 }
    2655 @media only screen and (min-width: 822px) {
    2656 
    2657         .wp-block-separator:not(.is-style-dots) {
    2658                 max-width: min(calc(100vw - 200px), 610px);
    2659         }
    2660 }
    2661 
     1965        border-right-color: var(--separator--border-color);
     1966}
     1967
     1968.wp-block-separator:not(.is-style-dots),
    26621969hr:not(.is-style-dots) {
    2663         max-width: calc(100vw - 30px);
    2664 }
    2665 @media only screen and (min-width: 482px) {
    2666 
    2667         hr:not(.is-style-dots) {
    2668                 max-width: min(calc(100vw - 100px), 610px);
    2669         }
    2670 }
    2671 @media only screen and (min-width: 822px) {
    2672 
    2673         hr:not(.is-style-dots) {
    2674                 max-width: min(calc(100vw - 200px), 610px);
    2675         }
     1970        max-width: var(--responsive--aligndefault-width);
    26761971}
    26771972
    … …  
    26831978}
    26841979
    2685 .wp-block-separator.is-style-twentytwentyone-separator-thick {
    2686         border-bottom-width: 3px;
    2687 }
    2688 
     1980.wp-block-separator.is-style-twentytwentyone-separator-thick,
    26891981hr.is-style-twentytwentyone-separator-thick {
    2690         border-bottom-width: 3px;
     1982        border-bottom-width: calc(3 * var(--separator--height));
    26911983}
    26921984
    … …  
    27102002}
    27112003
    2712 .wp-block-separator.is-style-dots:before {
    2713         color: #28303d;
    2714 }
    2715 
     2004.wp-block-separator.is-style-dots:before,
    27162005hr.is-style-dots:before {
    2717         color: #28303d;
    2718 }
    2719 
    2720 .has-background:not(.has-background-background-color) .wp-block-separator,
    2721 [class*=background-color]:not(.has-background-background-color) .wp-block-separator,
    2722 [style*=background-color]:not(.has-background-background-color) .wp-block-separator,
     2006        color: var(--separator--border-color);
     2007}
     2008
     2009.has-background .wp-block-separator,
     2010[class*=background-color] .wp-block-separator,
     2011[style*=background-color] .wp-block-separator,
    27232012.wp-block-cover[style*=background-image] .wp-block-separator,
    2724 .has-background:not(.has-background-background-color) hr,
    2725 [class*=background-color]:not(.has-background-background-color) hr,
    2726 [style*=background-color]:not(.has-background-background-color) hr,
     2013.has-background hr,
     2014[class*=background-color] hr,
     2015[style*=background-color] hr,
    27272016.wp-block-cover[style*=background-image] hr {
    27282017        border-color: currentColor;
    … …  
    27352024
    27362025.wp-block-social-links.is-style-twentytwentyone-social-icons-color button {
    2737         color: #28303d;
     2026        color: var(--global--color-primary);
    27382027}
    27392028
    … …  
    27422031}
    27432032
    2744 table th {
    2745         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2746 }
    2747 
     2033table th,
    27482034.wp-block-table th {
    2749         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2750 }
    2751 
    2752 table td {
    2753         padding: 10px;
    2754 }
    2755 
    2756 table th {
    2757         padding: 10px;
    2758 }
    2759 
    2760 .wp-block-table td {
    2761         padding: 10px;
    2762 }
    2763 
     2035        font-family: var(--heading--font-family);
     2036}
     2037
     2038table td,
     2039table th,
     2040.wp-block-table td,
    27642041.wp-block-table th {
    2765         padding: 10px;
    2766 }
    2767 
    2768 table.is-style-regular .has-background {
    2769         color: #28303d;
    2770 }
    2771 
    2772 table.is-style-stripes .has-background thead tr {
    2773         color: #28303d;
    2774 }
    2775 
    2776 table.is-style-stripes .has-background tfoot tr {
    2777         color: #28303d;
    2778 }
    2779 
    2780 table.is-style-stripes .has-background tbody tr:nth-child(even) {
    2781         color: #28303d;
    2782 }
    2783 
    2784 .wp-block-table.is-style-regular .has-background {
    2785         color: #28303d;
    2786 }
    2787 
    2788 .wp-block-table.is-style-stripes .has-background thead tr {
    2789         color: #28303d;
    2790 }
    2791 
    2792 .wp-block-table.is-style-stripes .has-background tfoot tr {
    2793         color: #28303d;
    2794 }
    2795 
     2042        padding: calc(0.5 * var(--global--spacing-unit));
     2043}
     2044
     2045table.is-style-regular .has-background,
     2046table.is-style-stripes .has-background thead tr,
     2047table.is-style-stripes .has-background tfoot tr,
     2048table.is-style-stripes .has-background tbody tr:nth-child(even),
     2049.wp-block-table.is-style-regular .has-background,
     2050.wp-block-table.is-style-stripes .has-background thead tr,
     2051.wp-block-table.is-style-stripes .has-background tfoot tr,
    27962052.wp-block-table.is-style-stripes .has-background tbody tr:nth-child(even) {
    2797         color: #28303d;
    2798 }
    2799 
    2800 table.is-style-stripes {
    2801         border-color: #f0f0f0;
    2802 }
    2803 
     2053        color: var(--table--has-background-text-color);
     2054}
     2055
     2056table.is-style-stripes,
    28042057.wp-block-table.is-style-stripes {
    2805         border-color: #f0f0f0;
     2058        border-color: var(--table--stripes-border-color);
    28062059}
    28072060
    … …  
    28132066}
    28142067
    2815 table.is-style-stripes tbody tr:nth-child(odd) {
    2816         background-color: #f0f0f0;
    2817 }
    2818 
     2068table.is-style-stripes tbody tr:nth-child(odd),
    28192069.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    2820         background-color: #f0f0f0;
     2070        background-color: var(--table--stripes-background-color);
    28212071}
    28222072
    … …  
    28432093        font-weight: bold;
    28442094        text-align: left;
    2845         margin-bottom: 20px;
     2095        margin-bottom: var(--global--spacing-unit);
    28462096        color: currentColor;
    28472097}
    … …  
    28492099.wp-calendar-nav {
    28502100        text-align: left;
    2851         margin-top: 10px;
     2101        margin-top: calc(var(--global--spacing-unit) / 2);
    28522102}
    28532103
    … …  
    28742124}
    28752125
    2876 :root .is-extra-small-text {
    2877         font-size: 1rem;
    2878 }
    2879 
     2126:root .is-extra-small-text,
    28802127:root .has-extra-small-font-size {
    2881         font-size: 1rem;
    2882 }
    2883 
    2884 :root .is-small-text {
    2885         font-size: 1.125rem;
    2886 }
    2887 
     2128        font-size: var(--global--font-size-xs);
     2129}
     2130
     2131:root .is-small-text,
    28882132:root .has-small-font-size {
    2889         font-size: 1.125rem;
    2890 }
    2891 
    2892 :root .is-regular-text {
    2893         font-size: 1.25rem;
    2894 }
    2895 
    2896 :root .has-regular-font-size {
    2897         font-size: 1.25rem;
    2898 }
    2899 
    2900 :root .is-normal-font-size {
    2901         font-size: 1.25rem;
    2902 }
    2903 
    2904 :root .has-normal-font-size {
    2905         font-size: 1.25rem;
    2906 }
    2907 
     2133        font-size: var(--global--font-size-sm);
     2134}
     2135
     2136:root .is-regular-text,
     2137:root .has-regular-font-size,
     2138:root .is-normal-font-size,
     2139:root .has-normal-font-size,
    29082140:root .has-medium-font-size {
    2909         font-size: 1.25rem;
    2910 }
    2911 
    2912 :root .is-large-text {
    2913         font-size: 1.5rem;
    2914         line-height: 1.3;
    2915 }
    2916 
     2141        font-size: var(--global--font-size-base);
     2142}
     2143
     2144:root .is-large-text,
    29172145:root .has-large-font-size {
    2918         font-size: 1.5rem;
    2919         line-height: 1.3;
    2920 }
    2921 
    2922 :root .is-larger-text {
    2923         font-size: 2.5rem;
    2924         line-height: 1.3;
    2925 }
    2926 @media only screen and (min-width: 652px) {
    2927 
    2928         :root .is-larger-text {
    2929                 font-size: 2.5rem;
    2930         }
    2931 }
    2932 
    2933 :root .has-larger-font-size {
    2934         font-size: 2.5rem;
    2935         line-height: 1.3;
    2936 }
    2937 @media only screen and (min-width: 652px) {
    2938 
    2939         :root .has-larger-font-size {
    2940                 font-size: 2.5rem;
    2941         }
    2942 }
    2943 
    2944 :root .is-extra-large-text {
    2945         font-size: 2.5rem;
    2946         line-height: 1.3;
    2947 }
    2948 @media only screen and (min-width: 652px) {
    2949 
    2950         :root .is-extra-large-text {
    2951                 font-size: 2.5rem;
    2952         }
    2953 }
    2954 
     2146        font-size: var(--global--font-size-lg);
     2147        line-height: var(--global--line-height-heading);
     2148}
     2149
     2150:root .is-larger-text,
     2151:root .has-larger-font-size,
     2152:root .is-extra-large-text,
    29552153:root .has-extra-large-font-size {
    2956         font-size: 2.5rem;
    2957         line-height: 1.3;
    2958 }
    2959 @media only screen and (min-width: 652px) {
    2960 
    2961         :root .has-extra-large-font-size {
    2962                 font-size: 2.5rem;
    2963         }
    2964 }
    2965 
    2966 :root .is-huge-text {
    2967         font-size: 6rem;
    2968         line-height: 1.3;
    2969         font-weight: 300;
    2970 }
    2971 @media only screen and (min-width: 652px) {
    2972 
    2973         :root .is-huge-text {
    2974                 font-size: 6rem;
    2975         }
    2976 }
    2977 
     2154        font-size: var(--global--font-size-xl);
     2155        line-height: var(--global--line-height-heading);
     2156}
     2157
     2158:root .is-huge-text,
    29782159:root .has-huge-font-size {
    2979         font-size: 6rem;
    2980         line-height: 1.3;
    2981         font-weight: 300;
    2982 }
    2983 @media only screen and (min-width: 652px) {
    2984 
    2985         :root .has-huge-font-size {
    2986                 font-size: 6rem;
    2987         }
    2988 }
    2989 
    2990 :root .is-gigantic-text {
    2991         font-size: 9rem;
    2992         line-height: 1.3;
    2993         font-weight: 300;
    2994 }
    2995 @media only screen and (min-width: 652px) {
    2996 
    2997         :root .is-gigantic-text {
    2998                 font-size: 9rem;
    2999         }
    3000 }
    3001 
     2160        font-size: var(--global--font-size-xxl);
     2161        line-height: var(--global--line-height-heading);
     2162        font-weight: var(--heading--font-weight-page-title);
     2163}
     2164
     2165:root .is-gigantic-text,
    30022166:root .has-gigantic-font-size {
    3003         font-size: 9rem;
    3004         line-height: 1.3;
    3005         font-weight: 300;
    3006 }
    3007 @media only screen and (min-width: 652px) {
    3008 
    3009         :root .has-gigantic-font-size {
    3010                 font-size: 9rem;
    3011         }
     2167        font-size: var(--global--font-size-xxxl);
     2168        line-height: var(--global--line-height-heading);
     2169        font-weight: var(--heading--font-weight-page-title);
    30122170}
    30132171
    … …  
    30172175*/
    30182176.wp-block.editor-post-title__block {
    3019         border-bottom: 3px solid #28303d;
    3020         padding-bottom: 60px;
    3021         margin-bottom: 90px;
    3022         max-width: calc(100vw - 30px);
    3023 }
    3024 @media only screen and (min-width: 482px) {
    3025 
    3026         .wp-block.editor-post-title__block {
    3027                 max-width: calc(100vw - 100px);
    3028         }
    3029 }
    3030 @media only screen and (min-width: 822px) {
    3031 
    3032         .wp-block.editor-post-title__block {
    3033                 max-width: min(calc(100vw - 200px), 1240px);
    3034         }
     2177        border-bottom: 3px solid var(--global--color-border);
     2178        padding-bottom: calc(2 * var(--global--spacing-vertical));
     2179        margin-bottom: calc(3 * var(--global--spacing-vertical));
     2180        max-width: var(--responsive--alignwide-width);
    30352181}
    30362182
    30372183.wp-block.editor-post-title__block .editor-post-title__input {
    3038         color: #39414d;
    3039         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    3040         font-size: 4rem;
    3041         font-weight: 300;
    3042         line-height: 1.1;
    3043 }
    3044 @media only screen and (min-width: 652px) {
    3045 
    3046         .wp-block.editor-post-title__block .editor-post-title__input {
    3047                 font-size: 6rem;
    3048         }
     2184        color: var(--global--color-secondary);
     2185        font-family: var(--heading--font-family);
     2186        font-size: var(--global--font-size-page-title);
     2187        font-weight: var(--heading--font-weight-page-title);
     2188        line-height: var(--heading--line-height-h1);
    30492189}
    30502190
    30512191.wp-block.block-editor-default-block-appender > textarea {
    3052         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    3053         font-size: 1.25rem;
     2192        font-family: var(--global--font-secondary);
     2193        font-size: var(--global--font-size-md);
    30542194}
    30552195
    30562196.has-primary-color[class] {
    3057         color: #28303d;
     2197        color: var(--global--color-primary);
    30582198}
    30592199
    30602200.has-secondary-color[class] {
    3061         color: #39414d;
    3062 }
    3063 
    3064 .has-background:not(.has-background-background-color) a:not(.wp-block-button__link),
     2201        color: var(--global--color-secondary);
     2202}
     2203
     2204.has-background a,
    30652205.has-background p,
    30662206.has-background h1,
    … …  
    30742214
    30752215.has-primary-background-color[class] {
    3076         background-color: #28303d;
    3077         color: #d1e4dd;
     2216        background-color: var(--global--color-primary);
     2217        color: var(--global--color-background);
    30782218}
    30792219
    30802220.has-secondary-background-color[class] {
    3081         background-color: #39414d;
    3082         color: #d1e4dd;
     2221        background-color: var(--global--color-secondary);
     2222        color: var(--global--color-background);
    30832223}
    30842224
    30852225.has-white-background-color[class] {
    3086         background-color: #fff;
    3087         color: #39414d;
     2226        background-color: var(--global--color-white);
     2227        color: var(--global--color-secondary);
    30882228}
    30892229
    30902230.has-black-background-color[class] {
    3091         background-color: #000;
    3092         color: #28303d;
    3093 }
    3094 
    3095 /**
    3096  * Spacing Overrides
    3097  */
     2231        background-color: var(--global--color-black);
     2232        color: var(--global--color-primary);
     2233}
     2234
    30982235[data-block] {
    3099         margin-top: 30px;
    3100         margin-bottom: 30px;
    3101 }
    3102 
    3103 [data-block] [data-block]:first-child {
    3104         margin-top: 0;
    3105 }
    3106 
    3107 [data-block] [data-block]:nth-last-child(2) {
    3108         margin-bottom: 0;
    3109 }
    3110 
    3111 /* Block Alignments */
     2236        margin-top: var(--global--spacing-vertical);
     2237        margin-bottom: var(--global--spacing-vertical);
     2238}
     2239
    31122240.wp-block {
    3113         max-width: calc(100vw - 30px);
    3114 }
    3115 @media only screen and (min-width: 482px) {
    3116 
    3117         .wp-block {
    3118                 max-width: min(calc(100vw - 100px), 610px);
    3119         }
    3120 }
    3121 @media only screen and (min-width: 822px) {
    3122 
    3123         .wp-block {
    3124                 max-width: min(calc(100vw - 200px), 610px);
    3125         }
    3126 }
    3127 
    3128 .wp-block[data-align=wide] {
    3129         max-width: calc(100vw - 30px);
    3130 }
    3131 @media only screen and (min-width: 482px) {
    3132 
    3133         .wp-block[data-align=wide] {
    3134                 max-width: calc(100vw - 100px);
    3135         }
    3136 }
    3137 @media only screen and (min-width: 822px) {
    3138 
    3139         .wp-block[data-align=wide] {
    3140                 max-width: min(calc(100vw - 200px), 1240px);
    3141         }
    3142 }
    3143 
     2241        max-width: var(--responsive--aligndefault-width);
     2242}
     2243
     2244.wp-block[data-align=wide],
    31442245.wp-block.alignwide {
    3145         max-width: calc(100vw - 30px);
    3146 }
    3147 @media only screen and (min-width: 482px) {
    3148 
    3149         .wp-block.alignwide {
    3150                 max-width: calc(100vw - 100px);
    3151         }
    3152 }
    3153 @media only screen and (min-width: 822px) {
    3154 
    3155         .wp-block.alignwide {
    3156                 max-width: min(calc(100vw - 200px), 1240px);
    3157         }
     2246        max-width: var(--responsive--alignwide-width);
    31582247}
    31592248
    … …  
    31652254.alignleft {
    31662255        margin: 0;
    3167         margin-right: 25px;
     2256        margin-right: var(--global--spacing-horizontal);
    31682257}
    31692258
    31702259.alignright {
    31712260        margin: 0;
    3172         margin-left: 25px;
     2261        margin-left: var(--global--spacing-horizontal);
    31732262}
    31742263
    31752264.has-drop-cap:not(:focus)::first-letter {
    3176         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    3177         font-weight: normal;
     2265        font-family: var(--heading--font-family);
     2266        font-weight: var(--heading--font-weight);
    31782267        line-height: 0.66;
    31792268        text-transform: uppercase;
    … …  
    31812270        float: left;
    31822271        margin: 0.1em 0.1em 0 0;
    3183         font-size: 5rem;
    3184 }
    3185 
    3186 @media only screen and (min-width: 652px) {
    3187 
    3188         .has-drop-cap:not(:focus)::first-letter {
    3189                 font-size: 7rem;
    3190         }
     2272        font-size: calc(1.2 * var(--heading--font-size-h1));
    31912273}
    31922274
    … …  
    31952277        .wp-block[data-align=left] > * {
    31962278                max-width: 290px;
    3197                 margin-right: 25px;
     2279                margin-right: var(--global--spacing-horizontal);
    31982280        }
    31992281
    32002282        .wp-block[data-align=right] > * {
    32012283                max-width: 290px;
    3202                 margin-left: 25px;
    3203         }
     2284                margin-left: var(--global--spacing-horizontal);
     2285        }
     2286}
     2287
     2288.wp-block-freeform.block-library-rich-text__tinymce blockquote {
     2289        border: none;
     2290}
     2291
     2292.wp-block-freeform.block-library-rich-text__tinymce blockquote:before {
     2293        left: 5px;
    32042294}
    32052295
    32062296html {
    3207         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    3208         line-height: 1.7;
     2297        font-family: var(--global--font-secondary);
     2298        line-height: var(--global--line-height-body);
    32092299}
    32102300
    32112301body {
    3212         color: #28303d;
    3213         background-color: #d1e4dd;
    3214         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    3215         font-size: 1.25rem;
     2302        --wp--typography--line-height: var(--global--line-height-body);
     2303        color: var(--global--color-primary);
     2304        background-color: var(--global--color-background);
     2305        font-family: var(--global--font-secondary);
     2306        font-size: var(--global--font-size-base);
    32162307        font-weight: normal;
    32172308        -moz-osx-font-smoothing: grayscale;
    … …  
    32202311
    32212312.wp-block a {
    3222         color: #28303d;
     2313        color: var(--wp--style--color--link, var(--global--color-primary));
    32232314}
    32242315
    … …  
    32282319
    32292320.wp-block a:focus {
    3230         outline: 2px solid #28303d;
     2321        outline: 2px solid var(--wp--style--color--link, var(--global--color-primary));
    32312322        text-decoration: none;
    32322323}
    32332324
    3234 .has-background:not(.has-background-background-color) .has-link-color a {
    3235         color: #28303d;
    3236 }
    3237 
    3238 .has-background:not(.has-background-background-color).has-link-color a {
    3239         color: #28303d;
     2325.has-background .has-link-color a,
     2326.has-background.has-link-color a {
     2327        color: var(--wp--style--color--link, var(--global--color-primary));
    32402328}
    32412329
    … …  
    32462334
    32472335.has-black-color[class] {
    3248         color: #000;
     2336        color: var(--global--color-black);
    32492337}
    32502338
    32512339.has-gray-color[class] {
    3252         color: #39414d;
     2340        color: var(--global--color-gray);
    32532341}
    32542342
    32552343.has-dark-gray-color[class] {
    3256         color: #28303d;
     2344        color: var(--global--color-dark-gray);
    32572345}
    32582346
    32592347.has-green-color[class] {
    3260         color: #d1e4dd;
     2348        color: var(--global--color-green);
    32612349}
    32622350
    32632351.has-blue-color[class] {
    3264         color: #d1dfe4;
     2352        color: var(--global--color-blue);
    32652353}
    32662354
    32672355.has-purple-color[class] {
    3268         color: #d1d1e4;
     2356        color: var(--global--color-purple);
    32692357}
    32702358
    32712359.has-red-color[class] {
    3272         color: #e4d1d1;
     2360        color: var(--global--color-red);
    32732361}
    32742362
    32752363.has-orange-color[class] {
    3276         color: #e4dad1;
     2364        color: var(--global--color-orange);
    32772365}
    32782366
    32792367.has-yellow-color[class] {
    3280         color: #eeeadd;
     2368        color: var(--global--color-yellow);
    32812369}
    32822370
    32832371.has-white-color[class] {
    3284         color: #fff;
    3285 }
    3286 
    3287 .has-background:not(.has-background-background-color) a:not(.wp-block-button__link),
     2372        color: var(--global--color-white);
     2373}
     2374
     2375.has-background a,
    32882376.has-background p,
    32892377.has-background h1,
    … …  
    32972385
    32982386.has-black-background-color[class] {
    3299         background-color: #000;
     2387        background-color: var(--global--color-black);
    33002388}
    33012389
    33022390.has-gray-background-color[class] {
    3303         background-color: #39414d;
     2391        background-color: var(--global--color-gray);
    33042392}
    33052393
    33062394.has-dark-gray-background-color[class] {
    3307         background-color: #28303d;
     2395        background-color: var(--global--color-dark-gray);
    33082396}
    33092397
    33102398.has-green-background-color[class] {
    3311         background-color: #d1e4dd;
     2399        background-color: var(--global--color-green);
    33122400}
    33132401
    33142402.has-blue-background-color[class] {
    3315         background-color: #d1dfe4;
     2403        background-color: var(--global--color-blue);
    33162404}
    33172405
    33182406.has-purple-background-color[class] {
    3319         background-color: #d1d1e4;
     2407        background-color: var(--global--color-purple);
    33202408}
    33212409
    33222410.has-red-background-color[class] {
    3323         background-color: #e4d1d1;
     2411        background-color: var(--global--color-red);
    33242412}
    33252413
    33262414.has-orange-background-color[class] {
    3327         background-color: #e4dad1;
     2415        background-color: var(--global--color-orange);
    33282416}
    33292417
    33302418.has-yellow-background-color[class] {
    3331         background-color: #eeeadd;
     2419        background-color: var(--global--color-yellow);
    33322420}
    33332421
    33342422.has-white-background-color[class] {
    3335         background-color: #fff;
    3336 }
    3337 
    3338 :not(.has-text-color).has-black-background-color[class] {
    3339         color: #fff;
    3340 }
    3341 
    3342 :not(.has-text-color).has-gray-background-color[class] {
    3343         color: #fff;
    3344 }
    3345 
     2423        background-color: var(--global--color-white);
     2424}
     2425
     2426:not(.has-text-color).has-black-background-color[class],
     2427:not(.has-text-color).has-gray-background-color[class],
    33462428:not(.has-text-color).has-dark-gray-background-color[class] {
    3347         color: #fff;
    3348 }
    3349 
    3350 :not(.has-text-color).has-green-background-color[class] {
    3351         color: #28303d;
    3352 }
    3353 
    3354 :not(.has-text-color).has-blue-background-color[class] {
    3355         color: #28303d;
    3356 }
    3357 
    3358 :not(.has-text-color).has-purple-background-color[class] {
    3359         color: #28303d;
    3360 }
    3361 
    3362 :not(.has-text-color).has-red-background-color[class] {
    3363         color: #28303d;
    3364 }
    3365 
    3366 :not(.has-text-color).has-orange-background-color[class] {
    3367         color: #28303d;
    3368 }
    3369 
    3370 :not(.has-text-color).has-yellow-background-color[class] {
    3371         color: #28303d;
    3372 }
    3373 
     2429        color: var(--global--color-white);
     2430}
     2431
     2432:not(.has-text-color).has-green-background-color[class],
     2433:not(.has-text-color).has-blue-background-color[class],
     2434:not(.has-text-color).has-purple-background-color[class],
     2435:not(.has-text-color).has-red-background-color[class],
     2436:not(.has-text-color).has-orange-background-color[class],
     2437:not(.has-text-color).has-yellow-background-color[class],
    33742438:not(.has-text-color).has-white-background-color[class] {
    3375         color: #28303d;
     2439        color: var(--global--color-dark-gray);
    33762440}
    33772441
    33782442.has-purple-to-yellow-gradient-background {
    3379         background: linear-gradient(160deg, #d1d1e4, #eeeadd);
     2443        background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-yellow));
    33802444}
    33812445
    33822446.has-yellow-to-purple-gradient-background {
    3383         background: linear-gradient(160deg, #eeeadd, #d1d1e4);
     2447        background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-purple));
    33842448}
    33852449
    33862450.has-green-to-yellow-gradient-background {
    3387         background: linear-gradient(160deg, #d1e4dd, #eeeadd);
     2451        background: linear-gradient(160deg, var(--global--color-green), var(--global--color-yellow));
    33882452}
    33892453
    33902454.has-yellow-to-green-gradient-background {
    3391         background: linear-gradient(160deg, #eeeadd, #d1e4dd);
     2455        background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-green));
    33922456}
    33932457
    33942458.has-red-to-yellow-gradient-background {
    3395         background: linear-gradient(160deg, #e4d1d1, #eeeadd);
     2459        background: linear-gradient(160deg, var(--global--color-red), var(--global--color-yellow));
    33962460}
    33972461
    33982462.has-yellow-to-red-gradient-background {
    3399         background: linear-gradient(160deg, #eeeadd, #e4d1d1);
     2463        background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-red));
    34002464}
    34012465
    34022466.has-purple-to-red-gradient-background {
    3403         background: linear-gradient(160deg, #d1d1e4, #e4d1d1);
     2467        background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-red));
    34042468}
    34052469
    34062470.has-red-to-purple-gradient-background {
    3407         background: linear-gradient(160deg, #e4d1d1, #d1d1e4);
    3408 }
     2471        background: linear-gradient(160deg, var(--global--color-red), var(--global--color-purple));
     2472}

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

    r49633 r49728  
    102102
    103103        /* 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);
    104106
    105107        /* 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;
    106118
    107119        /* Line Height */
     120        --global--line-height-body: 1.7;
     121        --global--line-height-heading: 1.3;
     122        --global--line-height-page-title: 1.1;
    108123
    109124        /* 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;
    110147
    111148        /* 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);
    112155
    113156        /* 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);
    114171
    115172        /* Body text color, site title, footer text color. */
     173        --global--color-secondary: var(--global--color-gray);
    116174
    117175        /* Headings */
     176        --global--color-primary-hover: var(--global--color-primary);
     177        --global--color-background: var(--global--color-green);
    118178
    119179        /* Mint, default body background */
     180        --global--color-border: var(--global--color-primary);
    120181
    121182        /* Used for borders (separators) */
    122183
    123184        /* Spacing */
     185        --global--spacing-unit: 20px;
     186        --global--spacing-measure: unset;
     187        --global--spacing-horizontal: 25px;
     188        --global--spacing-vertical: 30px;
    124189
    125190        /* Elevation */
     191        --global--elevation: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
    126192
    127193        /* 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));
    128204
    129205        /* 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);
    130209
    131210        /* 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));
    132224
    133225        /* 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);
    134234
    135235        /* 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;
    136251
    137252        /* 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);
    138269
    139270        /* 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;
    140277
    141278        /* 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);
    142284
    143285        /* 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;
    144307
    145308        /* 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);
    146312
    147313        /* 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));
    148318
    149319        /* 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        }
    150342}
    151343
    … …  
    540732 * Root Media Query Variables
    541733 */
     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}
    542759
    543760/**
    544761 * Extends
    545762 */
    546 .post-thumbnail {
    547         max-width: calc(100vw - 30px);
     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),
     767.default-max-width {
     768        max-width: var(--responsive--aligndefault-width);
    548769        margin-left: auto;
    549770        margin-right: auto;
    550771}
    551 @media only screen and (min-width: 482px) {
    552 
    553         .post-thumbnail {
    554                 max-width: min(calc(100vw - 100px), 610px);
    555         }
    556 }
    557 @media only screen and (min-width: 822px) {
    558 
    559         .post-thumbnail {
    560                 max-width: min(calc(100vw - 200px), 610px);
    561         }
    562 }
    563 
    564 .entry-content .wp-audio-shortcode {
    565         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);
    566782        margin-left: auto;
    567783        margin-right: auto;
    568784}
    569 @media only screen and (min-width: 482px) {
    570 
    571         .entry-content .wp-audio-shortcode {
    572                 max-width: min(calc(100vw - 100px), 610px);
    573         }
    574 }
    575 @media only screen and (min-width: 822px) {
    576 
    577         .entry-content .wp-audio-shortcode {
    578                 max-width: min(calc(100vw - 200px), 610px);
    579         }
    580 }
    581 
    582 .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) {
    583         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);
    584791        margin-left: auto;
    585792        margin-right: auto;
    586793}
     794
    587795@media only screen and (min-width: 482px) {
    588796
    589         .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) {
    590                 max-width: min(calc(100vw - 100px), 610px);
    591         }
    592 }
    593 @media only screen and (min-width: 822px) {
    594 
    595         .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) {
    596                 max-width: min(calc(100vw - 200px), 610px);
    597         }
    598 }
    599 
    600 *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) {
    601         max-width: calc(100vw - 30px);
    602         margin-left: auto;
    603         margin-right: auto;
    604 }
    605 @media only screen and (min-width: 482px) {
    606 
    607         *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) {
    608                 max-width: min(calc(100vw - 100px), 610px);
    609         }
    610 }
    611 @media only screen and (min-width: 822px) {
    612 
    613         *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) {
    614                 max-width: min(calc(100vw - 200px), 610px);
    615         }
    616 }
    617 
    618 .default-max-width {
    619         max-width: calc(100vw - 30px);
    620         margin-left: auto;
    621         margin-right: auto;
    622 }
    623 @media only screen and (min-width: 482px) {
    624 
    625         .default-max-width {
    626                 max-width: min(calc(100vw - 100px), 610px);
    627         }
    628 }
    629 @media only screen and (min-width: 822px) {
    630 
    631         .default-max-width {
    632                 max-width: min(calc(100vw - 200px), 610px);
    633         }
    634 }
    635 
    636 .widget-area {
    637         max-width: calc(100vw - 30px);
    638         margin-left: auto;
    639         margin-right: auto;
    640 }
    641 
    642 @media only screen and (min-width: 482px) {
    643 
    644         .widget-area {
    645                 max-width: calc(100vw - 100px);
    646         }
    647 }
    648 
    649 @media only screen and (min-width: 822px) {
    650 
    651         .widget-area {
    652                 max-width: min(calc(100vw - 200px), 1240px);
    653         }
    654 }
    655 
    656 .pagination {
    657         max-width: calc(100vw - 30px);
    658         margin-left: auto;
    659         margin-right: auto;
    660 }
    661 
    662 @media only screen and (min-width: 482px) {
    663 
    664         .pagination {
    665                 max-width: calc(100vw - 100px);
    666         }
    667 }
    668 
    669 @media only screen and (min-width: 822px) {
    670 
    671         .pagination {
    672                 max-width: min(calc(100vw - 200px), 1240px);
    673         }
    674 }
    675 
    676 .comments-pagination {
    677         max-width: calc(100vw - 30px);
    678         margin-left: auto;
    679         margin-right: auto;
    680 }
    681 
    682 @media only screen and (min-width: 482px) {
    683 
    684         .comments-pagination {
    685                 max-width: calc(100vw - 100px);
    686         }
    687 }
    688 
    689 @media only screen and (min-width: 822px) {
    690 
    691         .comments-pagination {
    692                 max-width: min(calc(100vw - 200px), 1240px);
    693         }
    694 }
    695 
    696 .post-navigation {
    697         max-width: calc(100vw - 30px);
    698         margin-left: auto;
    699         margin-right: auto;
    700 }
    701 
    702 @media only screen and (min-width: 482px) {
    703 
    704         .post-navigation {
    705                 max-width: calc(100vw - 100px);
    706         }
    707 }
    708 
    709 @media only screen and (min-width: 822px) {
    710 
    711         .post-navigation {
    712                 max-width: min(calc(100vw - 200px), 1240px);
    713         }
    714 }
    715 
    716 .site-footer {
    717         max-width: calc(100vw - 30px);
    718         margin-left: auto;
    719         margin-right: auto;
    720 }
    721 
    722 @media only screen and (min-width: 482px) {
    723 
    724         .site-footer {
    725                 max-width: calc(100vw - 100px);
    726         }
    727 }
    728 
    729 @media only screen and (min-width: 822px) {
    730 
    731         .site-footer {
    732                 max-width: min(calc(100vw - 200px), 1240px);
    733         }
    734 }
    735 
    736 .site-header {
    737         max-width: calc(100vw - 30px);
    738         margin-left: auto;
    739         margin-right: auto;
    740 }
    741 
    742 @media only screen and (min-width: 482px) {
    743 
    744         .site-header {
    745                 max-width: calc(100vw - 100px);
    746         }
    747 }
    748 
    749 @media only screen and (min-width: 822px) {
    750 
    751         .site-header {
    752                 max-width: min(calc(100vw - 200px), 1240px);
    753         }
    754 }
    755 
    756 .alignwide {
    757         max-width: calc(100vw - 30px);
    758         margin-left: auto;
    759         margin-right: auto;
    760 }
    761 
    762 @media only screen and (min-width: 482px) {
    763 
    764         .alignwide {
    765                 max-width: calc(100vw - 100px);
    766         }
    767 }
    768 
    769 @media only screen and (min-width: 822px) {
    770 
    771         .alignwide {
    772                 max-width: min(calc(100vw - 200px), 1240px);
    773         }
    774 }
    775 
    776 .wide-max-width {
    777         max-width: calc(100vw - 30px);
    778         margin-left: auto;
    779         margin-right: auto;
    780 }
    781 
    782 @media only screen and (min-width: 482px) {
    783 
    784         .wide-max-width {
    785                 max-width: calc(100vw - 100px);
    786         }
    787 }
    788 
    789 @media only screen and (min-width: 822px) {
    790 
    791         .wide-max-width {
    792                 max-width: min(calc(100vw - 200px), 1240px);
    793         }
    794 }
    795 
    796 .alignfull {
    797         max-width: 100%;
    798         width: 100%;
    799         margin-left: auto;
    800         margin-right: auto;
    801 }
    802 
    803 .wp-block-group .wp-block-group__inner-container > *.alignfull {
    804         max-width: 100%;
    805         width: 100%;
    806         margin-left: auto;
    807         margin-right: auto;
    808 }
    809 
    810 .full-max-width {
    811         max-width: 100%;
    812         width: 100%;
    813         margin-left: auto;
    814         margin-right: auto;
    815 }
    816 
    817 @media only screen and (min-width: 482px) {
    818 
    819         .alignfull {
    820                 max-width: 100%;
     797        .alignfull,
     798        .full-max-width {
     799                max-width: var(--responsive--alignfull-width);
    821800                width: auto;
    822801                margin-left: auto;
    823802                margin-right: auto;
    824803        }
    825 
    826         .full-max-width {
    827                 max-width: 100%;
    828                 width: auto;
    829                 margin-left: auto;
    830                 margin-right: auto;
    831         }
    832 }
    833 
    834 .entry-header .post-thumbnail {
    835         margin-left: auto;
    836         margin-right: auto;
    837         width: calc(100vw - 30px);
    838         max-width: 100%;
    839 }
    840 @media only screen and (min-width: 482px) {
    841 
    842         .entry-header .post-thumbnail {
    843                 width: calc(100vw - 100px);
    844         }
    845 }
    846 @media only screen and (min-width: 822px) {
    847 
    848         .entry-header .post-thumbnail {
    849                 width: min(calc(100vw - 200px), 1240px);
    850         }
    851 }
    852 
    853 .singular .post-thumbnail {
    854         margin-left: auto;
    855         margin-right: auto;
    856         width: calc(100vw - 30px);
    857         max-width: 100%;
    858 }
    859 @media only screen and (min-width: 482px) {
    860 
    861         .singular .post-thumbnail {
    862                 width: calc(100vw - 100px);
    863         }
    864 }
    865 @media only screen and (min-width: 822px) {
    866 
    867         .singular .post-thumbnail {
    868                 width: min(calc(100vw - 200px), 1240px);
    869         }
    870 }
    871 
    872 .alignfull [class*=inner-container] > .alignwide {
    873         margin-left: auto;
    874         margin-right: auto;
    875         width: calc(100vw - 30px);
    876         max-width: 100%;
    877 }
    878 @media only screen and (min-width: 482px) {
    879 
    880         .alignfull [class*=inner-container] > .alignwide {
    881                 width: calc(100vw - 100px);
    882         }
    883 }
    884 @media only screen and (min-width: 822px) {
    885 
    886         .alignfull [class*=inner-container] > .alignwide {
    887                 width: min(calc(100vw - 200px), 1240px);
    888         }
    889 }
    890 
     804}
     805
     806.entry-header .post-thumbnail,
     807.singular .post-thumbnail,
     808.alignfull [class*=inner-container] > .alignwide,
    891809.alignwide [class*=inner-container] > .alignwide {
    892810        margin-left: auto;
    893811        margin-right: auto;
    894         width: calc(100vw - 30px);
    895         max-width: 100%;
    896 }
     812        width: var(--responsive--alignwide-width);
     813        max-width: var(--responsive--alignfull-width);
     814}
     815
    897816@media only screen and (min-width: 482px) {
    898817
    899         .alignwide [class*=inner-container] > .alignwide {
    900                 width: calc(100vw - 100px);
    901         }
    902 }
    903 @media only screen and (min-width: 822px) {
    904 
    905         .alignwide [class*=inner-container] > .alignwide {
    906                 width: min(calc(100vw - 200px), 1240px);
    907         }
    908 }
    909 
     818        .entry-content > .alignleft {
     819
     820                /*rtl:ignore*/
     821                margin-left: var(--responsive--alignleft-margin);
     822
     823                /*rtl:ignore*/
     824                margin-right: var(--global--spacing-horizontal);
     825        }
     826}
    910827@media only screen and (min-width: 482px) {
    911828
    912         .entry-content > .alignleft {
     829        .entry-content > .alignright {
    913830
    914831                /*rtl:ignore*/
    915                 margin-left: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1);
     832                margin-left: var(--global--spacing-horizontal);
    916833
    917834                /*rtl:ignore*/
    918                 margin-right: 25px;
    919         }
    920         @media only screen and (min-width: 482px) {
    921 
    922                 .entry-content > .alignleft {
    923                         margin-left: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1);
    924                 }
    925         }
    926         @media only screen and (min-width: 482px) {
    927 
    928                 .entry-content > .alignleft {
    929                         margin-left: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1);
    930                 }
    931         }
    932         @media only screen and (min-width: 822px) {
    933 
    934                 .entry-content > .alignleft {
    935                         margin-left: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1);
    936                 }
    937         }
    938 }
    939 @media only screen and (min-width: 482px) {
    940 
    941         .entry-content > .alignright {
    942 
    943                 /*rtl:ignore*/
    944                 margin-left: 25px;
    945 
    946                 /*rtl:ignore*/
    947                 margin-right: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1);
    948         }
    949         @media only screen and (min-width: 482px) {
    950 
    951                 .entry-content > .alignright {
    952                         margin-right: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1);
    953                 }
    954         }
    955         @media only screen and (min-width: 482px) {
    956 
    957                 .entry-content > .alignright {
    958                         margin-right: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1);
    959                 }
    960         }
    961         @media only screen and (min-width: 822px) {
    962 
    963                 .entry-content > .alignright {
    964                         margin-right: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1);
    965                 }
     835                margin-right: var(--responsive--alignright-margin);
    966836        }
    967837}
    … …  
    980850 * - Set vertical padding and horizontal margins
    981851 */
    982 .site-header {
    983         padding-top: 30px;
    984         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);
    985858        margin-left: auto;
    986859        margin-right: auto;
    987860}
    988861
    989 .site-main {
    990         padding-top: 30px;
    991         padding-bottom: 30px;
    992         margin-left: auto;
    993         margin-right: auto;
    994 }
    995 
    996 .widget-area {
    997         padding-top: 30px;
    998         padding-bottom: 30px;
    999         margin-left: auto;
    1000         margin-right: auto;
    1001 }
    1002 
    1003 .site-footer {
    1004         padding-top: 30px;
    1005         padding-bottom: 30px;
    1006         margin-left: auto;
    1007         margin-right: auto;
    1008 }
    1009 
    1010862.site-header {
    1011         padding-top: 23px;
    1012         padding-bottom: 60px;
     863        padding-top: calc(0.75 * var(--global--spacing-vertical));
     864        padding-bottom: calc(2 * var(--global--spacing-vertical));
    1013865}
    1014866@media only screen and (min-width: 482px) {
    1015867
    1016868        .site-header {
    1017                 padding-bottom: 90px;
     869                padding-bottom: calc(3 * var(--global--spacing-vertical));
    1018870        }
    1019871}
    … …  
    1024876 */
    1025877.site-main > * {
    1026         margin-top: 90px;
    1027         margin-bottom: 90px;
     878        margin-top: calc(3 * var(--global--spacing-vertical));
     879        margin-bottom: calc(3 * var(--global--spacing-vertical));
    1028880}
    1029881
    … …  
    1052904 * - Set margins
    1053905 */
    1054 .entry-header {
    1055         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);
    1056912        margin-right: auto;
    1057         margin-bottom: 30px;
    1058         margin-left: auto;
    1059 }
    1060 
    1061 .post-thumbnail {
    1062         margin-top: 30px;
    1063         margin-right: auto;
    1064         margin-bottom: 30px;
    1065         margin-left: auto;
    1066 }
    1067 
    1068 .entry-content {
    1069         margin-top: 30px;
    1070         margin-right: auto;
    1071         margin-bottom: 30px;
    1072         margin-left: auto;
    1073 }
    1074 
    1075 .entry-footer {
    1076         margin-top: 30px;
    1077         margin-right: auto;
    1078         margin-bottom: 30px;
    1079         margin-left: auto;
    1080 }
    1081 
    1082 .author-bio {
    1083         margin-top: 30px;
    1084         margin-right: auto;
    1085         margin-bottom: 30px;
     913        margin-bottom: var(--global--spacing-vertical);
    1086914        margin-left: auto;
    1087915}
    … …  
    1091919 * - Sets spacing-vertical margin logic
    1092920 */
    1093 .site-main > article > * {
    1094         margin-top: 20px;
    1095         margin-bottom: 20px;
    1096 }
    1097 
    1098 .site-main > .not-found > * {
    1099         margin-top: 20px;
    1100         margin-bottom: 20px;
    1101 }
    1102 
    1103 .entry-content > * {
    1104         margin-top: 20px;
    1105         margin-bottom: 20px;
    1106 }
    1107 
    1108 [class*=inner-container] > * {
    1109         margin-top: 20px;
    1110         margin-bottom: 20px;
    1111 }
    1112 
     921.site-main > article > *,
     922.site-main > .not-found > *,
     923.entry-content > *,
     924[class*=inner-container] > *,
    1113925.wp-block-template-part > * {
    1114         margin-top: 20px;
    1115         margin-bottom: 20px;
     926        margin-top: calc(0.666 * var(--global--spacing-vertical));
     927        margin-bottom: calc(0.666 * var(--global--spacing-vertical));
    1116928}
    1117929@media only screen and (min-width: 482px) {
    1118930
    1119         .site-main > article > * {
    1120                 margin-top: 30px;
    1121                 margin-bottom: 30px;
    1122         }
    1123 
    1124         .site-main > .not-found > * {
    1125                 margin-top: 30px;
    1126                 margin-bottom: 30px;
    1127         }
    1128 
    1129         .entry-content > * {
    1130                 margin-top: 30px;
    1131                 margin-bottom: 30px;
    1132         }
    1133 
    1134         [class*=inner-container] > * {
    1135                 margin-top: 30px;
    1136                 margin-bottom: 30px;
    1137         }
    1138 
     931        .site-main > article > *,
     932        .site-main > .not-found > *,
     933        .entry-content > *,
     934        [class*=inner-container] > *,
    1139935        .wp-block-template-part > * {
    1140                 margin-top: 30px;
    1141                 margin-bottom: 30px;
     936                margin-top: var(--global--spacing-vertical);
     937                margin-bottom: var(--global--spacing-vertical);
    1142938        }
    1143939}
    … …  
    1159955}
    1160956
    1161 .site-footer > * {
    1162         margin-top: 20px;
    1163         margin-bottom: 20px;
    1164 }
    1165 
     957.site-footer > *,
    1166958.widget-area > * {
    1167         margin-top: 20px;
    1168         margin-bottom: 20px;
     959        margin-top: calc(0.666 * var(--global--spacing-vertical));
     960        margin-bottom: calc(0.666 * var(--global--spacing-vertical));
    1169961}
    1170962@media only screen and (min-width: 482px) {
    1171963
    1172         .site-footer > * {
    1173                 margin-top: 30px;
    1174                 margin-bottom: 30px;
    1175         }
    1176 
     964        .site-footer > *,
    1177965        .widget-area > * {
    1178                 margin-top: 30px;
    1179                 margin-bottom: 30px;
     966                margin-top: var(--global--spacing-vertical);
     967                margin-bottom: var(--global--spacing-vertical);
    1180968        }
    1181969}
    … …  
    1185973 * - Sets spacing-unit margins
    1186974 */
    1187 .entry-header > * {
    1188         margin-top: 20px;
    1189         margin-bottom: 20px;
    1190 }
    1191 
    1192 .post-thumbnail > * {
    1193         margin-top: 20px;
    1194         margin-bottom: 20px;
    1195 }
    1196 
    1197 .page-content > * {
    1198         margin-top: 20px;
    1199         margin-bottom: 20px;
    1200 }
    1201 
    1202 .comment-content > * {
    1203         margin-top: 20px;
    1204         margin-bottom: 20px;
    1205 }
    1206 
     975.entry-header > *,
     976.post-thumbnail > *,
     977.page-content > *,
     978.comment-content > *,
    1207979.widget > * {
    1208         margin-top: 20px;
    1209         margin-bottom: 20px;
     980        margin-top: var(--global--spacing-unit);
     981        margin-bottom: var(--global--spacing-unit);
    1210982}
    1211983
    … …  
    12481020}
    12491021
    1250 .entry-content > *.alignfull + .alignleft {
    1251         margin-top: 30px;
    1252 }
    1253 
     1022.entry-content > *.alignfull + .alignleft,
    12541023.entry-content > *.alignfull + .alignright {
    1255         margin-top: 30px;
     1024        margin-top: var(--global--spacing-vertical);
    12561025}
    12571026
    … …  
    12981067        /* Apply border-box across the entire page. */
    12991068        box-sizing: border-box;
    1300         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1301         line-height: 1.7;
     1069        font-family: var(--global--font-secondary);
     1070        line-height: var(--global--line-height-body);
    13021071}
    13031072
    … …  
    13121081
    13131082body {
    1314         font-size: 1.25rem;
     1083        font-size: var(--global--font-size-base);
    13151084        font-weight: normal;
    1316         color: #28303d;
     1085        color: var(--global--color-primary);
    13171086        text-align: left;
    1318         background-color: #d1e4dd;
     1087        background-color: var(--global--color-background);
    13191088}
    13201089
    … …  
    13531122        padding: 0;
    13541123        position: relative;
    1355         margin: 30px 0 30px 25px;
     1124        margin: var(--global--spacing-vertical) 0 var(--global--spacing-vertical) var(--global--spacing-horizontal);
    13561125}
    13571126
    13581127blockquote > * {
    1359         margin-top: 20px;
    1360         margin-bottom: 20px;
     1128        margin-top: var(--global--spacing-unit);
     1129        margin-bottom: var(--global--spacing-unit);
    13611130}
    13621131
    … …  
    13701139
    13711140blockquote p {
    1372         letter-spacing: normal;
    1373         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    1374         font-size: 1.25rem;
    1375         font-style: normal;
    1376         font-weight: 700;
    1377         line-height: 1.7;
    1378 }
    1379 
    1380 blockquote cite {
    1381         font-weight: normal;
    1382         color: #28303d;
    1383         font-size: 1rem;
    1384         letter-spacing: normal;
    1385 }
    1386 
     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,
    13871150blockquote footer {
    13881151        font-weight: normal;
    1389         color: #28303d;
    1390         font-size: 1rem;
    1391         letter-spacing: normal;
     1152        color: var(--global--color-primary);
     1153        font-size: var(--global--font-size-xs);
     1154        letter-spacing: var(--global--letter-spacing);
    13921155}
    13931156
    … …  
    13971160}
    13981161
    1399 blockquote.alignleft p {
    1400         font-size: 1.125rem;
     1162blockquote.alignleft p,
     1163blockquote.alignright p {
     1164        font-size: var(--heading--font-size-h5);
    14011165        max-width: inherit;
    14021166        width: inherit;
    14031167}
    14041168
    1405 blockquote.alignright p {
    1406         font-size: 1.125rem;
    1407         max-width: inherit;
    1408         width: inherit;
    1409 }
    1410 
    1411 blockquote.alignleft cite {
    1412         font-size: 1rem;
    1413         letter-spacing: normal;
    1414 }
    1415 
    1416 blockquote.alignleft footer {
    1417         font-size: 1rem;
    1418         letter-spacing: normal;
    1419 }
    1420 
    1421 blockquote.alignright cite {
    1422         font-size: 1rem;
    1423         letter-spacing: normal;
    1424 }
    1425 
     1169blockquote.alignleft cite,
     1170blockquote.alignleft footer,
     1171blockquote.alignright cite,
    14261172blockquote.alignright footer {
    1427         font-size: 1rem;
    1428         letter-spacing: normal;
     1173        font-size: var(--global--font-size-xs);
     1174        letter-spacing: var(--global--letter-spacing);
    14291175}
    14301176
    14311177blockquote strong {
    1432         font-weight: bolder;
     1178        font-weight: var(--quote--font-weight-strong);
    14331179}
    14341180
    14351181blockquote:before {
    14361182        content: "“";
    1437         font-size: 1.25rem;
    1438         line-height: 1.7;
    1439 }
    1440 
    1441 blockquote .wp-block-quote__citation {
    1442         color: #28303d;
    1443         font-size: 1rem;
    1444         font-style: normal;
    1445 }
    1446 
    1447 blockquote cite {
    1448         color: #28303d;
    1449         font-size: 1rem;
    1450         font-style: normal;
    1451 }
    1452 
     1183        font-size: var(--quote--font-size);
     1184        line-height: var(--quote--line-height);
     1185        position: absolute;
     1186        left: calc(-0.5 * var(--global--spacing-horizontal));
     1187}
     1188
     1189blockquote .wp-block-quote__citation,
     1190blockquote cite,
    14531191blockquote footer {
    1454         color: #28303d;
    1455         font-size: 1rem;
    1456         font-style: normal;
     1192        color: var(--global--color-primary);
     1193        font-size: var(--global--font-size-xs);
     1194        font-style: var(--quote--font-style-cite);
    14571195}
    14581196@media only screen and (max-width: 481px) {
    14591197
    14601198        blockquote {
    1461                 padding-left: 13px;
     1199                padding-left: calc(0.5 * var(--global--spacing-horizontal));
    14621200        }
    14631201
    … …  
    14671205}
    14681206
    1469 input[type=text] {
    1470         border: 3px solid #39414d;
    1471         border-radius: 0;
    1472         color: #28303d;
    1473         line-height: 1.7;
    1474         padding: 10px;
     1207input[type=text],
     1208input[type=email],
     1209input[type=url],
     1210input[type=password],
     1211input[type=search],
     1212input[type=number],
     1213input[type=tel],
     1214input[type=date],
     1215input[type=month],
     1216input[type=week],
     1217input[type=time],
     1218input[type=datetime],
     1219input[type=datetime-local],
     1220input[type=color],
     1221.site textarea {
     1222        border: var(--form--border-width) solid var(--form--border-color);
     1223        border-radius: var(--form--border-radius);
     1224        color: var(--form--color-text);
     1225        line-height: var(--global--line-height-body);
     1226        padding: var(--form--spacing-unit);
    14751227        margin: 0 2px;
    14761228}
    14771229
    1478 input[type=email] {
    1479         border: 3px solid #39414d;
    1480         border-radius: 0;
    1481         color: #28303d;
    1482         line-height: 1.7;
    1483         padding: 10px;
    1484         margin: 0 2px;
    1485 }
    1486 
    1487 input[type=url] {
    1488         border: 3px solid #39414d;
    1489         border-radius: 0;
    1490         color: #28303d;
    1491         line-height: 1.7;
    1492         padding: 10px;
    1493         margin: 0 2px;
    1494 }
    1495 
    1496 input[type=password] {
    1497         border: 3px solid #39414d;
    1498         border-radius: 0;
    1499         color: #28303d;
    1500         line-height: 1.7;
    1501         padding: 10px;
    1502         margin: 0 2px;
    1503 }
    1504 
    1505 input[type=search] {
    1506         border: 3px solid #39414d;
    1507         border-radius: 0;
    1508         color: #28303d;
    1509         line-height: 1.7;
    1510         padding: 10px;
    1511         margin: 0 2px;
    1512 }
    1513 
    1514 input[type=number] {
    1515         border: 3px solid #39414d;
    1516         border-radius: 0;
    1517         color: #28303d;
    1518         line-height: 1.7;
    1519         padding: 10px;
    1520         margin: 0 2px;
    1521 }
    1522 
    1523 input[type=tel] {
    1524         border: 3px solid #39414d;
    1525         border-radius: 0;
    1526         color: #28303d;
    1527         line-height: 1.7;
    1528         padding: 10px;
    1529         margin: 0 2px;
    1530 }
    1531 
    1532 input[type=date] {
    1533         border: 3px solid #39414d;
    1534         border-radius: 0;
    1535         color: #28303d;
    1536         line-height: 1.7;
    1537         padding: 10px;
    1538         margin: 0 2px;
    1539 }
    1540 
    1541 input[type=month] {
    1542         border: 3px solid #39414d;
    1543         border-radius: 0;
    1544         color: #28303d;
    1545         line-height: 1.7;
    1546         padding: 10px;
    1547         margin: 0 2px;
    1548 }
    1549 
    1550 input[type=week] {
    1551         border: 3px solid #39414d;
    1552         border-radius: 0;
    1553         color: #28303d;
    1554         line-height: 1.7;
    1555         padding: 10px;
    1556         margin: 0 2px;
    1557 }
    1558 
    1559 input[type=time] {
    1560         border: 3px solid #39414d;
    1561         border-radius: 0;
    1562         color: #28303d;
    1563         line-height: 1.7;
    1564         padding: 10px;
    1565         margin: 0 2px;
    1566 }
    1567 
    1568 input[type=datetime] {
    1569         border: 3px solid #39414d;
    1570         border-radius: 0;
    1571         color: #28303d;
    1572         line-height: 1.7;
    1573         padding: 10px;
    1574         margin: 0 2px;
    1575 }
    1576 
    1577 input[type=datetime-local] {
    1578         border: 3px solid #39414d;
    1579         border-radius: 0;
    1580         color: #28303d;
    1581         line-height: 1.7;
    1582         padding: 10px;
    1583         margin: 0 2px;
    1584 }
    1585 
    1586 input[type=color] {
    1587         border: 3px solid #39414d;
    1588         border-radius: 0;
    1589         color: #28303d;
    1590         line-height: 1.7;
    1591         padding: 10px;
    1592         margin: 0 2px;
    1593 }
    1594 
    1595 .site textarea {
    1596         border: 3px solid #39414d;
    1597         border-radius: 0;
    1598         color: #28303d;
    1599         line-height: 1.7;
    1600         padding: 10px;
    1601         margin: 0 2px;
    1602 }
    1603 
    1604 input[type=text]:focus {
    1605         color: #28303d;
     1230input[type=text]:focus,
     1231input[type=email]:focus,
     1232input[type=url]:focus,
     1233input[type=password]:focus,
     1234input[type=search]:focus,
     1235input[type=number]:focus,
     1236input[type=tel]:focus,
     1237input[type=date]:focus,
     1238input[type=month]:focus,
     1239input[type=week]:focus,
     1240input[type=time]:focus,
     1241input[type=datetime]:focus,
     1242input[type=datetime-local]:focus,
     1243input[type=color]:focus,
     1244.site textarea:focus {
     1245        color: var(--form--color-text);
    16061246        outline-offset: 2px;
    1607         outline: 2px dotted #39414d;
    1608 }
    1609 
    1610 input[type=email]:focus {
    1611         color: #28303d;
    1612         outline-offset: 2px;
    1613         outline: 2px dotted #39414d;
    1614 }
    1615 
    1616 input[type=url]:focus {
    1617         color: #28303d;
    1618         outline-offset: 2px;
    1619         outline: 2px dotted #39414d;
    1620 }
    1621 
    1622 input[type=password]:focus {
    1623         color: #28303d;
    1624         outline-offset: 2px;
    1625         outline: 2px dotted #39414d;
    1626 }
    1627 
    1628 input[type=search]:focus {
    1629         color: #28303d;
    1630         outline-offset: 2px;
    1631         outline: 2px dotted #39414d;
    1632 }
    1633 
    1634 input[type=number]:focus {
    1635         color: #28303d;
    1636         outline-offset: 2px;
    1637         outline: 2px dotted #39414d;
    1638 }
    1639 
    1640 input[type=tel]:focus {
    1641         color: #28303d;
    1642         outline-offset: 2px;
    1643         outline: 2px dotted #39414d;
    1644 }
    1645 
    1646 input[type=date]:focus {
    1647         color: #28303d;
    1648         outline-offset: 2px;
    1649         outline: 2px dotted #39414d;
    1650 }
    1651 
    1652 input[type=month]:focus {
    1653         color: #28303d;
    1654         outline-offset: 2px;
    1655         outline: 2px dotted #39414d;
    1656 }
    1657 
    1658 input[type=week]:focus {
    1659         color: #28303d;
    1660         outline-offset: 2px;
    1661         outline: 2px dotted #39414d;
    1662 }
    1663 
    1664 input[type=time]:focus {
    1665         color: #28303d;
    1666         outline-offset: 2px;
    1667         outline: 2px dotted #39414d;
    1668 }
    1669 
    1670 input[type=datetime]:focus {
    1671         color: #28303d;
    1672         outline-offset: 2px;
    1673         outline: 2px dotted #39414d;
    1674 }
    1675 
    1676 input[type=datetime-local]:focus {
    1677         color: #28303d;
    1678         outline-offset: 2px;
    1679         outline: 2px dotted #39414d;
    1680 }
    1681 
    1682 input[type=color]:focus {
    1683         color: #28303d;
    1684         outline-offset: 2px;
    1685         outline: 2px dotted #39414d;
    1686 }
    1687 
    1688 .site textarea:focus {
    1689         color: #28303d;
    1690         outline-offset: 2px;
    1691         outline: 2px dotted #39414d;
     1247        outline: 2px dotted var(--form--border-color);
    16921248}
    16931249
    … …  
    17101266}
    17111267
    1712 .is-dark-theme input[type=text] {
    1713         background: rgba(255, 255, 255, 0.9);
    1714 }
    1715 
    1716 .is-dark-theme input[type=email] {
    1717         background: rgba(255, 255, 255, 0.9);
    1718 }
    1719 
    1720 .is-dark-theme input[type=url] {
    1721         background: rgba(255, 255, 255, 0.9);
    1722 }
    1723 
    1724 .is-dark-theme input[type=password] {
    1725         background: rgba(255, 255, 255, 0.9);
    1726 }
    1727 
    1728 .is-dark-theme input[type=search] {
    1729         background: rgba(255, 255, 255, 0.9);
    1730 }
    1731 
    1732 .is-dark-theme input[type=number] {
    1733         background: rgba(255, 255, 255, 0.9);
    1734 }
    1735 
    1736 .is-dark-theme input[type=tel] {
    1737         background: rgba(255, 255, 255, 0.9);
    1738 }
    1739 
    1740 .is-dark-theme input[type=date] {
    1741         background: rgba(255, 255, 255, 0.9);
    1742 }
    1743 
    1744 .is-dark-theme input[type=month] {
    1745         background: rgba(255, 255, 255, 0.9);
    1746 }
    1747 
    1748 .is-dark-theme input[type=week] {
    1749         background: rgba(255, 255, 255, 0.9);
    1750 }
    1751 
    1752 .is-dark-theme input[type=time] {
    1753         background: rgba(255, 255, 255, 0.9);
    1754 }
    1755 
    1756 .is-dark-theme input[type=datetime] {
    1757         background: rgba(255, 255, 255, 0.9);
    1758 }
    1759 
    1760 .is-dark-theme input[type=datetime-local] {
    1761         background: rgba(255, 255, 255, 0.9);
    1762 }
    1763 
    1764 .is-dark-theme input[type=color] {
    1765         background: rgba(255, 255, 255, 0.9);
    1766 }
    1767 
     1268.is-dark-theme input[type=text],
     1269.is-dark-theme input[type=email],
     1270.is-dark-theme input[type=url],
     1271.is-dark-theme input[type=password],
     1272.is-dark-theme input[type=search],
     1273.is-dark-theme input[type=number],
     1274.is-dark-theme input[type=tel],
     1275.is-dark-theme input[type=date],
     1276.is-dark-theme input[type=month],
     1277.is-dark-theme input[type=week],
     1278.is-dark-theme input[type=time],
     1279.is-dark-theme input[type=datetime],
     1280.is-dark-theme input[type=datetime-local],
     1281.is-dark-theme input[type=color],
    17681282.is-dark-theme .site textarea {
    1769         background: rgba(255, 255, 255, 0.9);
     1283        background: var(--global--color-white-90);
    17701284}
    17711285
    … …  
    17751289
    17761290.is-dark-theme input[type=search]:focus {
    1777         outline-color: #d1e4dd;
     1291        outline-color: var(--global--color-background);
    17781292}
    17791293
    17801294input[type=color] {
    1781         padding: 5px;
    1782         height: 40px;
     1295        padding: calc(var(--form--spacing-unit) / 2);
     1296        height: calc(4 * var(--form--spacing-unit));
    17831297}
    17841298
    … …  
    17911305
    17921306select {
    1793         border: 3px solid #39414d;
    1794         color: #28303d;
     1307        border: var(--form--border-width) solid var(--form--border-color);
     1308        color: var(--form--color-text);
    17951309        -moz-appearance: none;
    17961310        -webkit-appearance: none;
    17971311        appearance: none;
    1798         line-height: 1.7;
    1799         padding: 10px 30px 10px 10px;
    1800         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;
    1801         background-position: right 10px top 60%;
     1312        line-height: var(--global--line-height-body);
     1313        padding: var(--form--spacing-unit) calc(3 * var(--form--spacing-unit)) var(--form--spacing-unit) var(--form--spacing-unit);
     1314        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;
     1315        background-position: right var(--form--spacing-unit) top 60%;
    18021316}
    18031317
    18041318select:focus {
    18051319        outline-offset: 2px;
    1806         outline: 2px dotted #39414d;
     1320        outline: 2px dotted var(--form--border-color);
    18071321}
    18081322
    18091323.is-dark-theme select {
    1810         background: rgba(255, 255, 255, 0.9) 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;
    1811         background-position: right 10px top 60%;
     1324        background: var(--global--color-white-90) 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;
     1325        background-position: right var(--form--spacing-unit) top 60%;
    18121326}
    18131327
    … …  
    18171331
    18181332label {
    1819         font-size: 1.125rem;
    1820         font-weight: 500;
    1821         margin-bottom: 10px;
     1333        font-size: var(--form--font-size);
     1334        font-weight: var(--form--label-weight);
     1335        margin-bottom: calc(var(--global--spacing-vertical) / 3);
    18221336}
    18231337
    … …  
    18291343@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    18301344
    1831         input[type=checkbox] {
    1832                 -webkit-appearance: none;
    1833                 -moz-appearance: none;
    1834                 position: relative;
    1835                 width: 25px;
    1836                 height: 25px;
    1837                 border: 3px solid #39414d;
    1838                 background: #fff;
    1839         }
    1840 
     1345        input[type=checkbox],
    18411346        input[type=radio] {
    18421347                -webkit-appearance: none;
    … …  
    18451350                width: 25px;
    18461351                height: 25px;
    1847                 border: 3px solid #39414d;
    1848                 background: #fff;
     1352                border: var(--form--border-width) solid var(--form--border-color);
     1353                background: var(--global--color-white);
    18491354        }
    18501355
    … …  
    18541359        }
    18551360
    1856         .is-dark-theme input[type=checkbox] {
    1857                 background: rgba(255, 255, 255, 0.9);
    1858         }
    1859 
     1361        .is-dark-theme input[type=checkbox],
    18601362        .is-dark-theme input[type=radio] {
    1861                 background: rgba(255, 255, 255, 0.9);
     1363                background: var(--global--color-white-90);
    18621364        }
    18631365
    18641366        input[type=checkbox]:focus {
    18651367                outline-offset: 2px;
    1866                 outline: 2px dotted #39414d;
     1368                outline: 2px dotted var(--form--border-color);
    18671369        }
    18681370
    … …  
    18761378                width: 7px;
    18771379                height: 13px;
    1878                 border: 3px solid #28303d;
     1380                border: 3px solid var(--form--color-text);
    18791381                border-top: 0;
    18801382                border-left: 0;
    … …  
    18831385
    18841386        input[type=checkbox]:checked {
    1885                 color: #28303d;
     1387                color: var(--form--color-text);
    18861388        }
    18871389
    … …  
    18961398        input[type=radio]:focus {
    18971399                outline-offset: 2px;
    1898                 outline: 2px dotted #39414d;
     1400                outline: 2px dotted var(--form--border-color);
    18991401        }
    19001402
    … …  
    19091411                height: 11px;
    19101412                border-radius: 50%;
    1911                 background: #28303d;
     1413                background: var(--form--color-text);
    19121414        }
    19131415
    19141416        input[type=radio]:checked {
    1915                 border: 4px solid #39414d;
     1417                border: 4px solid var(--form--border-color);
    19161418        }
    19171419
    … …  
    19221424        input[type=radio]:checked:focus {
    19231425                outline-offset: 4px;
    1924                 outline: 2px dotted #39414d;
    1925         }
    1926 }
    1927 
    1928 input[type=checkbox] + label {
    1929         display: inline-block;
    1930         padding-left: 10px;
    1931         font-size: 1rem;
    1932         vertical-align: top;
    1933 }
    1934 
     1426                outline: 2px dotted var(--form--border-color);
     1427        }
     1428}
     1429
     1430input[type=checkbox] + label,
    19351431input[type=radio] + label {
    19361432        display: inline-block;
    19371433        padding-left: 10px;
    1938         font-size: 1rem;
     1434        font-size: var(--global--font-size-xs);
    19391435        vertical-align: top;
    19401436}
    … …  
    19531449                /* Specific width is required for Firefox. */
    19541450                height: 6px;
    1955                 background: #39414d;
     1451                background: var(--form--color-ranged);
    19561452                border-radius: 6px;
    19571453                outline-offset: 10px;
    … …  
    19641460        input[type=range]::-webkit-slider-thumb {
    19651461                -webkit-appearance: none;
    1966                 border: 3px solid #39414d;
    1967                 height: 25px;
    1968                 width: 25px;
     1462                border: 3px solid var(--form--color-ranged);
     1463                height: 44px;
     1464                width: 44px;
    19691465                border-radius: 50%;
    1970                 background: #d1e4dd;
     1466                background: var(--global--color-background);
    19711467                cursor: pointer;
    19721468        }
    19731469
    19741470        input[type=range]::-moz-range-thumb {
    1975                 border: 3px solid #39414d;
    1976                 height: 25px;
    1977                 width: 25px;
     1471                border: 3px solid var(--form--color-ranged);
     1472                height: 44px;
     1473                width: 44px;
    19781474                border-radius: 50%;
    1979                 background: #d1e4dd;
     1475                background: var(--global--color-background);
    19801476                cursor: pointer;
     1477                box-sizing: border-box;
    19811478        }
    19821479}
    … …  
    19871484        border-radius: 6px;
    19881485        border-width: 19px 0;
    1989         border-color: #d1e4dd;
     1486        border-color: var(--global--color-background);
    19901487        background: transparent;
    19911488        color: transparent;
    … …  
    19941491
    19951492input[type=range]::-ms-fill-upper {
    1996         background: #39414d;
     1493        background: var(--form--color-ranged);
    19971494        border-radius: 6px;
    19981495}
    19991496
    20001497input[type=range]::-ms-fill-lower {
    2001         background: #39414d;
     1498        background: var(--form--color-ranged);
    20021499        border-radius: 6px;
    20031500}
    20041501
    20051502input[type=range]::-ms-thumb {
    2006         border: 3px solid #39414d;
    2007         height: 25px;
    2008         width: 25px;
     1503        border: 3px solid var(--form--color-ranged);
     1504        height: 44px;
     1505        width: 44px;
    20091506        border-radius: 50%;
    2010         background: #d1e4dd;
     1507        background: var(--global--color-background);
    20111508        cursor: pointer;
    20121509}
    … …  
    20141511fieldset {
    20151512        display: grid;
    2016         border-color: #39414d;
    2017         padding: 25px;
     1513        border-color: var(--global--color-secondary);
     1514        padding: var(--global--spacing-horizontal);
    20181515}
    20191516
    20201517fieldset legend {
    2021         font-size: 1.5rem;
     1518        font-size: var(--global--font-size-lg);
    20221519}
    20231520
    … …  
    20271524
    20281525fieldset input:not([type=submit]) {
    2029         margin-bottom: 20px;
     1526        margin-bottom: var(--global--spacing-unit);
    20301527}
    20311528
    … …  
    20351532}
    20361533
    2037 fieldset input[type=radio] + label {
    2038         font-size: 1.125rem;
     1534fieldset input[type=radio] + label,
     1535fieldset input[type=checkbox] + label {
     1536        font-size: var(--form--font-size);
    20391537        padding-left: 0;
    2040         margin-bottom: 20px;
    2041 }
    2042 
    2043 fieldset input[type=checkbox] + label {
    2044         font-size: 1.125rem;
    2045         padding-left: 0;
    2046         margin-bottom: 20px;
     1538        margin-bottom: var(--global--spacing-unit);
    20471539}
    20481540
    … …  
    20521544
    20531545.post-password-message {
    2054         font-size: 1.5rem;
     1546        font-size: var(--global--font-size-lg);
    20551547}
    20561548
    … …  
    20671559.post-password-form input[type=password] {
    20681560        flex-grow: 1;
    2069         margin-top: 10px;
    2070         margin-right: 17px;
     1561        margin-top: calc(var(--global--spacing-vertical) / 3);
     1562        margin-right: calc(0.66 * var(--global--spacing-horizontal));
    20711563}
    20721564
    20731565.post-password-form__submit {
    2074         margin-top: 10px;
     1566        margin-top: calc(var(--global--spacing-vertical) / 3);
    20751567}
    20761568@media only screen and (min-width: 592px) {
    20771569
    20781570        .post-password-form__submit {
    2079                 margin-left: 10px;
     1571                margin-left: calc(0.4 * var(--global--spacing-horizontal));
    20801572        }
    20811573}
    … …  
    21011593
    21021594/* Media captions */
    2103 figcaption {
     1595figcaption,
     1596.wp-caption,
     1597.wp-caption-text,
     1598.wp-block-embed figcaption {
    21041599        color: currentColor;
    2105         font-size: 1rem;
    2106         line-height: 1.7;
    2107         margin-top: 10px;
    2108         margin-bottom: 20px;
    2109         text-align: center;
    2110 }
    2111 
    2112 .wp-caption {
    2113         color: currentColor;
    2114         font-size: 1rem;
    2115         line-height: 1.7;
    2116         margin-top: 10px;
    2117         margin-bottom: 20px;
    2118         text-align: center;
    2119 }
    2120 
    2121 .wp-caption-text {
    2122         color: currentColor;
    2123         font-size: 1rem;
    2124         line-height: 1.7;
    2125         margin-top: 10px;
    2126         margin-bottom: 20px;
     1600        font-size: var(--global--font-size-xs);
     1601        line-height: var(--global--line-height-body);
     1602        margin-top: calc(0.5 * var(--global--spacing-unit));
     1603        margin-bottom: var(--global--spacing-unit);
    21271604        text-align: center;
    21281605}
    … …  
    21331610.alignright .wp-caption,
    21341611.alignleft .wp-caption-text,
    2135 .alignright .wp-caption-text {
     1612.alignright .wp-caption-text,
     1613.alignleft .wp-block-embed figcaption,
     1614.alignright .wp-block-embed figcaption {
    21361615        margin-bottom: 0;
    21371616}
    … …  
    21721651a {
    21731652        cursor: pointer;
    2174         color: #28303d;
     1653        color: var(--wp--style--color--link, var(--global--color-primary));
    21751654        text-underline-offset: 3px;
    21761655        text-decoration-skip-ink: all;
    … …  
    21821661}
    21831662
    2184 .site a:focus {
     1663.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
    21851664
    21861665        /* Only visible in Windows High Contrast mode */
    21871666        outline: 2px solid transparent;
     1667        text-decoration: underline 1px dotted currentColor;
     1668        text-decoration-skip-ink: none;
    21881669        background: rgba(255, 255, 255, 0.9);
    21891670}
    21901671
    2191 .is-dark-theme .site a:focus {
    2192         color: #d1e4dd;
    2193 }
    2194 
    2195 .is-dark-theme .site a:focus .meta-nav {
    2196         color: #d1e4dd;
    2197 }
    2198 
    2199 .has-background-white .site a:focus {
     1672.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),
     1673.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
     1674        color: var(--wp--style--color--link, var(--global--color-background));
     1675}
     1676
     1677.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
    22001678        background: rgba(0, 0, 0, 0.9);
    2201         color: #fff;
    2202 }
    2203 
    2204 .has-background-white .site a:focus .meta-nav {
    2205         color: #fff;
    2206 }
    2207 
    2208 .site a:focus.skip-link {
     1679        color: var(--wp--style--color--link, var(--global--color-white));
     1680}
     1681
     1682.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
     1683        color: var(--wp--style--color--link, var(--global--color-white));
     1684}
     1685
     1686.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link {
    22091687
    22101688        /* Only visible in Windows High Contrast mode */
    … …  
    22131691}
    22141692
    2215 .site a:focus.skip-link:focus {
     1693.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link:focus {
    22161694        color: #21759b;
    22171695        background-color: #f1f1f1;
    22181696}
    22191697
    2220 .site a:focus img {
    2221         outline: 2px dotted #28303d;
    2222 }
    2223 
    2224 .has-background:not(.has-background-background-color) .has-link-color a {
    2225         color: #28303d;
    2226 }
    2227 
    2228 .has-background:not(.has-background-background-color).has-link-color a {
    2229         color: #28303d;
     1698.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img {
     1699        outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary));
     1700}
     1701
     1702.has-background .has-link-color a,
     1703.has-background.has-link-color a {
     1704        color: var(--wp--style--color--link, var(--global--color-primary));
    22301705}
    22311706
    … …  
    22331708.wp-block-audio audio:focus {
    22341709        outline-offset: 5px;
    2235         outline: 2px solid #28303d;
     1710        outline: 2px solid var(--global--color-primary);
    22361711}
    22371712
    … …  
    22391714 * Button
    22401715 */
    2241 .site .button {
    2242         line-height: 1.5;
    2243         color: #d1e4dd;
     1716.site .button,
     1717input[type=submit],
     1718input[type=reset],
     1719.wp-block-search__button,
     1720.wp-block-button .wp-block-button__link {
     1721        line-height: var(--button--line-height);
     1722        color: var(--button--color-text);
    22441723        cursor: pointer;
    2245         font-weight: 500;
    2246         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2247         font-size: 1.25rem;
    2248         background-color: #39414d;
    2249         border-radius: 0;
    2250         border: 3px solid #39414d;
     1724        font-weight: var(--button--font-weight);
     1725        font-family: var(--button--font-family);
     1726        font-size: var(--button--font-size);
     1727        background-color: var(--button--color-background);
     1728        border-radius: var(--button--border-radius);
     1729        border: var(--button--border-width) solid var(--button--color-background);
    22511730        text-decoration: none;
    2252         padding: 15px 30px;
    2253 }
    2254 
    2255 input[type=submit] {
    2256         line-height: 1.5;
    2257         color: #d1e4dd;
    2258         cursor: pointer;
    2259         font-weight: 500;
    2260         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2261         font-size: 1.25rem;
    2262         background-color: #39414d;
    2263         border-radius: 0;
    2264         border: 3px solid #39414d;
    2265         text-decoration: none;
    2266         padding: 15px 30px;
    2267 }
    2268 
    2269 input[type=reset] {
    2270         line-height: 1.5;
    2271         color: #d1e4dd;
    2272         cursor: pointer;
    2273         font-weight: 500;
    2274         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2275         font-size: 1.25rem;
    2276         background-color: #39414d;
    2277         border-radius: 0;
    2278         border: 3px solid #39414d;
    2279         text-decoration: none;
    2280         padding: 15px 30px;
    2281 }
    2282 
    2283 .wp-block-search__button {
    2284         line-height: 1.5;
    2285         color: #d1e4dd;
    2286         cursor: pointer;
    2287         font-weight: 500;
    2288         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2289         font-size: 1.25rem;
    2290         background-color: #39414d;
    2291         border-radius: 0;
    2292         border: 3px solid #39414d;
    2293         text-decoration: none;
    2294         padding: 15px 30px;
    2295 }
    2296 
    2297 .wp-block-button .wp-block-button__link {
    2298         line-height: 1.5;
    2299         color: #d1e4dd;
    2300         cursor: pointer;
    2301         font-weight: 500;
    2302         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2303         font-size: 1.25rem;
    2304         background-color: #39414d;
    2305         border-radius: 0;
    2306         border: 3px solid #39414d;
    2307         text-decoration: none;
    2308         padding: 15px 30px;
    2309 }
    2310 
    2311 .site .button:before,
    2312 .site .button:after,
    2313 input[type=submit]:before,
    2314 input[type=submit]:after,
    2315 input[type=reset]:before,
    2316 input[type=reset]:after,
    2317 .wp-block-search__button:before,
    2318 .wp-block-search__button:after,
    2319 .wp-block-button .wp-block-button__link:before,
    2320 .wp-block-button .wp-block-button__link:after {
    2321         content: "";
    2322         display: block;
    2323         height: 0;
    2324         width: 0;
    2325 }
    2326 
    2327 .site .button:before {
    2328         margin-bottom: -calc(1em - 0);
    2329 }
    2330 
    2331 input[type=submit]:before {
    2332         margin-bottom: -calc(1em - 0);
    2333 }
    2334 
    2335 input[type=reset]:before {
    2336         margin-bottom: -calc(1em - 0);
    2337 }
    2338 
    2339 .wp-block-search__button:before {
    2340         margin-bottom: -calc(1em - 0);
    2341 }
    2342 
    2343 .wp-block-button .wp-block-button__link:before {
    2344         margin-bottom: -calc(1em - 0);
    2345 }
    2346 
    2347 .site .button:after {
    2348         margin-top: -calc(1em - 0);
    2349 }
    2350 
    2351 input[type=submit]:after {
    2352         margin-top: -calc(1em - 0);
    2353 }
    2354 
    2355 input[type=reset]:after {
    2356         margin-top: -calc(1em - 0);
    2357 }
    2358 
    2359 .wp-block-search__button:after {
    2360         margin-top: -calc(1em - 0);
    2361 }
    2362 
    2363 .wp-block-button .wp-block-button__link:after {
    2364         margin-top: -calc(1em - 0);
     1731        padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    23651732}
    23661733
    … …  
    23751742}
    23761743
    2377 .is-dark-theme .site .button:focus {
    2378         color: #39414d;
    2379 }
    2380 
    2381 .is-dark-theme input[type=submit]:focus {
    2382         color: #39414d;
    2383 }
    2384 
    2385 .is-dark-theme input[type=reset]:focus {
    2386         color: #39414d;
    2387 }
    2388 
    2389 .is-dark-theme .wp-block-search__button:focus {
    2390         color: #39414d;
    2391 }
    2392 
     1744.is-dark-theme .site .button:focus,
     1745.is-dark-theme input[type=submit]:focus,
     1746.is-dark-theme input[type=reset]:focus,
     1747.is-dark-theme .wp-block-search__button:focus,
    23931748.is-dark-theme .wp-block-button .wp-block-button__link:focus {
    2394         color: #39414d;
    2395 }
    2396 
    2397 .site .button:focus:not(.has-background) {
    2398         color: #39414d;
    2399 }
    2400 
    2401 input[type=submit]:focus:not(.has-background) {
    2402         color: #39414d;
    2403 }
    2404 
    2405 input[type=reset]:focus:not(.has-background) {
    2406         color: #39414d;
    2407 }
    2408 
    2409 .wp-block-search__button:focus:not(.has-background) {
    2410         color: #39414d;
    2411 }
    2412 
     1749        color: var(--button--color-background);
     1750}
     1751
     1752.site .button:focus:not(.has-background),
     1753input[type=submit]:focus:not(.has-background),
     1754input[type=reset]:focus:not(.has-background),
     1755.wp-block-search__button:focus:not(.has-background),
    24131756.wp-block-button .wp-block-button__link:focus:not(.has-background) {
    2414         color: #39414d;
    2415 }
    2416 
    2417 .site .button:disabled {
    2418         background-color: rgba(255, 255, 255, 0.5);
    2419         border-color: rgba(255, 255, 255, 0.5);
    2420         color: #39414d;
    2421 }
    2422 
    2423 input[type=submit]:disabled {
    2424         background-color: rgba(255, 255, 255, 0.5);
    2425         border-color: rgba(255, 255, 255, 0.5);
    2426         color: #39414d;
    2427 }
    2428 
    2429 input[type=reset]:disabled {
    2430         background-color: rgba(255, 255, 255, 0.5);
    2431         border-color: rgba(255, 255, 255, 0.5);
    2432         color: #39414d;
    2433 }
    2434 
    2435 .wp-block-search__button:disabled {
    2436         background-color: rgba(255, 255, 255, 0.5);
    2437         border-color: rgba(255, 255, 255, 0.5);
    2438         color: #39414d;
    2439 }
    2440 
     1757        color: var(--button--color-text-hover);
     1758}
     1759
     1760.site .button:disabled,
     1761input[type=submit]:disabled,
     1762input[type=reset]:disabled,
     1763.wp-block-search__button:disabled,
    24411764.wp-block-button .wp-block-button__link:disabled {
    2442         background-color: rgba(255, 255, 255, 0.5);
    2443         border-color: rgba(255, 255, 255, 0.5);
    2444         color: #39414d;
    2445 }
    2446 
    2447 .site .button:active {
    2448         color: #39414d;
    2449         background-color: #d1e4dd;
    2450 }
    2451 
    2452 input[type=submit]:active {
    2453         color: #39414d;
    2454         background-color: #d1e4dd;
    2455 }
    2456 
    2457 input[type=reset]:active {
    2458         color: #39414d;
    2459         background-color: #d1e4dd;
    2460 }
    2461 
    2462 .wp-block-search .wp-block-search__button:active {
    2463         color: #39414d;
    2464         background-color: #d1e4dd;
    2465 }
    2466 
     1765        background-color: var(--global--color-white-50);
     1766        border-color: var(--global--color-white-50);
     1767        color: var(--button--color-text-active);
     1768}
     1769
     1770.site .button:active,
     1771input[type=submit]:active,
     1772input[type=reset]:active,
     1773.wp-block-search .wp-block-search__button:active,
    24671774.wp-block-file .wp-block-file__button:active {
    2468         color: #39414d;
    2469         background-color: #d1e4dd;
    2470 }
    2471 
    2472 .site .button:hover {
    2473         color: #39414d;
     1775        color: var(--button--color-text-active);
     1776        background-color: var(--button--color-background-active);
     1777}
     1778
     1779.site .button:hover,
     1780input[type=submit]:hover,
     1781input[type=reset]:hover,
     1782.wp-block-search .wp-block-search__button:hover,
     1783.wp-block-file .wp-block-file__button:hover {
     1784        color: var(--button--color-text-hover);
    24741785        background: transparent;
    24751786}
    24761787
    2477 input[type=submit]:hover {
    2478         color: #39414d;
    2479         background: transparent;
    2480 }
    2481 
    2482 input[type=reset]:hover {
    2483         color: #39414d;
    2484         background: transparent;
    2485 }
    2486 
    2487 .wp-block-search .wp-block-search__button:hover {
    2488         color: #39414d;
    2489         background: transparent;
    2490 }
    2491 
    2492 .wp-block-file .wp-block-file__button:hover {
    2493         color: #39414d;
    2494         background: transparent;
    2495 }
    2496 
    24971788/**
    24981789 * Block Options
    24991790 */
    25001791.wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
    2501         color: #39414d !important;
     1792        color: var(--button--color-text-active) !important;
    25021793        background: transparent !important;
    2503         border-color: #39414d;
     1794        border-color: var(--button--color-background);
    25041795}
    25051796
    25061797.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    2507         color: #39414d !important;
     1798        color: var(--button--color-text-hover) !important;
    25081799        background: transparent !important;
    2509         border-color: #39414d;
     1800        border-color: var(--button--color-background);
    25101801}
    25111802
    25121803.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
    2513         color: #d1e4dd !important;
    2514         background: #39414d !important;
     1804        color: var(--button--color-text) !important;
     1805        background: var(--button--color-background) !important;
    25151806}
    25161807
    25171808.wp-block-button.is-style-outline .wp-block-button__link {
    2518         padding: 15px 30px;
     1809        padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    25191810}
    25201811
    … …  
    25251816.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color) {
    25261817        background: transparent;
    2527         color: #39414d;
    2528         border-color: #39414d;
     1818        color: var(--button--color-background);
     1819        border-color: var(--button--color-background);
    25291820}
    25301821
    … …  
    25331824}
    25341825
    2535 .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color) {
    2536         color: #fff;
    2537 }
    2538 
    2539 .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color) {
    2540         color: #fff;
    2541 }
    2542 
     1826.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color),
     1827.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color),
    25431828.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-black-background-color:not(.has-text-color) {
    2544         color: #fff;
     1829        color: var(--global--color-white);
    25451830}
    25461831
    25471832.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background {
    2548         color: #28303d;
    2549 }
    2550 
    2551 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-gray-background-color {
    2552         color: #fff;
    2553 }
    2554 
    2555 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-dark-gray-background-color {
    2556         color: #fff;
    2557 }
    2558 
     1833        color: var(--global--color-dark-gray);
     1834}
     1835
     1836.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-gray-background-color,
     1837.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-dark-gray-background-color,
    25591838.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-black-background-color {
    2560         color: #fff;
     1839        color: var(--global--color-white);
    25611840}
    25621841
    … …  
    25661845}
    25671846
    2568 .wp-block-button.is-style-outline .wp-block-button__link:active {
    2569         color: #d1e4dd !important;
    2570         background: #39414d !important;
    2571         border-color: #39414d;
    2572 }
    2573 
     1847.wp-block-button.is-style-outline .wp-block-button__link:active,
    25741848.wp-block-button.is-style-outline .wp-block-button__link:hover {
    2575         color: #d1e4dd !important;
    2576         background: #39414d !important;
    2577         border-color: #39414d;
    2578 }
    2579 
    2580 .wp-block-button.is-style-outline .wp-block-button__link:active.has-text-color {
    2581         border-color: #39414d;
    2582 }
    2583 
     1849        color: var(--button--color-text) !important;
     1850        background: var(--button--color-background) !important;
     1851        border-color: var(--button--color-background);
     1852}
     1853
     1854.wp-block-button.is-style-outline .wp-block-button__link:active.has-text-color,
    25841855.wp-block-button.is-style-outline .wp-block-button__link:hover.has-text-color {
    2585         border-color: #39414d;
     1856        border-color: var(--button--color-background);
    25861857}
    25871858
    25881859.wp-block-button.is-style-outline .wp-block-button__link:focus {
    2589         color: #39414d !important;
     1860        color: var(--button--color-background) !important;
    25901861        background: transparent !important;
    25911862}
    … …  
    25951866}
    25961867
    2597 .is-style-outline .wp-block-button__link[style*=radius]:focus {
    2598         outline-offset: 2px;
    2599         outline: 2px dotted #39414d;
    2600 }
    2601 
     1868.is-style-outline .wp-block-button__link[style*=radius]:focus,
    26021869.wp-block-button a.wp-block-button__link[style*=radius]:focus {
    26031870        outline-offset: 2px;
    2604         outline: 2px dotted #39414d;
     1871        outline: 2px dotted var(--button--color-background);
    26051872}
    26061873
    26071874.wp-block-code {
    2608         border-color: #28303d;
     1875        border-color: var(--global--color-border);
    26091876        border-radius: 0;
    26101877        border-style: solid;
    26111878        border-width: 0.1rem;
    2612         padding: 20px;
     1879        padding: var(--global--spacing-unit);
    26131880}
    26141881
    26151882.wp-block-code code {
    2616         font-size: 1rem;
     1883        font-size: var(--global--font-size-xs);
    26171884        white-space: pre;
    26181885        overflow-x: auto;
    … …  
    26251892
    26261893.wp-block-columns .wp-block-column > * {
    2627         margin-top: 20px;
    2628         margin-bottom: 20px;
     1894        margin-top: calc(0.66 * var(--global--spacing-vertical));
     1895        margin-bottom: calc(0.66 * var(--global--spacing-vertical));
    26291896}
    26301897@media only screen and (min-width: 482px) {
    26311898
    26321899        .wp-block-columns .wp-block-column > * {
    2633                 margin-top: 30px;
    2634                 margin-bottom: 30px;
     1900                margin-top: var(--global--spacing-vertical);
     1901                margin-bottom: var(--global--spacing-vertical);
    26351902        }
    26361903}
    … …  
    26491916
    26501917.wp-block-columns .wp-block-column:not(:last-child) {
    2651         margin-bottom: 20px;
     1918        margin-bottom: calc(0.66 * var(--global--spacing-vertical));
    26521919}
    26531920@media only screen and (min-width: 482px) {
    26541921
    26551922        .wp-block-columns .wp-block-column:not(:last-child) {
    2656                 margin-bottom: 30px;
     1923                margin-bottom: var(--global--spacing-vertical);
    26571924        }
    26581925}
    … …  
    26701937
    26711938        .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) {
    2672                 margin-left: -50px;
    2673                 margin-top: 63px;
     1939                margin-left: calc(-2 * var(--global--spacing-horizontal));
     1940                margin-top: calc(2.5 * var(--global--spacing-horizontal));
    26741941                z-index: 2;
    26751942        }
    26761943
    2677         .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > p:not(.has-background) {
    2678                 background-color: #d1e4dd;
    2679                 padding: 20px;
    2680         }
    2681 
    2682         .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h1:not(.has-background) {
    2683                 background-color: #d1e4dd;
    2684                 padding: 20px;
    2685         }
    2686 
    2687         .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h2:not(.has-background) {
    2688                 background-color: #d1e4dd;
    2689                 padding: 20px;
    2690         }
    2691 
    2692         .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h3:not(.has-background) {
    2693                 background-color: #d1e4dd;
    2694                 padding: 20px;
    2695         }
    2696 
    2697         .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h4:not(.has-background) {
    2698                 background-color: #d1e4dd;
    2699                 padding: 20px;
    2700         }
    2701 
    2702         .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h5:not(.has-background) {
    2703                 background-color: #d1e4dd;
    2704                 padding: 20px;
    2705         }
    2706 
    2707         .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h6:not(.has-background) {
    2708                 background-color: #d1e4dd;
    2709                 padding: 20px;
    2710         }
    2711 
    2712         .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background) {
    2713                 background-color: #d1e4dd;
    2714                 padding: 20px;
    2715         }
    2716 
     1944        .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > p:not(.has-background),
     1945        .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h1:not(.has-background),
     1946        .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h2:not(.has-background),
     1947        .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h3:not(.has-background),
     1948        .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h4:not(.has-background),
     1949        .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h5:not(.has-background),
     1950        .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h6:not(.has-background),
     1951        .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background),
     1952        .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background),
     1953        .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > pre:not(.has-background) {
     1954                background-color: var(--global--color-background);
     1955                padding: var(--global--spacing-unit);
     1956        }
     1957
     1958        .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background),
    27171959        .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background) {
    2718                 background-color: #d1e4dd;
    2719                 padding: 20px;
    2720         }
    2721 
    2722         .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > pre:not(.has-background) {
    2723                 background-color: #d1e4dd;
    2724                 padding: 20px;
    2725         }
    2726 
    2727         .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background) {
    2728                 padding-left: 50px;
    2729         }
    2730 
    2731         .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background) {
    2732                 padding-left: 50px;
     1960                padding-left: calc(2 * var(--global--spacing-horizontal));
    27331961        }
    27341962
    … …  
    27381966}
    27391967
    2740 .wp-block-columns.alignfull .wp-block-column p:not(.has-background) {
    2741         padding-left: 20px;
    2742         padding-right: 20px;
    2743 }
    2744 
    2745 .wp-block-columns.alignfull .wp-block-column h1:not(.has-background) {
    2746         padding-left: 20px;
    2747         padding-right: 20px;
    2748 }
    2749 
    2750 .wp-block-columns.alignfull .wp-block-column h2:not(.has-background) {
    2751         padding-left: 20px;
    2752         padding-right: 20px;
    2753 }
    2754 
    2755 .wp-block-columns.alignfull .wp-block-column h3:not(.has-background) {
    2756         padding-left: 20px;
    2757         padding-right: 20px;
    2758 }
    2759 
    2760 .wp-block-columns.alignfull .wp-block-column h4:not(.has-background) {
    2761         padding-left: 20px;
    2762         padding-right: 20px;
    2763 }
    2764 
    2765 .wp-block-columns.alignfull .wp-block-column h5:not(.has-background) {
    2766         padding-left: 20px;
    2767         padding-right: 20px;
    2768 }
    2769 
     1968.wp-block-columns.alignfull .wp-block-column p:not(.has-background),
     1969.wp-block-columns.alignfull .wp-block-column h1:not(.has-background),
     1970.wp-block-columns.alignfull .wp-block-column h2:not(.has-background),
     1971.wp-block-columns.alignfull .wp-block-column h3:not(.has-background),
     1972.wp-block-columns.alignfull .wp-block-column h4:not(.has-background),
     1973.wp-block-columns.alignfull .wp-block-column h5:not(.has-background),
    27701974.wp-block-columns.alignfull .wp-block-column h6:not(.has-background) {
    2771         padding-left: 20px;
    2772         padding-right: 20px;
    2773 }
    2774 
    2775 .wp-block-cover {
    2776         background-color: #000;
    2777         min-height: 450px;
    2778         margin-top: inherit;
    2779         margin-bottom: inherit;
    2780 
    2781         /* default & custom background-color */
    2782 
    2783         /* Treating H2 separately to account for legacy /core styles */
    2784 
    2785         /* Block Styles */
    2786 }
    2787 
     1975        padding-left: var(--global--spacing-unit);
     1976        padding-right: var(--global--spacing-unit);
     1977}
     1978
     1979.wp-block-cover,
    27881980.wp-block-cover-image {
    2789         background-color: #000;
    2790         min-height: 450px;
     1981        background-color: var(--cover--color-background);
     1982        min-height: var(--cover--height);
    27911983        margin-top: inherit;
    27921984        margin-bottom: inherit;
    … …  
    28102002}
    28112003
    2812 .wp-block-cover .wp-block-cover__inner-container {
    2813         color: currentColor;
    2814         margin-top: 30px;
    2815         margin-bottom: 30px;
    2816 }
    2817 
    2818 .wp-block-cover .wp-block-cover-image-text {
    2819         color: currentColor;
    2820         margin-top: 30px;
    2821         margin-bottom: 30px;
    2822 }
    2823 
    2824 .wp-block-cover .wp-block-cover-text {
    2825         color: currentColor;
    2826         margin-top: 30px;
    2827         margin-bottom: 30px;
    2828 }
    2829 
    2830 .wp-block-cover-image .wp-block-cover__inner-container {
    2831         color: currentColor;
    2832         margin-top: 30px;
    2833         margin-bottom: 30px;
    2834 }
    2835 
    2836 .wp-block-cover-image .wp-block-cover-image-text {
    2837         color: currentColor;
    2838         margin-top: 30px;
    2839         margin-bottom: 30px;
    2840 }
    2841 
     2004.wp-block-cover .wp-block-cover__inner-container,
     2005.wp-block-cover .wp-block-cover-image-text,
     2006.wp-block-cover .wp-block-cover-text,
     2007.wp-block-cover-image .wp-block-cover__inner-container,
     2008.wp-block-cover-image .wp-block-cover-image-text,
    28422009.wp-block-cover-image .wp-block-cover-text {
    28432010        color: currentColor;
    2844         margin-top: 30px;
    2845         margin-bottom: 30px;
    2846 }
    2847 
    2848 .wp-block-cover .wp-block-cover__inner-container a,
    2849 .wp-block-cover .wp-block-cover-image-text a,
    2850 .wp-block-cover .wp-block-cover-text a,
    2851 .wp-block-cover-image .wp-block-cover__inner-container a,
    2852 .wp-block-cover-image .wp-block-cover-image-text a,
    2853 .wp-block-cover-image .wp-block-cover-text a {
     2011        margin-top: var(--global--spacing-vertical);
     2012        margin-bottom: var(--global--spacing-vertical);
     2013}
     2014
     2015.wp-block-cover .wp-block-cover__inner-container a:not(.wp-block-button__link):not(.wp-block-file__button),
     2016.wp-block-cover .wp-block-cover-image-text a:not(.wp-block-button__link):not(.wp-block-file__button),
     2017.wp-block-cover .wp-block-cover-text a:not(.wp-block-button__link):not(.wp-block-file__button),
     2018.wp-block-cover-image .wp-block-cover__inner-container a:not(.wp-block-button__link):not(.wp-block-file__button),
     2019.wp-block-cover-image .wp-block-cover-image-text a:not(.wp-block-button__link):not(.wp-block-file__button),
     2020.wp-block-cover-image .wp-block-cover-text a:not(.wp-block-button__link):not(.wp-block-file__button) {
    28542021        color: currentColor;
    28552022}
    28562023
    2857 .wp-block-cover .wp-block-cover__inner-container .has-link-color a {
    2858         color: #28303d;
    2859 }
    2860 
    2861 .wp-block-cover .wp-block-cover-image-text .has-link-color a {
    2862         color: #28303d;
    2863 }
    2864 
    2865 .wp-block-cover .wp-block-cover-text .has-link-color a {
    2866         color: #28303d;
    2867 }
    2868 
    2869 .wp-block-cover-image .wp-block-cover__inner-container .has-link-color a {
    2870         color: #28303d;
    2871 }
    2872 
    2873 .wp-block-cover-image .wp-block-cover-image-text .has-link-color a {
    2874         color: #28303d;
    2875 }
    2876 
     2024.wp-block-cover .wp-block-cover__inner-container .has-link-color a,
     2025.wp-block-cover .wp-block-cover-image-text .has-link-color a,
     2026.wp-block-cover .wp-block-cover-text .has-link-color a,
     2027.wp-block-cover-image .wp-block-cover__inner-container .has-link-color a,
     2028.wp-block-cover-image .wp-block-cover-image-text .has-link-color a,
    28772029.wp-block-cover-image .wp-block-cover-text .has-link-color a {
    2878         color: #28303d;
    2879 }
    2880 
    2881 .wp-block-cover:not([class*=background-color]) .wp-block-cover__inner-container {
    2882         color: #fff;
    2883 }
    2884 
    2885 .wp-block-cover:not([class*=background-color]) .wp-block-cover-image-text {
    2886         color: #fff;
    2887 }
    2888 
    2889 .wp-block-cover:not([class*=background-color]) .wp-block-cover-text {
    2890         color: #fff;
    2891 }
    2892 
    2893 .wp-block-cover-image:not([class*=background-color]) .wp-block-cover__inner-container {
    2894         color: #fff;
    2895 }
    2896 
    2897 .wp-block-cover-image:not([class*=background-color]) .wp-block-cover-image-text {
    2898         color: #fff;
    2899 }
    2900 
     2030        color: var(--wp--style--color--link, var(--global--color-primary));
     2031}
     2032
     2033.wp-block-cover:not([class*=background-color]) .wp-block-cover__inner-container,
     2034.wp-block-cover:not([class*=background-color]) .wp-block-cover-image-text,
     2035.wp-block-cover:not([class*=background-color]) .wp-block-cover-text,
     2036.wp-block-cover-image:not([class*=background-color]) .wp-block-cover__inner-container,
     2037.wp-block-cover-image:not([class*=background-color]) .wp-block-cover-image-text,
    29012038.wp-block-cover-image:not([class*=background-color]) .wp-block-cover-text {
    2902         color: #fff;
    2903 }
    2904 
    2905 .wp-block-cover h2 {
    2906         font-size: 2.25rem;
    2907         letter-spacing: normal;
    2908         line-height: 1.3;
     2039        color: var(--cover--color-foreground);
     2040}
     2041
     2042.wp-block-cover h2,
     2043.wp-block-cover-image h2 {
     2044        font-size: var(--heading--font-size-h2);
     2045        letter-spacing: var(--heading--letter-spacing-h2);
     2046        line-height: var(--heading--line-height-h2);
    29092047        max-width: inherit;
    29102048        text-align: inherit;
    29112049        padding: 0;
    29122050}
    2913 @media only screen and (min-width: 652px) {
    2914 
    2915         .wp-block-cover h2 {
    2916                 font-size: 3rem;
    2917         }
    2918 }
    2919 @media only screen and (min-width: 652px) {
    2920 
    2921         .wp-block-cover h2 {
    2922                 font-size: 3rem;
    2923         }
    2924 }
    2925 
    2926 .wp-block-cover-image h2 {
    2927         font-size: 2.25rem;
    2928         letter-spacing: normal;
    2929         line-height: 1.3;
    2930         max-width: inherit;
    2931         text-align: inherit;
    2932         padding: 0;
    2933 }
    2934 @media only screen and (min-width: 652px) {
    2935 
    2936         .wp-block-cover-image h2 {
    2937                 font-size: 3rem;
    2938         }
    2939 }
    2940 @media only screen and (min-width: 652px) {
    2941 
    2942         .wp-block-cover-image h2 {
    2943                 font-size: 3rem;
    2944         }
    2945 }
    29462051
    29472052.wp-block-cover h2.has-text-align-left,
    … …  
    29602065}
    29612066
    2962 .wp-block-cover .wp-block-cover__inner-container {
    2963         width: calc(100% - 60px);
    2964 }
    2965 
     2067.wp-block-cover .wp-block-cover__inner-container,
    29662068.wp-block-cover-image .wp-block-cover__inner-container {
    2967         width: calc(100% - 60px);
    2968 }
    2969 
    2970 .wp-block-cover .wp-block-cover__inner-container > * {
    2971         margin-top: 20px;
    2972         margin-bottom: 20px;
    2973 }
    2974 
     2069        width: calc(100% - calc(2 * var(--global--spacing-vertical)));
     2070}
     2071
     2072.wp-block-cover .wp-block-cover__inner-container > *,
    29752073.wp-block-cover-image .wp-block-cover__inner-container > * {
    2976         margin-top: 20px;
    2977         margin-bottom: 20px;
     2074        margin-top: calc(0.666 * var(--global--spacing-vertical));
     2075        margin-bottom: calc(0.666 * var(--global--spacing-vertical));
    29782076}
    29792077@media only screen and (min-width: 482px) {
    29802078
    2981         .wp-block-cover .wp-block-cover__inner-container > * {
    2982                 margin-top: 30px;
    2983                 margin-bottom: 30px;
    2984         }
    2985 
     2079        .wp-block-cover .wp-block-cover__inner-container > *,
    29862080        .wp-block-cover-image .wp-block-cover__inner-container > * {
    2987                 margin-top: 30px;
    2988                 margin-bottom: 30px;
     2081                margin-top: var(--global--spacing-vertical);
     2082                margin-bottom: var(--global--spacing-vertical);
    29892083        }
    29902084}
    … …  
    30072101}
    30082102
    3009 .wp-block-cover.alignleft > * {
    3010         margin-top: 60px;
    3011         margin-bottom: 60px;
    3012         padding-left: 25px;
    3013         padding-right: 25px;
    3014         width: 100%;
    3015 }
    3016 
    3017 .wp-block-cover.alignright > * {
    3018         margin-top: 60px;
    3019         margin-bottom: 60px;
    3020         padding-left: 25px;
    3021         padding-right: 25px;
    3022         width: 100%;
    3023 }
    3024 
    3025 .wp-block-cover-image.alignleft > * {
    3026         margin-top: 60px;
    3027         margin-bottom: 60px;
    3028         padding-left: 25px;
    3029         padding-right: 25px;
    3030         width: 100%;
    3031 }
    3032 
     2103.wp-block-cover.alignleft > *,
     2104.wp-block-cover.alignright > *,
     2105.wp-block-cover-image.alignleft > *,
    30332106.wp-block-cover-image.alignright > * {
    3034         margin-top: 60px;
    3035         margin-bottom: 60px;
    3036         padding-left: 25px;
    3037         padding-right: 25px;
     2107        margin-top: calc(2 * var(--global--spacing-vertical));
     2108        margin-bottom: calc(2 * var(--global--spacing-vertical));
     2109        padding-left: var(--global--spacing-horizontal);
     2110        padding-right: var(--global--spacing-horizontal);
    30382111        width: 100%;
    30392112}
    … …  
    30462119}
    30472120
    3048 .wp-block-cover.is-style-twentytwentyone-border {
    3049         border: 3px solid #28303d;
    3050 }
    3051 
     2121.wp-block-cover.is-style-twentytwentyone-border,
    30522122.wp-block-cover-image.is-style-twentytwentyone-border {
    3053         border: 3px solid #28303d;
    3054 }
    3055 
    3056 .wp-block-file a.wp-block-file__button:active {
    3057         color: #39414d;
     2123        border: calc(3 * var(--separator--height)) solid var(--global--color-border);
     2124}
     2125
     2126.wp-block-file a.wp-block-file__button:active,
     2127.wp-block-file a.wp-block-file__button:focus,
     2128.wp-block-file a.wp-block-file__button:hover {
     2129        color: var(--button--color-text-hover);
    30582130        opacity: inherit;
    30592131}
    30602132
    3061 .wp-block-file a.wp-block-file__button:focus {
    3062         color: #39414d;
    3063         opacity: inherit;
    3064 }
    3065 
    3066 .wp-block-file a.wp-block-file__button:hover {
    3067         color: #39414d;
    3068         opacity: inherit;
    3069 }
    3070 
    30712133.wp-block-file a.wp-block-file__button:visited {
    3072         color: #d1e4dd;
     2134        color: var(--button--color-text);
    30732135}
    30742136
    30752137.wp-block-file a.wp-block-file__button:visited:hover {
    3076         color: #39414d;
     2138        color: var(--button--color-text-hover);
    30772139}
    30782140
    30792141.wp-block-file .wp-block-file__button {
    3080         line-height: 1.5;
    3081         color: #d1e4dd;
     2142        line-height: var(--button--line-height);
     2143        color: var(--button--color-text);
    30822144        cursor: pointer;
    3083         font-weight: 500;
    3084         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    3085         font-size: 1.25rem;
    3086         background-color: #39414d;
    3087         border-radius: 0;
    3088         border: 3px solid #39414d;
     2145        font-weight: var(--button--font-weight);
     2146        font-family: var(--button--font-family);
     2147        font-size: var(--button--font-size);
     2148        background-color: var(--button--color-background);
     2149        border-radius: var(--button--border-radius);
     2150        border: var(--button--border-width) solid var(--button--color-background);
    30892151        text-decoration: none;
    3090         padding: 15px 30px;
     2152        padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    30912153        display: inline-block;
    3092 }
    3093 
    3094 .wp-block-file .wp-block-file__button:before,
    3095 .wp-block-file .wp-block-file__button:after {
    3096         content: "";
    3097         display: block;
    3098         height: 0;
    3099         width: 0;
    3100 }
    3101 
    3102 .wp-block-file .wp-block-file__button:before {
    3103         margin-bottom: -calc(1em - 0);
    3104 }
    3105 
    3106 .wp-block-file .wp-block-file__button:after {
    3107         margin-top: -calc(1em - 0);
    31082154}
    31092155
    … …  
    31152161
    31162162.is-dark-theme .wp-block-file .wp-block-file__button:focus {
    3117         color: #39414d;
     2163        color: var(--button--color-background);
    31182164}
    31192165
    31202166.wp-block-file .wp-block-file__button:focus:not(.has-background) {
    3121         color: #39414d;
     2167        color: var(--button--color-text-hover);
    31222168}
    31232169
    31242170.wp-block-file .wp-block-file__button:disabled {
    3125         background-color: rgba(255, 255, 255, 0.5);
    3126         border-color: rgba(255, 255, 255, 0.5);
    3127         color: #39414d;
     2171        background-color: var(--global--color-white-50);
     2172        border-color: var(--global--color-white-50);
     2173        color: var(--button--color-text-active);
    31282174}
    31292175
    … …  
    31322178}
    31332179
    3134 .wp-block-gallery .blocks-gallery-image {
    3135         width: calc(50% - 10px);
    3136 }
    3137 
     2180.wp-block-gallery .blocks-gallery-image,
    31382181.wp-block-gallery .blocks-gallery-item {
    3139         width: calc(50% - 10px);
    3140 }
    3141 
    3142 .wp-block-gallery .blocks-gallery-image figcaption {
    3143         margin: 0;
    3144         color: #fff;
    3145         font-size: 1rem;
    3146 }
    3147 
     2182        width: calc((100% - var(--global--spacing-unit)) / 2);
     2183}
     2184
     2185.wp-block-gallery .blocks-gallery-image figcaption,
    31482186.wp-block-gallery .blocks-gallery-item figcaption {
    31492187        margin: 0;
    3150         color: #fff;
    3151         font-size: 1rem;
    3152 }
    3153 
    3154 .wp-block-gallery .blocks-gallery-image figcaption a {
    3155         color: #fff;
    3156 }
    3157 
     2188        color: var(--global--color-white);
     2189        font-size: var(--global--font-size-xs);
     2190}
     2191
     2192.wp-block-gallery .blocks-gallery-image figcaption a,
    31582193.wp-block-gallery .blocks-gallery-item figcaption a {
    3159         color: #fff;
    3160 }
    3161 
    3162 .wp-block-gallery .blocks-gallery-image figcaption a:focus {
    3163         background-color: transparent;
    3164         outline: 2px solid #28303d;
    3165         text-decoration: none;
    3166 }
    3167 
     2194        color: var(--global--color-white);
     2195}
     2196
     2197.wp-block-gallery .blocks-gallery-image figcaption a:focus,
    31682198.wp-block-gallery .blocks-gallery-item figcaption a:focus {
    31692199        background-color: transparent;
    3170         outline: 2px solid #28303d;
     2200        outline: 2px solid var(--wp--style--color--link, var(--global--color-primary));
    31712201        text-decoration: none;
    31722202}
    … …  
    31962226
    31972227.wp-block-group .wp-block-group__inner-container > * {
    3198         margin-top: 20px;
    3199         margin-bottom: 20px;
     2228        margin-top: calc(0.666 * var(--global--spacing-vertical));
     2229        margin-bottom: calc(0.666 * var(--global--spacing-vertical));
    32002230}
    32012231@media only screen and (min-width: 482px) {
    32022232
    32032233        .wp-block-group .wp-block-group__inner-container > * {
    3204                 margin-top: 30px;
    3205                 margin-bottom: 30px;
     2234                margin-top: var(--global--spacing-vertical);
     2235                margin-bottom: var(--global--spacing-vertical);
    32062236        }
    32072237}
    … …  
    32162246
    32172247.wp-block-group.has-background {
    3218         padding: 20px;
     2248        padding: calc(0.666 * var(--global--spacing-vertical));
    32192249}
    32202250@media only screen and (min-width: 482px) {
    32212251
    32222252        .wp-block-group.has-background {
    3223                 padding: 30px;
     2253                padding: var(--global--spacing-vertical);
    32242254        }
    32252255}
    32262256
    32272257.wp-block-group.is-style-twentytwentyone-border {
    3228         border: 3px solid #28303d;
    3229         padding: 30px;
    3230 }
    3231 
    3232 .wp-block-group.has-background .wp-block-group__inner-container > .alignfull {
    3233         max-width: calc(100% + 60px);
    3234         width: calc(100% + 60px);
    3235         margin-left: -30px;
    3236 }
    3237 
    3238 .wp-block-group.has-background .wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull {
    3239         max-width: calc(100% + 60px);
    3240         width: calc(100% + 60px);
    3241         margin-left: -30px;
    3242 }
    3243 
    3244 .wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > .alignfull {
    3245         max-width: calc(100% + 60px);
    3246         width: calc(100% + 60px);
    3247         margin-left: -30px;
    3248 }
    3249 
     2258        border: calc(3 * var(--separator--height)) solid var(--global--color-border);
     2259        padding: var(--global--spacing-vertical);
     2260}
     2261
     2262.wp-block-group.has-background .wp-block-group__inner-container > .alignfull,
     2263.wp-block-group.has-background .wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull,
     2264.wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > .alignfull,
    32502265.wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull {
    3251         max-width: calc(100% + 60px);
    3252         width: calc(100% + 60px);
    3253         margin-left: -30px;
    3254 }
    3255 
    3256 h1 {
    3257         clear: both;
    3258         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    3259         font-weight: normal;
    3260 }
    3261 
    3262 .h1 {
    3263         clear: both;
    3264         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    3265         font-weight: normal;
    3266 }
    3267 
    3268 h2 {
    3269         clear: both;
    3270         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    3271         font-weight: normal;
    3272 }
    3273 
    3274 .h2 {
    3275         clear: both;
    3276         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    3277         font-weight: normal;
    3278 }
    3279 
    3280 h3 {
    3281         clear: both;
    3282         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    3283         font-weight: normal;
    3284 }
    3285 
    3286 .h3 {
    3287         clear: both;
    3288         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    3289         font-weight: normal;
    3290 }
    3291 
    3292 h4 {
    3293         clear: both;
    3294         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    3295         font-weight: normal;
    3296 }
    3297 
    3298 .h4 {
    3299         clear: both;
    3300         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    3301         font-weight: normal;
    3302 }
    3303 
    3304 h5 {
    3305         clear: both;
    3306         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    3307         font-weight: normal;
    3308 }
    3309 
    3310 .h5 {
    3311         clear: both;
    3312         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    3313         font-weight: normal;
    3314 }
    3315 
    3316 h6 {
    3317         clear: both;
    3318         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    3319         font-weight: normal;
    3320 }
    3321 
     2266        max-width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical)));
     2267        width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical)));
     2268        margin-left: calc(-1 * var(--global--spacing-vertical));
     2269}
     2270
     2271h1,
     2272.h1,
     2273h2,
     2274.h2,
     2275h3,
     2276.h3,
     2277h4,
     2278.h4,
     2279h5,
     2280.h5,
     2281h6,
    33222282.h6 {
    33232283        clear: both;
    3324         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    3325         font-weight: normal;
    3326 }
    3327 
    3328 h1 strong {
    3329         font-weight: 600;
    3330 }
    3331 
    3332 .h1 strong {
    3333         font-weight: 600;
    3334 }
    3335 
    3336 h2 strong {
    3337         font-weight: 600;
    3338 }
    3339 
    3340 .h2 strong {
    3341         font-weight: 600;
    3342 }
    3343 
    3344 h3 strong {
    3345         font-weight: 600;
    3346 }
    3347 
    3348 .h3 strong {
    3349         font-weight: 600;
    3350 }
    3351 
    3352 h4 strong {
    3353         font-weight: 600;
    3354 }
    3355 
    3356 .h4 strong {
    3357         font-weight: 600;
    3358 }
    3359 
    3360 h5 strong {
    3361         font-weight: 600;
    3362 }
    3363 
    3364 .h5 strong {
    3365         font-weight: 600;
    3366 }
    3367 
    3368 h6 strong {
    3369         font-weight: 600;
    3370 }
    3371 
     2284        font-family: var(--heading--font-family);
     2285        font-weight: var(--heading--font-weight);
     2286}
     2287
     2288h1 strong,
     2289.h1 strong,
     2290h2 strong,
     2291.h2 strong,
     2292h3 strong,
     2293.h3 strong,
     2294h4 strong,
     2295.h4 strong,
     2296h5 strong,
     2297.h5 strong,
     2298h6 strong,
    33722299.h6 strong {
    3373         font-weight: 600;
    3374 }
    3375 
    3376 h1 {
    3377         font-size: 4rem;
    3378         letter-spacing: normal;
    3379         line-height: 1.1;
    3380 }
    3381 
    3382 @media only screen and (min-width: 652px) {
    3383 
    3384         h1 {
    3385                 font-size: 6rem;
    3386         }
    3387 }
    3388 
     2300        font-weight: var(--heading--font-weight-strong);
     2301}
     2302
     2303h1,
    33892304.h1 {
    3390         font-size: 4rem;
    3391         letter-spacing: normal;
    3392         line-height: 1.1;
    3393 }
    3394 
    3395 @media only screen and (min-width: 652px) {
    3396 
    3397         .h1 {
    3398                 font-size: 6rem;
    3399         }
    3400 }
    3401 
    3402 h2 {
    3403         font-size: 2.25rem;
    3404         letter-spacing: normal;
    3405         line-height: 1.3;
    3406 }
    3407 
    3408 @media only screen and (min-width: 652px) {
    3409 
    3410         h2 {
    3411                 font-size: 3rem;
    3412         }
    3413 }
    3414 
    3415 @media only screen and (min-width: 652px) {
    3416 
    3417         h2 {
    3418                 font-size: 3rem;
    3419         }
    3420 }
    3421 
     2305        font-size: var(--heading--font-size-h1);
     2306        letter-spacing: var(--heading--letter-spacing-h1);
     2307        line-height: var(--heading--line-height-h1);
     2308}
     2309
     2310h2,
    34222311.h2 {
    3423         font-size: 2.25rem;
    3424         letter-spacing: normal;
    3425         line-height: 1.3;
    3426 }
    3427 
    3428 @media only screen and (min-width: 652px) {
    3429 
    3430         .h2 {
    3431                 font-size: 3rem;
    3432         }
    3433 }
    3434 
    3435 @media only screen and (min-width: 652px) {
    3436 
    3437         .h2 {
    3438                 font-size: 3rem;
    3439         }
    3440 }
    3441 
    3442 h3 {
    3443         font-size: 2rem;
    3444         letter-spacing: normal;
    3445         line-height: 1.3;
    3446 }
    3447 
    3448 @media only screen and (min-width: 652px) {
    3449 
    3450         h3 {
    3451                 font-size: 2rem;
    3452         }
    3453 }
    3454 
     2312        font-size: var(--heading--font-size-h2);
     2313        letter-spacing: var(--heading--letter-spacing-h2);
     2314        line-height: var(--heading--line-height-h2);
     2315}
     2316
     2317h3,
    34552318.h3 {
    3456         font-size: 2rem;
    3457         letter-spacing: normal;
    3458         line-height: 1.3;
    3459 }
    3460 
    3461 @media only screen and (min-width: 652px) {
    3462 
    3463         .h3 {
    3464                 font-size: 2rem;
    3465         }
    3466 }
    3467 
    3468 h4 {
    3469         font-size: 1.5rem;
    3470         font-weight: 600;
    3471         letter-spacing: normal;
    3472         line-height: 1.3;
    3473 }
    3474 
     2319        font-size: var(--heading--font-size-h3);
     2320        letter-spacing: var(--heading--letter-spacing-h3);
     2321        line-height: var(--heading--line-height-h3);
     2322}
     2323
     2324h4,
    34752325.h4 {
    3476         font-size: 1.5rem;
    3477         font-weight: 600;
    3478         letter-spacing: normal;
    3479         line-height: 1.3;
    3480 }
    3481 
    3482 h5 {
    3483         font-size: 1.125rem;
    3484         font-weight: 600;
    3485         letter-spacing: 0.05em;
    3486         line-height: 1.3;
    3487 }
    3488 
     2326        font-size: var(--heading--font-size-h4);
     2327        font-weight: var(--heading--font-weight-strong);
     2328        letter-spacing: var(--heading--letter-spacing-h4);
     2329        line-height: var(--heading--line-height-h4);
     2330}
     2331
     2332h5,
    34892333.h5 {
    3490         font-size: 1.125rem;
    3491         font-weight: 600;
    3492         letter-spacing: 0.05em;
    3493         line-height: 1.3;
    3494 }
    3495 
    3496 h6 {
    3497         font-size: 1rem;
    3498         font-weight: 600;
    3499         letter-spacing: 0.05em;
    3500         line-height: 1.3;
    3501 }
    3502 
     2334        font-size: var(--heading--font-size-h5);
     2335        font-weight: var(--heading--font-weight-strong);
     2336        letter-spacing: var(--heading--letter-spacing-h5);
     2337        line-height: var(--heading--line-height-h5);
     2338}
     2339
     2340h6,
    35032341.h6 {
    3504         font-size: 1rem;
    3505         font-weight: 600;
    3506         letter-spacing: 0.05em;
    3507         line-height: 1.3;
     2342        font-size: var(--heading--font-size-h6);
     2343        font-weight: var(--heading--font-weight-strong);
     2344        letter-spacing: var(--heading--letter-spacing-h6);
     2345        line-height: var(--heading--line-height-h6);
    35082346}
    35092347
    … …  
    35132351
    35142352.wp-block-image figcaption {
    3515         color: #28303d;
    3516         font-size: 1rem;
    3517         line-height: 1.7;
    3518         margin-top: 10px;
    3519         margin-bottom: 20px;
     2353        color: var(--global--color-primary);
     2354        font-size: var(--global--font-size-xs);
     2355        line-height: var(--global--line-height-body);
     2356        margin-top: calc(0.5 * var(--global--spacing-unit));
     2357        margin-bottom: var(--global--spacing-unit);
    35202358        text-align: center;
    35212359}
    35222360
    35232361.wp-block-image .alignright {
    3524         margin-left: 25px;
     2362        margin-left: var(--global--spacing-horizontal);
    35252363}
    35262364
    35272365.wp-block-image .alignleft {
    3528         margin-right: 25px;
     2366        margin-right: var(--global--spacing-horizontal);
    35292367}
    35302368
    … …  
    35502388}
    35512389
    3552 .wp-block-image.is-style-twentytwentyone-border img {
    3553         border: 3px solid #28303d;
    3554 }
    3555 
     2390.wp-block-image.is-style-twentytwentyone-border img,
    35562391.wp-block-image.is-style-twentytwentyone-image-frame img {
    3557         border: 3px solid #28303d;
     2392        border: calc(3 * var(--separator--height)) solid var(--global--color-border);
    35582393}
    35592394
    35602395.wp-block-image.is-style-twentytwentyone-image-frame img {
    3561         padding: 20px;
     2396        padding: var(--global--spacing-unit);
    35622397}
    35632398
    … …  
    35832418
    35842419.wp-block-latest-comments .wp-block-latest-comments__comment {
    3585         font-size: 1.125rem;
    3586         line-height: 1.7;
     2420        font-size: var(--global--font-size-sm);
     2421        line-height: var(--global--line-height-body);
    35872422
    35882423        /* Vertical margins logic */
    3589         margin-top: 30px;
    3590         margin-bottom: 30px;
     2424        margin-top: var(--global--spacing-vertical);
     2425        margin-bottom: var(--global--spacing-vertical);
    35912426}
    35922427
    … …  
    36002435
    36012436.wp-block-latest-comments .wp-block-latest-comments__comment-meta {
    3602         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     2437        font-family: var(--heading--font-family);
    36032438}
    36042439
    36052440.wp-block-latest-comments .wp-block-latest-comments__comment-date {
    3606         color: #28303d;
    3607         font-size: 1.125rem;
     2441        color: var(--global--color-primary);
     2442        font-size: var(--global--font-size-sm);
    36082443}
    36092444
    36102445.wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p {
    3611         font-size: 1.125rem;
    3612         line-height: 1.7;
     2446        font-size: var(--global--font-size-sm);
     2447        line-height: var(--global--line-height-body);
    36132448        margin: 0;
    36142449}
    … …  
    36192454
    36202455.wp-block-latest-posts:not(.is-grid) > li {
    3621         margin-top: 50px;
    3622         margin-bottom: 50px;
     2456        margin-top: calc(1.666 * var(--global--spacing-vertical));
     2457        margin-bottom: calc(1.666 * var(--global--spacing-vertical));
    36232458}
    36242459
    … …  
    36372472
    36382473.wp-block-latest-posts.is-grid > li {
    3639         margin-bottom: 30px;
     2474        margin-bottom: var(--global--spacing-vertical);
    36402475}
    36412476
    … …  
    36582493
    36592494.wp-block-latest-posts > li > * {
    3660         margin-top: 10px;
    3661         margin-bottom: 10px;
     2495        margin-top: calc(0.333 * var(--global--spacing-vertical));
     2496        margin-bottom: calc(0.333 * var(--global--spacing-vertical));
    36622497}
    36632498
    … …  
    36722507.wp-block-latest-posts > li > a {
    36732508        display: inline-block;
    3674         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    3675         font-size: 2rem;
    3676         font-weight: normal;
    3677         line-height: 1.3;
    3678         margin-bottom: 10px;
    3679 }
    3680 @media only screen and (min-width: 652px) {
    3681 
    3682         .wp-block-latest-posts > li > a {
    3683                 font-size: 2rem;
    3684         }
     2509        font-family: var(--latest-posts--title-font-family);
     2510        font-size: var(--latest-posts--title-font-size);
     2511        font-weight: var(--heading--font-weight);
     2512        line-height: var(--global--line-height-heading);
     2513        margin-bottom: calc(0.333 * var(--global--spacing-vertical));
    36852514}
    36862515
    36872516.wp-block-latest-posts .wp-block-latest-posts__post-author {
    3688         color: #28303d;
    3689         font-size: 1.25rem;
    3690         line-height: 1.7;
     2517        color: var(--global--color-primary);
     2518        font-size: var(--global--font-size-md);
     2519        line-height: var(--global--line-height-body);
    36912520}
    36922521
    36932522.wp-block-latest-posts .wp-block-latest-posts__post-date {
    3694         color: #28303d;
    3695         font-size: 1rem;
    3696         line-height: 1.7;
     2523        color: var(--global--color-primary);
     2524        font-size: var(--global--font-size-xs);
     2525        line-height: var(--global--line-height-body);
    36972526}
    36982527
    … …  
    37022531}
    37032532
    3704 .wp-block-latest-posts .wp-block-latest-posts__post-excerpt {
    3705         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    3706         font-size: 1.125rem;
    3707         line-height: 1.7;
    3708         margin-top: 20px;
    3709 }
    3710 
     2533.wp-block-latest-posts .wp-block-latest-posts__post-excerpt,
    37112534.wp-block-latest-posts .wp-block-latest-posts__post-full-content {
    3712         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    3713         font-size: 1.125rem;
    3714         line-height: 1.7;
    3715         margin-top: 20px;
     2535        font-family: var(--latest-posts--description-font-family);
     2536        font-size: var(--latest-posts--description-font-size);
     2537        line-height: var(--global--line-height-body);
     2538        margin-top: calc(0.666 * var(--global--spacing-vertical));
    37162539}
    37172540
    37182541.wp-block-latest-posts.alignfull {
    3719         padding-left: 20px;
    3720         padding-right: 20px;
     2542        padding-left: var(--global--spacing-unit);
     2543        padding-right: var(--global--spacing-unit);
    37212544}
    37222545
    … …  
    37282551
    37292552.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers {
    3730         border-top: 3px solid #28303d;
    3731         border-bottom: 3px solid #28303d;
    3732 }
    3733 
    3734 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li {
    3735         padding-bottom: 30px;
    3736         border-bottom: 1px solid #28303d;
    3737         margin-top: 30px;
    3738         margin-bottom: 30px;
    3739 }
    3740 
     2553        border-top: calc(3 * var(--separator--height)) solid var(--global--color-border);
     2554        border-bottom: calc(3 * var(--separator--height)) solid var(--global--color-border);
     2555}
     2556
     2557.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li,
    37412558.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li {
    3742         padding-bottom: 30px;
    3743         border-bottom: 1px solid #28303d;
    3744         margin-top: 30px;
    3745         margin-bottom: 30px;
     2559        padding-bottom: var(--global--spacing-vertical);
     2560        border-bottom: var(--separator--height) solid var(--global--color-border);
     2561        margin-top: var(--global--spacing-vertical);
     2562        margin-bottom: var(--global--spacing-vertical);
    37462563}
    37472564
    … …  
    37532570
    37542571.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid {
    3755         box-shadow: inset 0 -1px 0 0 #28303d;
    3756         border-bottom: 2px solid #28303d;
     2572        box-shadow: inset 0 -1px 0 0 var(--global--color-border);
     2573        border-bottom: calc(2 * var(--separator--height)) solid var(--global--color-border);
    37572574}
    37582575
    37592576.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li {
    37602577        margin: 0;
    3761         padding-top: 30px;
    3762         padding-right: 25px;
     2578        padding-top: var(--global--spacing-vertical);
     2579        padding-right: var(--global--spacing-horizontal);
    37632580}
    37642581
    37652582.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li:last-child {
    3766         padding-bottom: 30px;
     2583        padding-bottom: var(--global--spacing-vertical);
    37672584}
    37682585@media screen and (min-width: 600px) {
    37692586
    37702587        .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-2 li {
    3771                 width: 50%;
     2588                width: calc((100% / 2));
    37722589        }
    37732590
    37742591        .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-3 li {
    3775                 width: 33%;
     2592                width: calc((100% / 3));
    37762593        }
    37772594
    37782595        .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-4 li {
    3779                 width: 25%;
     2596                width: calc((100% / 4));
    37802597        }
    37812598
    37822599        .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-5 li {
    3783                 width: 20%;
     2600                width: calc((100% / 5));
    37842601        }
    37852602
    37862603        .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-6 li {
    3787                 width: 17%;
     2604                width: calc((100% / 6));
    37882605        }
    37892606}
    37902607
    37912608.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li {
    3792         border: 3px solid #28303d;
    3793         padding: 30px 25px;
     2609        border: calc(3 * var(--separator--height)) solid var(--global--color-border);
     2610        padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
    37942611}
    37952612
    37962613.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li:last-child {
    3797         padding-bottom: 30px;
     2614        padding-bottom: var(--global--spacing-vertical);
    37982615}
    37992616
    38002617.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders:not(.is-grid) li {
    3801         margin-top: 25px;
    3802         margin-bottom: 25px;
     2618        margin-top: var(--global--spacing-horizontal);
     2619        margin-bottom: var(--global--spacing-horizontal);
    38032620}
    38042621
    … …  
    38582675}
    38592676
    3860 ul {
    3861         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     2677ul,
     2678ol {
     2679        font-family: var(--list--font-family);
    38622680        margin: 0;
    3863         padding-left: 50px;
    3864 }
    3865 
    3866 ol {
    3867         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    3868         margin: 0;
    3869         padding-left: 50px;
     2681        padding-left: calc(2 * var(--global--spacing-horizontal));
    38702682}
    38712683
    … …  
    38922704
    38932705dt {
    3894         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     2706        font-family: var(--definition-term--font-family);
    38952707        font-weight: bold;
    38962708}
    … …  
    38982710dd {
    38992711        margin: 0;
    3900         padding-left: 50px;
     2712        padding-left: calc(2 * var(--global--spacing-horizontal));
    39012713}
    39022714
    … …  
    39182730
    39192731.wp-block-media-text .wp-block-media-text__content {
    3920         padding: 25px;
     2732        padding: var(--global--spacing-horizontal);
    39212733}
    39222734@media only screen and (min-width: 592px) {
    39232735
    39242736        .wp-block-media-text .wp-block-media-text__content {
    3925                 padding: 30px;
     2737                padding: var(--global--spacing-vertical);
    39262738        }
    39272739}
    39282740
    39292741.wp-block-media-text .wp-block-media-text__content > * {
    3930         margin-top: 20px;
    3931         margin-bottom: 20px;
     2742        margin-top: calc(0.666 * var(--global--spacing-vertical));
     2743        margin-bottom: calc(0.666 * var(--global--spacing-vertical));
    39322744}
    39332745@media only screen and (min-width: 482px) {
    39342746
    39352747        .wp-block-media-text .wp-block-media-text__content > * {
    3936                 margin-top: 30px;
    3937                 margin-bottom: 30px;
     2748                margin-top: var(--global--spacing-vertical);
     2749                margin-bottom: var(--global--spacing-vertical);
    39382750        }
    39392751}
    … …  
    39492761
    39502762        .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
    3951                 padding-top: 30px;
    3952                 padding-bottom: 30px;
     2763                padding-top: var(--global--spacing-vertical);
     2764                padding-bottom: var(--global--spacing-vertical);
    39532765        }
    39542766}
    39552767
    39562768.wp-block-media-text.is-style-twentytwentyone-border {
    3957         border: 3px solid #28303d;
     2769        border: calc(3 * var(--separator--height)) solid var(--global--color-border);
    39582770}
    39592771
    … …  
    39632775
    39642776.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content {
    3965         padding: 13px;
     2777        padding: var(--primary-nav--padding);
    39662778}
    39672779
    39682780.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__label {
    3969         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    3970         font-size: 1.25rem;
    3971         font-weight: normal;
     2781        font-family: var(--primary-nav--font-family);
     2782        font-size: var(--primary-nav--font-size);
     2783        font-weight: var(--primary-nav--font-weight);
    39722784}
    39732785
    … …  
    39832795        border: none;
    39842796        left: 0;
    3985         margin-left: 13px;
     2797        margin-left: var(--primary-nav--padding);
    39862798        min-width: max-content;
    39872799        opacity: 0;
    … …  
    39932805.wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container .wp-block-navigation-link .wp-block-navigation-link__content {
    39942806        display: inline-block;
    3995         padding: 7px 13px;
     2807        padding: calc(0.5 * var(--primary-nav--padding)) var(--primary-nav--padding);
    39962808}
    39972809
    … …  
    40082820
    40092821.wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container {
    4010         background: #d1e4dd;
     2822        background: var(--global--color-background);
    40112823        margin: 0;
    40122824        padding: 0;
    40132825        position: absolute;
    40142826        top: 100%;
    4015         border: 1px solid #28303d;
    4016 }
    4017 
    4018 .wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container:before {
    4019         content: "";
    4020         display: block;
    4021         position: absolute;
    4022         width: 0;
    4023         top: -10px;
    4024         left: 25px;
    4025         border-style: solid;
    4026         border-color: #28303d transparent;
    4027         border-width: 0 7px 10px 7px;
    4028 }
    4029 
     2827        border: 1px solid var(--primary-nav--border-color);
     2828}
     2829
     2830.wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container:before,
    40302831.wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container:after {
    40312832        content: "";
    … …  
    40342835        width: 0;
    40352836        top: -10px;
    4036         left: 25px;
     2837        left: var(--global--spacing-horizontal);
    40372838        border-style: solid;
    4038         border-color: #28303d transparent;
     2839        border-color: var(--primary-nav--border-color) transparent;
    40392840        border-width: 0 7px 10px 7px;
    40402841}
    … …  
    40422843.wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container:after {
    40432844        top: -9px;
    4044         border-color: #d1e4dd transparent;
     2845        border-color: var(--global--color-background) transparent;
    40452846}
    40462847
    40472848.wp-block-navigation:not(.has-background) .wp-block-navigation__container {
    4048         background: #d1e4dd;
     2849        background: var(--global--color-background);
    40492850}
    40502851
    40512852.wp-block-navigation:not(.has-background) .wp-block-navigation__container .wp-block-navigation__container {
    4052         background: #d1e4dd;
    4053 }
    4054 
    4055 .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover {
    4056         color: #28303d;
    4057 }
    4058 
     2853        background: var(--global--color-background);
     2854}
     2855
     2856.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover,
    40592857.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:focus {
    4060         color: #28303d;
     2858        color: var(--primary-nav--color-link-hover);
    40612859}
    40622860
    … …  
    40712869
    40722870p {
    4073         line-height: --global--line-height-body;
     2871        line-height: var(--wp--typography--line-height, --global--line-height-body);
    40742872}
    40752873
    40762874p.has-background {
    4077         padding: 20px;
     2875        padding: var(--global--spacing-unit);
    40782876}
    40792877
    40802878p.has-text-color a {
    4081         color: #28303d;
     2879        color: var(--wp--style--color--link, var(--global--color-primary));
    40822880}
    40832881
    … …  
    40882886
    40892887.wp-block-pullquote {
    4090         padding: 40px 0;
     2888        padding: calc(2 * var(--global--spacing-unit)) 0;
    40912889        text-align: center;
    4092         border-width: 3px;
     2890        border-width: var(--pullquote--border-width);
    40932891        border-bottom-style: solid;
    40942892        border-top-style: solid;
     2893        color: currentColor;
     2894        border-color: currentColor;
    40952895        position: relative;
    40962896
    … …  
    41042904        content: "“";
    41052905        display: block;
     2906        position: relative;
     2907        left: 0;
    41062908        font-size: 3rem;
    41072909        font-weight: 500;
    … …  
    41102912
    41112913.wp-block-pullquote p {
    4112         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    4113         font-size: 2rem;
    4114         font-style: normal;
     2914        font-family: var(--pullquote--font-family);
     2915        font-size: var(--pullquote--font-size);
     2916        font-style: var(--pullquote--font-style);
    41152917        font-weight: 700;
    4116         letter-spacing: normal;
    4117         line-height: 1.3;
     2918        letter-spacing: var(--pullquote--letter-spacing);
     2919        line-height: var(--pullquote--line-height);
    41182920        margin: 0;
    4119 }
    4120 @media only screen and (min-width: 652px) {
    4121 
    4122         .wp-block-pullquote p {
    4123                 font-size: 2rem;
    4124         }
    41252921}
    41262922
    … …  
    41292925}
    41302926
    4131 .wp-block-pullquote .wp-block-pullquote__citation {
    4132         color: currentColor;
    4133         display: block;
    4134         font-size: 1rem;
    4135         font-style: normal;
    4136         text-transform: none;
    4137 }
    4138 
    4139 .wp-block-pullquote cite {
    4140         color: currentColor;
    4141         display: block;
    4142         font-size: 1rem;
    4143         font-style: normal;
    4144         text-transform: none;
    4145 }
    4146 
     2927.wp-block-pullquote .wp-block-pullquote__citation,
     2928.wp-block-pullquote cite,
    41472929.wp-block-pullquote footer {
    41482930        color: currentColor;
    41492931        display: block;
    4150         font-size: 1rem;
    4151         font-style: normal;
     2932        font-size: var(--global--font-size-xs);
     2933        font-style: var(--pullquote--font-style);
    41522934        text-transform: none;
    41532935}
    … …  
    41572939}
    41582940
    4159 .wp-block-pullquote.alignleft blockquote:before,
    4160 .wp-block-pullquote.alignleft cite {
     2941.wp-block-pullquote.alignleft:not(.is-style-solid-color) blockquote:before,
     2942.wp-block-pullquote.alignleft:not(.is-style-solid-color) cite {
    41612943        text-align: center;
    41622944}
    41632945
    4164 .wp-block-pullquote.alignwide > p {
    4165         max-width: calc(100vw - 30px);
    4166 }
    4167 @media only screen and (min-width: 482px) {
    4168 
    4169         .wp-block-pullquote.alignwide > p {
    4170                 max-width: calc(100vw - 100px);
    4171         }
    4172 }
    4173 @media only screen and (min-width: 822px) {
    4174 
    4175         .wp-block-pullquote.alignwide > p {
    4176                 max-width: min(calc(100vw - 200px), 1240px);
    4177         }
    4178 }
    4179 
     2946.wp-block-pullquote.alignwide > p,
    41802947.wp-block-pullquote.alignwide blockquote {
    4181         max-width: calc(100vw - 30px);
    4182 }
    4183 @media only screen and (min-width: 482px) {
    4184 
    4185         .wp-block-pullquote.alignwide blockquote {
    4186                 max-width: calc(100vw - 100px);
    4187         }
    4188 }
    4189 @media only screen and (min-width: 822px) {
    4190 
    4191         .wp-block-pullquote.alignwide blockquote {
    4192                 max-width: min(calc(100vw - 200px), 1240px);
    4193         }
    4194 }
    4195 
    4196 .wp-block-pullquote.alignfull:not(.is-style-solid-color) > p {
    4197         padding: 0 40px;
    4198 }
    4199 
     2948        max-width: var(--responsive--alignwide-width);
     2949}
     2950
     2951.wp-block-pullquote.alignfull:not(.is-style-solid-color) > p,
    42002952.wp-block-pullquote.alignfull:not(.is-style-solid-color) blockquote {
    4201         padding: 0 40px;
     2953        padding: 0 calc(2 * var(--global--spacing-unit));
    42022954}
    42032955
    42042956.wp-block-pullquote.is-style-solid-color {
    4205         color: #28303d;
    4206         padding: 50px;
    4207         border-width: 3px;
     2957        color: var(--pullquote--color-foreground);
     2958        padding: calc(2.5 * var(--global--spacing-unit));
     2959        border-width: var(--pullquote--border-width);
    42082960        border-style: solid;
    4209         border-color: #28303d;
     2961        border-color: var(--pullquote--border-color);
    42102962}
    42112963@media (min-width: 600px) {
    42122964
    42132965        .wp-block-pullquote.is-style-solid-color {
    4214                 padding: 100px;
     2966                padding: calc(5 * var(--global--spacing-unit));
    42152967        }
    42162968}
    … …  
    42212973
    42222974.wp-block-pullquote.is-style-solid-color blockquote {
     2975        margin: 0;
    42232976        max-width: inherit;
    42242977}
    42252978
    42262979.wp-block-pullquote.is-style-solid-color blockquote p {
    4227         font-size: 2rem;
    4228 }
    4229 @media only screen and (min-width: 652px) {
    4230 
    4231         .wp-block-pullquote.is-style-solid-color blockquote p {
    4232                 font-size: 2rem;
    4233         }
     2980        font-size: var(--pullquote--font-size);
    42342981}
    42352982
    … …  
    42402987}
    42412988
     2989.wp-block-pullquote.is-style-solid-color.alignleft,
     2990.wp-block-pullquote.is-style-solid-color.alignright {
     2991        padding: var(--global--spacing-unit);
     2992}
     2993
     2994.wp-block-pullquote.is-style-solid-color.alignleft blockquote,
     2995.wp-block-pullquote.is-style-solid-color.alignright blockquote {
     2996        max-width: initial;
     2997}
     2998
    42422999.wp-block-quote {
     3000        border-left: none;
    42433001
    42443002        /**
    … …  
    42473005}
    42483006
    4249 .has-background:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
    4250 [class*=background-color]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
     3007.wp-block-quote:before {
     3008        content: "“";
     3009        font-size: var(--quote--font-size);
     3010        line-height: var(--quote--line-height);
     3011        left: 8px;
     3012}
     3013
     3014.has-background .wp-block-quote .wp-block-quote__citation,
     3015[class*=background-color] .wp-block-quote .wp-block-quote__citation,
    42513016[style*=background-color] .wp-block-quote .wp-block-quote__citation,
    42523017.wp-block-cover[style*=background-image] .wp-block-quote .wp-block-quote__citation,
    4253 .has-background:not(.has-background-background-color) .wp-block-quote cite,
    4254 [class*=background-color]:not(.has-background-background-color) .wp-block-quote cite,
     3018.has-background .wp-block-quote cite,
     3019[class*=background-color] .wp-block-quote cite,
    42553020[style*=background-color] .wp-block-quote cite,
    42563021.wp-block-cover[style*=background-image] .wp-block-quote cite,
    4257 .has-background:not(.has-background-background-color) .wp-block-quote footer,
    4258 [class*=background-color]:not(.has-background-background-color) .wp-block-quote footer,
     3022.has-background .wp-block-quote footer,
     3023[class*=background-color] .wp-block-quote footer,
    42593024[style*=background-color] .wp-block-quote footer,
    42603025.wp-block-cover[style*=background-image] .wp-block-quote footer {
    … …  
    42633028
    42643029.wp-block-quote.has-text-align-right {
    4265         margin: 30px 25px 30px auto;
     3030        margin: var(--global--spacing-vertical) var(--global--spacing-horizontal) var(--global--spacing-vertical) auto;
    42663031        padding-right: 0;
    42673032        border-right: none;
    … …  
    42693034
    42703035.wp-block-quote.has-text-align-right:before {
     3036        display: none;
     3037}
     3038
     3039.wp-block-quote.has-text-align-right p:before {
    42713040        content: "”";
    4272         left: initial;
    4273         right: -12px;
     3041        font-size: var(--quote--font-size);
     3042        font-weight: normal;
     3043        line-height: var(--quote--line-height);
     3044        margin-right: 5px;
    42743045}
    42753046
    42763047.wp-block-quote.has-text-align-center {
    4277         margin: 30px auto;
     3048        margin: var(--global--spacing-vertical) auto;
    42783049}
    42793050
    … …  
    42823053}
    42833054
    4284 .wp-block-quote.is-large {
    4285         padding-left: 0;
    4286         padding-right: 0;
    4287 
    4288         /* Resetting margins to match _block-container.scss */
    4289         margin-top: 30px;
    4290         margin-bottom: 30px;
    4291 }
    4292 
     3055.wp-block-quote.is-large,
    42933056.wp-block-quote.is-style-large {
    42943057        padding-left: 0;
    … …  
    42963059
    42973060        /* Resetting margins to match _block-container.scss */
    4298         margin-top: 30px;
    4299         margin-bottom: 30px;
    4300 }
    4301 
    4302 .wp-block-quote.is-large p {
    4303         font-size: 2.25rem;
    4304         font-style: normal;
    4305         line-height: 1.35;
    4306 }
    4307 @media only screen and (min-width: 652px) {
    4308 
    4309         .wp-block-quote.is-large p {
    4310                 font-size: 2.5rem;
    4311         }
    4312 }
    4313 
     3061        margin-top: var(--global--spacing-vertical);
     3062        margin-bottom: var(--global--spacing-vertical);
     3063}
     3064
     3065.wp-block-quote.is-large p,
    43143066.wp-block-quote.is-style-large p {
    4315         font-size: 2.25rem;
    4316         font-style: normal;
    4317         line-height: 1.35;
    4318 }
    4319 @media only screen and (min-width: 652px) {
    4320 
    4321         .wp-block-quote.is-style-large p {
    4322                 font-size: 2.5rem;
    4323         }
    4324 }
    4325 
    4326 .wp-block-quote.is-large:before {
    4327         font-size: 2.25rem;
    4328         line-height: 1.35;
    4329         left: -25px;
    4330 }
    4331 @media only screen and (min-width: 652px) {
    4332 
    4333         .wp-block-quote.is-large:before {
    4334                 font-size: 2.5rem;
    4335         }
    4336 }
    4337 
     3067        font-size: var(--quote--font-size-large);
     3068        font-style: var(--quote--font-style-large);
     3069        line-height: var(--quote--line-height-large);
     3070}
     3071
     3072.wp-block-quote.is-large:before,
    43383073.wp-block-quote.is-style-large:before {
    4339         font-size: 2.25rem;
    4340         line-height: 1.35;
    4341         left: -25px;
    4342 }
    4343 @media only screen and (min-width: 652px) {
    4344 
    4345         .wp-block-quote.is-style-large:before {
    4346                 font-size: 2.5rem;
    4347         }
    4348 }
    4349 
    4350 .wp-block-quote.is-large.has-text-align-right:before {
    4351         left: initial;
    4352         right: -25px;
    4353 }
    4354 
     3074        font-size: var(--quote--font-size-large);
     3075        line-height: var(--quote--line-height-large);
     3076        left: calc(-1 * var(--global--spacing-horizontal));
     3077}
     3078
     3079.wp-block-quote.is-large.has-text-align-right:before,
    43553080.wp-block-quote.is-style-large.has-text-align-right:before {
    4356         left: initial;
    4357         right: -25px;
    4358 }
    4359 
    4360 .wp-block-quote.is-large .wp-block-quote__citation {
    4361         color: #28303d;
    4362         font-size: 1.125rem;
    4363 }
    4364 
    4365 .wp-block-quote.is-large cite {
    4366         color: #28303d;
    4367         font-size: 1.125rem;
    4368 }
    4369 
    4370 .wp-block-quote.is-large footer {
    4371         color: #28303d;
    4372         font-size: 1.125rem;
    4373 }
    4374 
    4375 .wp-block-quote.is-style-large .wp-block-quote__citation {
    4376         color: #28303d;
    4377         font-size: 1.125rem;
    4378 }
    4379 
    4380 .wp-block-quote.is-style-large cite {
    4381         color: #28303d;
    4382         font-size: 1.125rem;
    4383 }
    4384 
     3081        display: none;
     3082}
     3083
     3084.wp-block-quote.is-large.has-text-align-right p:before,
     3085.wp-block-quote.is-style-large.has-text-align-right p:before {
     3086        content: "”";
     3087        font-size: var(--quote--font-size-large);
     3088        font-weight: normal;
     3089        line-height: var(--quote--line-height-large);
     3090        margin-right: 10px;
     3091}
     3092
     3093.wp-block-quote.is-large .wp-block-quote__citation,
     3094.wp-block-quote.is-large cite,
     3095.wp-block-quote.is-large footer,
     3096.wp-block-quote.is-style-large .wp-block-quote__citation,
     3097.wp-block-quote.is-style-large cite,
    43853098.wp-block-quote.is-style-large footer {
    4386         color: #28303d;
    4387         font-size: 1.125rem;
     3099        color: var(--global--color-primary);
     3100        font-size: var(--global--font-size-sm);
    43883101}
    43893102@media only screen and (max-width: 481px) {
    43903103
    4391         .wp-block-quote.is-large {
    4392                 padding-left: 25px;
    4393         }
    4394 
     3104        .wp-block-quote.is-large,
    43953105        .wp-block-quote.is-style-large {
    4396                 padding-left: 25px;
     3106                padding-left: var(--global--spacing-horizontal);
    43973107        }
    43983108
    … …  
    44023112        }
    44033113
    4404         .wp-block-quote.is-large.has-text-align-right {
    4405                 padding-left: 0;
    4406                 padding-right: 25px;
    4407         }
    4408 
     3114        .wp-block-quote.is-large.has-text-align-right,
    44093115        .wp-block-quote.is-style-large.has-text-align-right {
    44103116                padding-left: 0;
    4411                 padding-right: 25px;
     3117                padding-right: var(--global--spacing-horizontal);
    44123118        }
    44133119
    … …  
    44273133        .wp-block-quote.has-text-align-right {
    44283134                padding-left: 0;
    4429                 padding-right: 13px;
     3135                padding-right: calc(0.5 * var(--global--spacing-horizontal));
    44303136        }
    44313137
    … …  
    44493155
    44503156.wp-block-rss:not(.is-grid) > li {
    4451         margin-top: 50px;
    4452         margin-bottom: 50px;
     3157        margin-top: calc(1.666 * var(--global--spacing-vertical));
     3158        margin-bottom: calc(1.666 * var(--global--spacing-vertical));
    44533159}
    44543160
    … …  
    44623168
    44633169.wp-block-rss.is-grid > li {
    4464         margin-bottom: 30px;
     3170        margin-bottom: var(--global--spacing-vertical);
    44653171}
    44663172
    … …  
    44833189
    44843190.wp-block-rss > li > * {
    4485         margin-top: 10px;
    4486         margin-bottom: 10px;
     3191        margin-top: calc(0.333 * var(--global--spacing-vertical));
     3192        margin-bottom: calc(0.333 * var(--global--spacing-vertical));
    44873193}
    44883194
    … …  
    44973203.wp-block-rss .wp-block-rss__item-title > a {
    44983204        display: inline-block;
    4499         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    4500         font-size: 2rem;
    4501         font-weight: normal;
    4502         line-height: 1.3;
    4503         margin-bottom: 10px;
    4504 }
    4505 @media only screen and (min-width: 652px) {
    4506 
    4507         .wp-block-rss .wp-block-rss__item-title > a {
    4508                 font-size: 2rem;
    4509         }
     3205        font-family: var(--latest-posts--title-font-family);
     3206        font-size: var(--latest-posts--title-font-size);
     3207        font-weight: var(--heading--font-weight);
     3208        line-height: var(--global--line-height-heading);
     3209        margin-bottom: calc(0.333 * var(--global--spacing-vertical));
    45103210}
    45113211
    45123212.wp-block-rss .wp-block-rss__item-author {
    4513         color: #28303d;
    4514         font-size: 1.25rem;
    4515         line-height: 1.7;
     3213        color: var(--global--color-primary);
     3214        font-size: var(--global--font-size-md);
     3215        line-height: var(--global--line-height-body);
    45163216}
    45173217
    45183218.wp-block-rss .wp-block-rss__item-publish-date {
    4519         color: #28303d;
    4520         font-size: 1rem;
    4521         line-height: 1.7;
     3219        color: var(--global--color-primary);
     3220        font-size: var(--global--font-size-xs);
     3221        line-height: var(--global--line-height-body);
    45223222}
    45233223
    … …  
    45273227}
    45283228
    4529 .wp-block-rss .wp-block-rss__item-excerpt {
    4530         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    4531         font-size: 1.125rem;
    4532         line-height: 1.7;
    4533         margin-top: 20px;
    4534 }
    4535 
     3229.wp-block-rss .wp-block-rss__item-excerpt,
    45363230.wp-block-rss .wp-block-rss__item-full-content {
    4537         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    4538         font-size: 1.125rem;
    4539         line-height: 1.7;
    4540         margin-top: 20px;
     3231        font-family: var(--latest-posts--description-font-family);
     3232        font-size: var(--latest-posts--description-font-size);
     3233        line-height: var(--global--line-height-body);
     3234        margin-top: calc(0.666 * var(--global--spacing-vertical));
    45413235}
    45423236
    45433237.wp-block-rss.alignfull {
    4544         padding-left: 20px;
    4545         padding-right: 20px;
     3238        padding-left: var(--global--spacing-unit);
     3239        padding-right: var(--global--spacing-unit);
    45463240}
    45473241
    … …  
    45533247
    45543248.wp-block-search {
    4555         max-width: calc(100vw - 30px);
    4556 }
    4557 
    4558 @media only screen and (min-width: 482px) {
    4559 
    4560         .wp-block-search {
    4561                 max-width: min(calc(100vw - 100px), 610px);
    4562         }
    4563 }
    4564 
    4565 @media only screen and (min-width: 822px) {
    4566 
    4567         .wp-block-search {
    4568                 max-width: min(calc(100vw - 200px), 610px);
    4569         }
    4570 }
    4571 
    4572 .wp-block-search__button-inside .wp-block-search__inside-wrapper {
    4573         background-color: #fff;
     3249        max-width: var(--responsive--aligndefault-width);
    45743250}
    45753251
    … …  
    45793255
    45803256.wp-block-search .wp-block-search__label {
    4581         font-size: 1.125rem;
    4582         font-weight: 500;
    4583         margin-bottom: 10px;
     3257        font-size: var(--form--font-size);
     3258        font-weight: var(--form--label-weight);
     3259        margin-bottom: calc(var(--global--spacing-vertical) / 3);
    45843260}
    45853261
    45863262.wp-block-search .wp-block-search__input {
    4587         border: 3px solid #39414d;
    4588         border-radius: 0;
    4589         color: #28303d;
    4590         line-height: 1.7;
     3263        border: var(--form--border-width) solid var(--form--border-color);
     3264        border-radius: var(--form--border-radius);
     3265        color: var(--form--color-text);
     3266        line-height: var(--form--line-height);
    45913267        max-width: inherit;
    4592         margin-right: -3px;
    4593         padding: 10px;
     3268        margin-right: calc(-1 * var(--button--border-width));
     3269        padding: var(--form--spacing-unit);
    45943270}
    45953271
    45963272.wp-block-search .wp-block-search__input:focus {
    4597         color: #28303d;
    4598         border-color: #39414d;
    4599 }
    4600 
    4601 .has-background:not(.has-background-background-color) .wp-block-search .wp-block-search__input,
    4602 [class*=background-color]:not(.has-background-background-color) .wp-block-search .wp-block-search__input,
     3273        color: var(--form--color-text);
     3274        border-color: var(--form--border-color);
     3275}
     3276
     3277.has-background .wp-block-search .wp-block-search__input,
     3278[class*=background-color] .wp-block-search .wp-block-search__input,
    46033279[style*=background-color] .wp-block-search .wp-block-search__input,
    46043280.wp-block-cover[style*=background-image] .wp-block-search .wp-block-search__input {
    … …  
    46063282}
    46073283
    4608 .has-background.has-gray-background-color .wp-block-search .wp-block-search__input {
    4609         border-color: #fff;
    4610 }
    4611 
    4612 .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input {
    4613         border-color: #fff;
    4614 }
    4615 
     3284.has-background.has-gray-background-color .wp-block-search .wp-block-search__input,
     3285.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input,
    46163286.has-background.has-black-background-color .wp-block-search .wp-block-search__input {
    4617         border-color: #fff;
     3287        border-color: var(--global--color-white);
    46183288}
    46193289
    … …  
    46213291        margin-left: 0;
    46223292        background-color: transparent;
    4623         color: #39414d;
     3293        color: var(--button--color-text-hover);
    46243294        line-height: 1;
    46253295}
    46263296
    46273297.wp-block-search button.wp-block-search__button:hover {
    4628         background-color: #39414d;
    4629         color: #d1e4dd;
     3298        background-color: var(--button--color-background);
     3299        color: var(--button--color-text);
    46303300}
    46313301
    46323302.wp-block-search button.wp-block-search__button.has-icon {
    4633         padding: 6px 15px;
     3303        padding: 6px calc(0.5 * var(--button--padding-horizontal));
    46343304}
    46353305
    … …  
    46403310}
    46413311
    4642 .has-background.has-gray-background-color .wp-block-search button.wp-block-search__button {
    4643         color: #fff;
     3312.has-background.has-gray-background-color .wp-block-search button.wp-block-search__button,
     3313.has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button,
     3314.has-background.has-black-background-color .wp-block-search button.wp-block-search__button {
     3315        color: var(--global--color-white);
    46443316        border-color: currentColor;
    46453317}
    46463318
    4647 .has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button {
    4648         color: #fff;
    4649         border-color: currentColor;
    4650 }
    4651 
    4652 .has-background.has-black-background-color .wp-block-search button.wp-block-search__button {
    4653         color: #fff;
    4654         border-color: currentColor;
    4655 }
    4656 
    4657 .has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover {
    4658         background-color: #39414d;
    4659         border-color: #fff;
    4660         color: #fff;
    4661 }
    4662 
    4663 .has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover {
    4664         background-color: #39414d;
    4665         border-color: #fff;
    4666         color: #fff;
    4667 }
    4668 
     3319.has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover,
     3320.has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover,
    46693321.has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover {
    4670         background-color: #39414d;
    4671         border-color: #fff;
    4672         color: #fff;
    4673 }
    4674 
    4675 .is-dark-theme .has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover {
    4676         color: #d1e4dd;
    4677 }
    4678 
    4679 .is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover {
    4680         color: #d1e4dd;
    4681 }
    4682 
     3322        background-color: var(--button--color-background);
     3323        border-color: var(--global--color-white);
     3324        color: var(--global--color-white);
     3325}
     3326
     3327.is-dark-theme .has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover,
     3328.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover,
    46833329.is-dark-theme .has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover {
    4684         color: #d1e4dd;
     3330        color: var(--button--color-text);
    46853331}
    46863332
    … …  
    46963342}
    46973343
    4698 .has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover {
    4699         background-color: #39414d;
    4700         border-color: #39414d;
    4701         color: #fff;
    4702 }
    4703 
    4704 .has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover {
    4705         background-color: #39414d;
    4706         border-color: #39414d;
    4707         color: #fff;
    4708 }
    4709 
    4710 .has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover {
    4711         background-color: #39414d;
    4712         border-color: #39414d;
    4713         color: #fff;
    4714 }
    4715 
    4716 .has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover {
    4717         background-color: #39414d;
    4718         border-color: #39414d;
    4719         color: #fff;
    4720 }
    4721 
    4722 .has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover {
    4723         background-color: #39414d;
    4724         border-color: #39414d;
    4725         color: #fff;
    4726 }
    4727 
    4728 .has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover {
    4729         background-color: #39414d;
    4730         border-color: #39414d;
    4731         color: #fff;
    4732 }
    4733 
     3344.has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover,
     3345.has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover,
     3346.has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover,
     3347.has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover,
     3348.has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover,
     3349.has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover,
    47343350.has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover {
    4735         background-color: #39414d;
    4736         border-color: #39414d;
    4737         color: #fff;
    4738 }
    4739 
    4740 .is-dark-theme .has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover {
    4741         border-color: #d1e4dd;
    4742         background-color: #d1e4dd;
    4743         color: #39414d;
    4744 }
    4745 
    4746 .is-dark-theme .has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover {
    4747         border-color: #d1e4dd;
    4748         background-color: #d1e4dd;
    4749         color: #39414d;
    4750 }
    4751 
    4752 .is-dark-theme .has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover {
    4753         border-color: #d1e4dd;
    4754         background-color: #d1e4dd;
    4755         color: #39414d;
    4756 }
    4757 
    4758 .is-dark-theme .has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover {
    4759         border-color: #d1e4dd;
    4760         background-color: #d1e4dd;
    4761         color: #39414d;
    4762 }
    4763 
    4764 .is-dark-theme .has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover {
    4765         border-color: #d1e4dd;
    4766         background-color: #d1e4dd;
    4767         color: #39414d;
    4768 }
    4769 
    4770 .is-dark-theme .has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover {
    4771         border-color: #d1e4dd;
    4772         background-color: #d1e4dd;
    4773         color: #39414d;
    4774 }
    4775 
     3351        background-color: var(--form--border-color);
     3352        border-color: var(--form--border-color);
     3353        color: var(--global--color-white);
     3354}
     3355
     3356.is-dark-theme .has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover,
     3357.is-dark-theme .has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover,
     3358.is-dark-theme .has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover,
     3359.is-dark-theme .has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover,
     3360.is-dark-theme .has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover,
     3361.is-dark-theme .has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover,
    47763362.is-dark-theme .has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover {
    4777         border-color: #d1e4dd;
    4778         background-color: #d1e4dd;
    4779         color: #39414d;
     3363        border-color: var(--button--color-text);
     3364        background-color: var(--button--color-text);
     3365        color: var(--button--color-background);
     3366}
     3367
     3368.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
     3369        background-color: var(--global--color-white);
     3370        border: var(--form--border-width) solid var(--form--border-color);
     3371        border-radius: var(--form--border-radius);
     3372}
     3373
     3374.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
     3375        margin-right: 0;
     3376}
     3377
     3378.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
     3379        outline: 2px dotted var(--form--border-color);
     3380        outline-offset: -5px;
     3381}
     3382
     3383.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
     3384        outline-color: currentColor;
    47803385}
    47813386
    47823387.wp-block-search.wp-block-search__button-inside.wp-block-search__text-button button.wp-block-search__button {
    4783         padding: 15px 30px;
    4784 }
    4785 
    4786 .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
    4787         border-color: #39414d;
    4788         color: #39414d;
    4789 }
    4790 
    4791 .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
    4792         border-color: #39414d;
    4793         color: #39414d;
    4794 }
    4795 
     3388        padding: var(--button--padding-vertical) var(--button--padding-horizontal);
     3389}
     3390
     3391.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button,
     3392.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button,
    47963393.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
    4797         border-color: #39414d;
    4798         color: #39414d;
    4799 }
    4800 
    4801 .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
    4802         color: #fff;
    4803 }
    4804 
    4805 .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
    4806         color: #fff;
    4807 }
    4808 
     3394        border-color: var(--button--color-background);
     3395        color: var(--button--color-background);
     3396}
     3397
     3398.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
     3399.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
    48093400.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
    4810         color: #fff;
    4811 }
    4812 
    4813 .is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
    4814         border-color: #d1e4dd;
    4815         color: #d1e4dd;
    4816 }
    4817 
    4818 .is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
    4819         border-color: #d1e4dd;
    4820         color: #d1e4dd;
    4821 }
    4822 
     3401        color: var(--global--color-white);
     3402}
     3403
     3404.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button,
     3405.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button,
    48233406.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
    4824         border-color: #d1e4dd;
    4825         color: #d1e4dd;
    4826 }
    4827 
    4828 .is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
    4829         color: #fff;
    4830 }
    4831 
    4832 .is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
    4833         color: #fff;
    4834 }
    4835 
     3407        border-color: var(--button--color-text);
     3408        color: var(--button--color-text);
     3409}
     3410
     3411.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
     3412.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
    48363413.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
    4837         color: #fff;
     3414        color: var(--global--color-white);
    48383415}
    48393416
    48403417.is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
    4841         border-color: #d1e4dd;
    4842         color: #d1e4dd;
     3418        border-color: var(--button--color-text);
     3419        color: var(--button--color-text);
    48433420}
    48443421
    48453422.is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
    4846         border-color: #d1e4dd;
    4847         background-color: #d1e4dd;
    4848         color: #39414d;
     3423        border-color: var(--button--color-text);
     3424        background-color: var(--button--color-text);
     3425        color: var(--button--color-background);
    48493426}
    48503427
    … …  
    48553432hr {
    48563433        border-style: none;
    4857         border-bottom: 1px solid #28303d;
     3434        border-bottom: var(--separator--height) solid var(--separator--border-color);
    48583435        clear: both;
    48593436        margin-left: auto;
    … …  
    48623439
    48633440hr.wp-block-separator {
    4864         border-bottom: 1px solid #28303d;
     3441        border-bottom: var(--separator--height) solid var(--separator--border-color);
     3442        opacity: 1;
    48653443
    48663444        /**
    … …  
    48703448
    48713449hr.wp-block-separator:not(.is-style-dots):not(.alignwide) {
    4872         max-width: calc(100vw - 30px);
    4873 }
    4874 @media only screen and (min-width: 482px) {
    4875 
    4876         hr.wp-block-separator:not(.is-style-dots):not(.alignwide) {
    4877                 max-width: min(calc(100vw - 100px), 610px);
    4878         }
    4879 }
    4880 @media only screen and (min-width: 822px) {
    4881 
    4882         hr.wp-block-separator:not(.is-style-dots):not(.alignwide) {
    4883                 max-width: min(calc(100vw - 200px), 610px);
    4884         }
    4885 }
    4886 
    4887 hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull {
    4888         max-width: 100%;
     3450        max-width: var(--responsive--aligndefault-width);
     3451}
     3452
     3453hr.wp-block-separator:not(.is-style-dots).alignwide {
     3454        max-width: var(--responsive--alignwide-width);
     3455}
     3456
     3457hr.wp-block-separator:not(.is-style-dots).alignfull {
     3458        max-width: var(--responsive--alignfull-width);
    48893459}
    48903460
    48913461hr.wp-block-separator.is-style-twentytwentyone-separator-thick {
    4892         border-bottom-width: 3px;
     3462        border-bottom-width: calc(3 * var(--separator--height));
    48933463}
    48943464
    … …  
    49043474
    49053475hr.wp-block-separator.is-style-dots:before {
    4906         color: #28303d;
    4907         font-size: 2.25rem;
    4908         letter-spacing: 1.125rem;
    4909         padding-left: 1.125rem;
    4910 }
    4911 @media only screen and (min-width: 652px) {
    4912 
    4913         hr.wp-block-separator.is-style-dots:before {
    4914                 font-size: 2.5rem;
    4915         }
    4916 }
    4917 
    4918 .has-background:not(.has-background-background-color) hr.wp-block-separator,
    4919 [class*=background-color]:not(.has-background-background-color) hr.wp-block-separator,
     3476        color: var(--separator--border-color);
     3477        font-size: var(--global--font-size-xl);
     3478        letter-spacing: var(--global--font-size-sm);
     3479        padding-left: var(--global--font-size-sm);
     3480}
     3481
     3482.has-background hr.wp-block-separator,
     3483[class*=background-color] hr.wp-block-separator,
    49203484[style*=background-color] hr.wp-block-separator,
    49213485.wp-block-cover[style*=background-image] hr.wp-block-separator {
    … …  
    49233487}
    49243488
     3489.wp-block-social-links a:focus {
     3490        color: var(--global--color-primary);
     3491}
     3492
    49253493.wp-block-social-links.is-style-twentytwentyone-social-icons-color a {
    4926         color: #28303d;
     3494        color: var(--global--color-primary);
    49273495}
    49283496
    … …  
    49393507
    49403508        .wp-block-spacer[style] {
    4941                 height: 20px !important;
     3509                height: var(--global--spacing-unit) !important;
    49423510        }
    49433511}
    … …  
    49503518}
    49513519
    4952 table th {
    4953         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    4954 }
    4955 
     3520table th,
    49563521.wp-block-table th {
    4957         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    4958 }
    4959 
    4960 table td {
    4961         padding: 10px;
     3522        font-family: var(--heading--font-family);
     3523}
     3524
     3525table td,
     3526table th,
     3527.wp-block-table td,
     3528.wp-block-table th {
     3529        padding: calc(0.5 * var(--global--spacing-unit));
    49623530        border: 1px solid;
    49633531}
    49643532
    4965 table th {
    4966         padding: 10px;
    4967         border: 1px solid;
    4968 }
    4969 
    4970 .wp-block-table td {
    4971         padding: 10px;
    4972         border: 1px solid;
    4973 }
    4974 
    4975 .wp-block-table th {
    4976         padding: 10px;
    4977         border: 1px solid;
    4978 }
    4979 
    4980 table.is-style-regular .has-background {
    4981         color: #28303d;
    4982 }
    4983 
    4984 table.is-style-stripes .has-background thead tr {
    4985         color: #28303d;
    4986 }
    4987 
    4988 table.is-style-stripes .has-background tfoot tr {
    4989         color: #28303d;
    4990 }
    4991 
    4992 table.is-style-stripes .has-background tbody tr:nth-child(even) {
    4993         color: #28303d;
    4994 }
    4995 
    4996 .wp-block-table.is-style-regular .has-background {
    4997         color: #28303d;
    4998 }
    4999 
    5000 .wp-block-table.is-style-stripes .has-background thead tr {
    5001         color: #28303d;
    5002 }
    5003 
    5004 .wp-block-table.is-style-stripes .has-background tfoot tr {
    5005         color: #28303d;
    5006 }
    5007 
     3533table.is-style-regular .has-background,
     3534table.is-style-stripes .has-background thead tr,
     3535table.is-style-stripes .has-background tfoot tr,
     3536table.is-style-stripes .has-background tbody tr:nth-child(even),
     3537.wp-block-table.is-style-regular .has-background,
     3538.wp-block-table.is-style-stripes .has-background thead tr,
     3539.wp-block-table.is-style-stripes .has-background tfoot tr,
    50083540.wp-block-table.is-style-stripes .has-background tbody tr:nth-child(even) {
    5009         color: #28303d;
    5010 }
    5011 
    5012 table.is-style-stripes {
    5013         border-color: #f0f0f0;
    5014 }
    5015 
     3541        color: var(--table--has-background-text-color);
     3542}
     3543
     3544table.is-style-stripes,
    50163545.wp-block-table.is-style-stripes {
    5017         border-color: #f0f0f0;
     3546        border-color: var(--table--stripes-border-color);
    50183547}
    50193548
    … …  
    50253554}
    50263555
    5027 table.is-style-stripes tbody tr:nth-child(odd) {
    5028         background-color: #f0f0f0;
    5029 }
    5030 
     3556table.is-style-stripes tbody tr:nth-child(odd),
    50313557.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    5032         background-color: #f0f0f0;
     3558        background-color: var(--table--stripes-background-color);
    50333559}
    50343560
    … …  
    50563582        font-weight: bold;
    50573583        text-align: left;
    5058         margin-bottom: 20px;
     3584        margin-bottom: var(--global--spacing-unit);
    50593585        color: currentColor;
    50603586}
    … …  
    50623588.wp-calendar-nav {
    50633589        text-align: left;
    5064         margin-top: 10px;
     3590        margin-top: calc(var(--global--spacing-unit) / 2);
    50653591}
    50663592
    … …  
    50793605
    50803606.wp-block-tag-cloud.alignfull {
    5081         padding-left: 20px;
    5082         padding-right: 20px;
     3607        padding-left: var(--global--spacing-unit);
     3608        padding-right: var(--global--spacing-unit);
    50833609}
    50843610
    50853611.wp-block-verse {
    5086         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     3612        font-family: var(--entry-content--font-family);
    50873613}
    50883614
    50893615.wp-block-video figcaption {
    5090         color: #28303d;
    5091         font-size: 1rem;
    5092         margin-top: 10px;
    5093         margin-bottom: 20px;
     3616        color: var(--global--color-primary);
     3617        font-size: var(--global--font-size-xs);
     3618        margin-top: calc(0.5 * var(--global--spacing-unit));
     3619        margin-bottom: var(--global--spacing-unit);
    50943620        text-align: center;
    50953621}
    … …  
    51013627}
    51023628
    5103 :root .is-extra-small-text {
    5104         font-size: 1rem;
    5105 }
    5106 
     3629:root .is-extra-small-text,
    51073630:root .has-extra-small-font-size {
    5108         font-size: 1rem;
    5109 }
    5110 
    5111 :root .is-small-text {
    5112         font-size: 1.125rem;
    5113 }
    5114 
     3631        font-size: var(--global--font-size-xs);
     3632}
     3633
     3634:root .is-small-text,
    51153635:root .has-small-font-size {
    5116         font-size: 1.125rem;
    5117 }
    5118 
    5119 :root .is-regular-text {
    5120         font-size: 1.25rem;
    5121 }
    5122 
    5123 :root .has-regular-font-size {
    5124         font-size: 1.25rem;
    5125 }
    5126 
    5127 :root .is-normal-font-size {
    5128         font-size: 1.25rem;
    5129 }
    5130 
    5131 :root .has-normal-font-size {
    5132         font-size: 1.25rem;
    5133 }
    5134 
     3636        font-size: var(--global--font-size-sm);
     3637}
     3638
     3639:root .is-regular-text,
     3640:root .has-regular-font-size,
     3641:root .is-normal-font-size,
     3642:root .has-normal-font-size,
    51353643:root .has-medium-font-size {
    5136         font-size: 1.25rem;
    5137 }
    5138 
    5139 :root .is-large-text {
    5140         font-size: 1.5rem;
    5141         line-height: 1.3;
    5142 }
    5143 
     3644        font-size: var(--global--font-size-base);
     3645}
     3646
     3647:root .is-large-text,
    51443648:root .has-large-font-size {
    5145         font-size: 1.5rem;
    5146         line-height: 1.3;
    5147 }
    5148 
    5149 :root .is-larger-text {
    5150         font-size: 2.5rem;
    5151         line-height: 1.3;
    5152 }
    5153 @media only screen and (min-width: 652px) {
    5154 
    5155         :root .is-larger-text {
    5156                 font-size: 2.5rem;
    5157         }
    5158 }
    5159 
    5160 :root .has-larger-font-size {
    5161         font-size: 2.5rem;
    5162         line-height: 1.3;
    5163 }
    5164 @media only screen and (min-width: 652px) {
    5165 
    5166         :root .has-larger-font-size {
    5167                 font-size: 2.5rem;
    5168         }
    5169 }
    5170 
    5171 :root .is-extra-large-text {
    5172         font-size: 2.5rem;
    5173         line-height: 1.3;
    5174 }
    5175 @media only screen and (min-width: 652px) {
    5176 
    5177         :root .is-extra-large-text {
    5178                 font-size: 2.5rem;
    5179         }
    5180 }
    5181 
     3649        font-size: var(--global--font-size-lg);
     3650        line-height: var(--global--line-height-heading);
     3651}
     3652
     3653:root .is-larger-text,
     3654:root .has-larger-font-size,
     3655:root .is-extra-large-text,
    51823656:root .has-extra-large-font-size {
    5183         font-size: 2.5rem;
    5184         line-height: 1.3;
    5185 }
    5186 @media only screen and (min-width: 652px) {
    5187 
    5188         :root .has-extra-large-font-size {
    5189                 font-size: 2.5rem;
    5190         }
    5191 }
    5192 
    5193 :root .is-huge-text {
    5194         font-size: 6rem;
    5195         line-height: 1.3;
    5196         font-weight: 300;
    5197 }
    5198 @media only screen and (min-width: 652px) {
    5199 
    5200         :root .is-huge-text {
    5201                 font-size: 6rem;
    5202         }
    5203 }
    5204 
     3657        font-size: var(--global--font-size-xl);
     3658        line-height: var(--global--line-height-heading);
     3659}
     3660
     3661:root .is-huge-text,
    52053662:root .has-huge-font-size {
    5206         font-size: 6rem;
    5207         line-height: 1.3;
    5208         font-weight: 300;
    5209 }
    5210 @media only screen and (min-width: 652px) {
    5211 
    5212         :root .has-huge-font-size {
    5213                 font-size: 6rem;
    5214         }
    5215 }
    5216 
    5217 :root .is-gigantic-text {
    5218         font-size: 9rem;
    5219         line-height: 1.3;
    5220         font-weight: 300;
    5221 }
    5222 @media only screen and (min-width: 652px) {
    5223 
    5224         :root .is-gigantic-text {
    5225                 font-size: 9rem;
    5226         }
    5227 }
    5228 
     3663        font-size: var(--global--font-size-xxl);
     3664        line-height: var(--global--line-height-heading);
     3665        font-weight: var(--heading--font-weight-page-title);
     3666}
     3667
     3668:root .is-gigantic-text,
    52293669:root .has-gigantic-font-size {
    5230         font-size: 9rem;
    5231         line-height: 1.3;
    5232         font-weight: 300;
    5233 }
    5234 @media only screen and (min-width: 652px) {
    5235 
    5236         :root .has-gigantic-font-size {
    5237                 font-size: 9rem;
    5238         }
     3670        font-size: var(--global--font-size-xxxl);
     3671        line-height: var(--global--line-height-heading);
     3672        font-weight: var(--heading--font-weight-page-title);
    52393673}
    52403674
    … …  
    52563690
    52573691.entry-content > .alignleft {
    5258         max-width: calc(100vw - 30px);
    5259 }
    5260 
    5261 @media only screen and (min-width: 482px) {
    5262 
    5263         .entry-content > .alignleft {
    5264                 max-width: min(calc(100vw - 100px), 610px);
    5265         }
    5266 }
    5267 
    5268 @media only screen and (min-width: 822px) {
    5269 
    5270         .entry-content > .alignleft {
    5271                 max-width: min(calc(100vw - 200px), 610px);
    5272         }
     3692        max-width: var(--responsive--aligndefault-width);
    52733693}
    52743694
    … …  
    52813701
    52823702                /*rtl:ignore*/
    5283                 margin-right: 25px;
    5284                 margin-bottom: 30px;
     3703                margin-right: var(--global--spacing-horizontal);
     3704                margin-bottom: var(--global--spacing-vertical);
    52853705        }
    52863706
    52873707        .entry-content > .alignleft {
    5288                 max-width: calc(50% - 50vw + min(calc(100vw - 4 * 25px), 610px) *1);
    5289         }
    5290 
    5291         @media only screen and (min-width: 482px) {
    5292 
    5293                 .entry-content > .alignleft {
    5294                         max-width: calc(50% - 50vw + min(calc(100vw - 4 * 25px), 610px) *1);
    5295                 }
    5296         }
    5297 
    5298         @media only screen and (min-width: 482px) {
    5299 
    5300                 .entry-content > .alignleft {
    5301                         max-width: calc(50% - 50vw + min(calc(100vw - 4 * 25px), 610px) *1);
    5302                 }
    5303         }
    5304 
    5305         @media only screen and (min-width: 822px) {
    5306 
    5307                 .entry-content > .alignleft {
    5308                         max-width: calc(50% - 50vw + min(calc(100vw - 4 * 25px), 610px) *1);
    5309                 }
     3708                max-width: calc(50% - var(--responsive--alignleft-margin));
    53103709        }
    53113710}
    … …  
    53283727.alignright {
    53293728        margin-top: 0;
    5330         margin-bottom: 30px;
     3729        margin-bottom: var(--global--spacing-vertical);
    53313730}
    53323731
    53333732.entry-content > .alignright {
    5334         max-width: calc(100vw - 30px);
    5335 }
    5336 
    5337 @media only screen and (min-width: 482px) {
    5338 
    5339         .entry-content > .alignright {
    5340                 max-width: min(calc(100vw - 100px), 610px);
    5341         }
    5342 }
    5343 
    5344 @media only screen and (min-width: 822px) {
    5345 
    5346         .entry-content > .alignright {
    5347                 max-width: min(calc(100vw - 200px), 610px);
    5348         }
     3733        max-width: var(--responsive--aligndefault-width);
    53493734}
    53503735
    … …  
    53573742
    53583743                /*rtl:ignore*/
    5359                 margin-left: 25px;
     3744                margin-left: var(--global--spacing-horizontal);
    53603745        }
    53613746
    53623747        .entry-content > .alignright {
    5363                 max-width: calc(50% - 50vw + min(calc(100vw - 4 * 25px), 610px) *1);
    5364         }
    5365 
    5366         @media only screen and (min-width: 482px) {
    5367 
    5368                 .entry-content > .alignright {
    5369                         max-width: calc(50% - 50vw + min(calc(100vw - 4 * 25px), 610px) *1);
    5370                 }
    5371         }
    5372 
    5373         @media only screen and (min-width: 482px) {
    5374 
    5375                 .entry-content > .alignright {
    5376                         max-width: calc(50% - 50vw + min(calc(100vw - 4 * 25px), 610px) *1);
    5377                 }
    5378         }
    5379 
    5380         @media only screen and (min-width: 822px) {
    5381 
    5382                 .entry-content > .alignright {
    5383                         max-width: calc(50% - 50vw + min(calc(100vw - 4 * 25px), 610px) *1);
    5384                 }
     3748                max-width: calc(50% - var(--responsive--alignright-margin));
    53853749        }
    53863750}
    … …  
    54183782
    54193783.has-drop-cap:not(:focus)::first-letter {
    5420         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    5421         font-weight: normal;
     3784        font-family: var(--heading--font-family);
     3785        font-weight: var(--heading--font-weight);
    54223786        line-height: 0.66;
    54233787        text-transform: uppercase;
    … …  
    54253789        float: left;
    54263790        margin: 0.1em 0.1em 0 0;
    5427         font-size: 5rem;
    5428 }
    5429 
    5430 @media only screen and (min-width: 652px) {
    5431 
    5432         .has-drop-cap:not(:focus)::first-letter {
    5433                 font-size: 7rem;
    5434         }
     3791        font-size: calc(1.2 * var(--heading--font-size-h1));
    54353792}
    54363793
    … …  
    54573814        align-items: flex-start;
    54583815        flex-wrap: wrap;
    5459         row-gap: 30px;
     3816        row-gap: var(--global--spacing-vertical);
    54603817}
    54613818
    … …  
    54663823
    54673824        .site-header {
    5468                 padding-top: 40px;
     3825                padding-top: calc(var(--global--spacing-vertical) / 0.75);
    54693826        }
    54703827}
    … …  
    54723829
    54733830        .site-header {
    5474                 padding-top: 72px;
     3831                padding-top: calc(2.4 * var(--global--spacing-vertical));
    54753832        }
    54763833}
    54773834
    54783835.site-branding {
    5479         color: #28303d;
     3836        color: var(--branding--color-text);
    54803837        margin-right: 140px;
    54813838}
    … …  
    54953852
    54963853.site-title {
    5497         color: #28303d;
    5498         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    5499         font-size: 1.5rem;
     3854        color: var(--branding--color-link);
     3855        font-family: var(--branding--title--font-family);
     3856        font-size: var(--branding--title--font-size-mobile);
    55003857        letter-spacing: normal;
    5501         text-transform: uppercase;
    5502         line-height: 1.3;
    5503         margin-bottom: 5px;
     3858        text-transform: var(--branding--title--text-transform);
     3859        line-height: var(--global--line-height-heading);
     3860        margin-bottom: calc(var(--global--spacing-vertical) / 6);
    55043861}
    55053862
    55063863.site-title a {
    55073864        color: currentColor;
    5508         font-weight: normal;
     3865        font-weight: var(--branding--title--font-weight);
    55093866}
    55103867
    … …  
    55153872}
    55163873
    5517 .site-title a:hover {
    5518         color: #39414d;
    5519 }
    5520 
     3874.site-title a:hover,
    55213875.site-title a:focus {
    5522         color: #39414d;
     3876        color: var(--branding--color-link-hover);
    55233877}
    55243878@media only screen and (min-width: 482px) {
    55253879
    55263880        .site-title {
    5527                 font-size: 1.5rem;
     3881                font-size: var(--branding--title--font-size);
    55283882        }
    55293883}
    … …  
    55313885.site-description {
    55323886        color: currentColor;
    5533         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    5534         font-size: 1.125rem;
     3887        font-family: var(--branding--description--font-family);
     3888        font-size: var(--branding--description--font-size);
    55353889        line-height: 1.4;
    55363890}
    … …  
    55403894}
    55413895
     3896.has-background-white a.custom-logo-link:focus,
     3897.is-dark-theme a.custom-logo-link:focus {
     3898        background: none;
     3899}
     3900
    55423901.site-title > a {
    5543         text-decoration-color: #39414d;
     3902        text-decoration-color: var(--global--color-secondary);
    55443903}
    55453904
    55463905.site-logo {
    5547         margin: 15px 0;
     3906        margin: calc(var(--global--spacing-vertical) / 2) 0;
    55483907}
    55493908
    55503909.site-header > .site-logo {
    55513910        width: 100%;
    5552         padding-bottom: 45px;
     3911        padding-bottom: calc(var(--global--spacing-vertical) * 1.5);
    55533912        border-bottom: 1px solid;
    55543913        text-align: center;
    … …  
    55583917        margin-left: auto;
    55593918        margin-right: auto;
    5560         max-width: 96px;
    5561         max-height: 96px;
     3919        max-width: var(--branding--logo--max-width-mobile);
     3920        max-height: var(--branding--logo--max-height-mobile);
    55623921        height: auto;
    55633922        display: inline-block;
    … …  
    55673926
    55683927        .site-logo .custom-logo {
    5569                 max-width: 300px;
    5570                 max-height: 100px;
     3928                max-width: var(--branding--logo--max-width);
     3929                max-height: var(--branding--logo--max-height);
    55713930                height: auto;
    55723931                width: auto;
    … …  
    55783937        .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo {
    55793938                position: absolute;
    5580                 padding-top: 15px;
     3939                padding-top: calc(0.5 * var(--global--spacing-vertical));
    55813940                margin-top: 0;
    5582                 top: 0;
     3941                top: var(--global--admin-bar--height);
    55833942        }
    55843943
    … …  
    55883947
    55893948        .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo img {
    5590                 max-height: calc(10px + 2em);
     3949                max-height: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit)) + 1.7em);
    55913950        }
    55923951
    … …  
    56193978                position: relative;
    56203979                padding-top: 0;
    5621                 margin-top: -10px;
     3980                margin-top: calc(0px - var(--button--padding-vertical) + (0.25 * var(--global--spacing-unit)));
    56223981        }
    56233982
    56243983        body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline .menu-button-container #primary-mobile-menu {
    5625                 padding-left: 11px;
    5626                 padding-right: 11px;
    5627                 margin-right: -15px;
     3984                padding-left: calc(var(--global--spacing-horizontal) * 0.6 - 4.5px);
     3985                padding-right: calc(var(--global--spacing-horizontal) * 0.6 - 4.5px);
     3986                margin-right: calc(0px - var(--global--spacing-horizontal) * 0.6);
    56283987        }
    56293988
    … …  
    56403999.site-footer {
    56414000        padding-top: 0;
    5642         padding-bottom: 51px;
     4001        padding-bottom: calc(1.7 * var(--global--spacing-vertical));
    56434002}
    56444003
    56454004.no-widgets .site-footer {
    5646         margin-top: 180px;
     4005        margin-top: calc(6 * var(--global--spacing-vertical));
     4006}
     4007@media only screen and (max-width: 481px) {
     4008
     4009        .no-widgets .site-footer {
     4010                margin-top: calc(3 * var(--global--spacing-vertical));
     4011        }
    56474012}
    56484013
    56494014.site-footer > .site-info {
    5650         padding-top: 30px;
    5651         color: #28303d;
    5652         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    5653         font-size: 1.125rem;
    5654         line-height: 1.7;
    5655         border-top: 3px solid #28303d;
     4015        padding-top: var(--global--spacing-vertical);
     4016        color: var(--footer--color-text);
     4017        font-family: var(--footer--font-family);
     4018        font-size: var(--footer--font-size);
     4019        line-height: var(--global--line-height-body);
     4020        border-top: 3px solid var(--global--color-border);
    56564021}
    56574022
    56584023.site-footer > .site-info .site-name {
    5659         text-transform: uppercase;
    5660         font-size: 1.5rem;
     4024        text-transform: var(--branding--title--text-transform);
     4025        font-size: var(--branding--title--font-size);
    56614026}
    56624027
    56634028.site-footer > .site-info .powered-by {
    5664         margin-top: 15px;
     4029        margin-top: calc(0.5 * var(--global--spacing-vertical));
    56654030}
    56664031@media only screen and (min-width: 822px) {
    … …  
    56784043
    56794044.site-footer > .site-info a {
    5680         color: #28303d;
    5681 }
    5682 
    5683 .site-footer > .site-info a:link {
    5684         color: #28303d;
    5685 }
    5686 
    5687 .site-footer > .site-info a:visited {
    5688         color: #28303d;
    5689 }
    5690 
     4045        color: var(--footer--color-link);
     4046}
     4047
     4048.site-footer > .site-info a:link,
     4049.site-footer > .site-info a:visited,
    56914050.site-footer > .site-info a:active {
    5692         color: #28303d;
     4051        color: var(--footer--color-link);
    56934052}
    56944053
    56954054.site-footer > .site-info a:hover {
    5696         color: #28303d;
     4055        color: var(--footer--color-link-hover);
    56974056}
    56984057
    56994058.site-footer > .site-info a:focus {
    5700         color: #28303d;
     4059        color: var(--footer--color-link-hover);
    57014060}
    57024061
    57034062.is-dark-theme .site-footer > .site-info a:focus {
    5704         color: #d1e4dd;
     4063        color: var(--wp--style--color--link, var(--global--color-background));
     4064}
     4065
     4066.has-background-white .site-footer > .site-info a:focus {
     4067        color: var(--wp--style--color--link, var(--global--color-white));
    57054068}
    57064069
    57074070.singular .entry-header {
    5708         border-bottom: 3px solid #28303d;
    5709         padding-bottom: 60px;
    5710         margin-bottom: 90px;
     4071        border-bottom: 3px solid var(--global--color-border);
     4072        padding-bottom: calc(2 * var(--global--spacing-vertical));
     4073        margin-bottom: calc(3 * var(--global--spacing-vertical));
    57114074}
    57124075
    … …  
    57194082.singular .has-post-thumbnail .entry-header {
    57204083        border-bottom: none;
    5721         padding-bottom: 39px;
     4084        padding-bottom: calc(1.3 * var(--global--spacing-vertical));
    57224085        margin-bottom: 0;
    57234086}
    57244087
    57254088.no-results.not-found > *:first-child {
    5726         margin-bottom: 90px;
     4089        margin-bottom: calc(3 * var(--global--spacing-vertical));
    57274090}
    57284091
    … …  
    57334096.page-links .post-page-numbers {
    57344097        display: inline-block;
    5735         margin-left: 13px;
    5736         margin-right: 13px;
     4098        margin-left: calc(0.66 * var(--global--spacing-unit));
     4099        margin-right: calc(0.66 * var(--global--spacing-unit));
    57374100        min-width: 44px;
    57384101        min-height: 44px;
    … …  
    57444107
    57454108.entry-title {
    5746         color: #28303d;
    5747         font-size: 2.25rem;
    5748         letter-spacing: normal;
    5749         line-height: 1.3;
     4109        color: var(--entry-header--color);
     4110        font-size: var(--entry-header--font-size);
     4111        letter-spacing: var(--heading--letter-spacing-h2);
     4112        line-height: var(--heading--line-height-h2);
    57504113        overflow-wrap: break-word;
    57514114}
    57524115
    5753 @media only screen and (min-width: 652px) {
    5754 
    5755         .entry-title {
    5756                 font-size: 3rem;
    5757         }
    5758 }
    5759 
    5760 @media only screen and (min-width: 652px) {
    5761 
    5762         .entry-title {
    5763                 font-size: 3rem;
    5764         }
    5765 }
    5766 
    57674116.entry-title a {
    5768         color: currentColor;
     4117        color: var(--entry-header--color-link);
    57694118        text-underline-offset: 0.15em;
    57704119}
    57714120
    57724121.entry-title a:hover {
    5773         color: #28303d;
     4122        color: var(--entry-header--color-hover);
    57744123}
    57754124
    57764125.entry-title a:focus {
    5777         color: #39414d;
     4126        color: var(--entry-header--color-focus);
    57784127}
    57794128
    57804129.entry-title a:active {
    5781         color: currentColor;
     4130        color: var(--entry-header--color-link);
    57824131}
    57834132
    57844133.singular .entry-title {
    5785         font-size: 4rem;
    5786 }
    5787 
    5788 @media only screen and (min-width: 652px) {
    5789 
    5790         .singular .entry-title {
    5791                 font-size: 6rem;
    5792         }
     4134        font-size: var(--global--font-size-page-title);
    57934135}
    57944136
    57954137h1.entry-title {
    5796         line-height: 1.1;
    5797         font-weight: 300;
     4138        line-height: var(--heading--line-height-h1);
     4139        font-weight: var(--heading--font-weight-page-title);
    57984140}
    57994141
    … …  
    58014143 * Entry Content
    58024144 */
    5803 .entry-content {
    5804         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    5805 }
    5806 
     4145.entry-content,
    58074146.entry-summary {
    5808         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     4147        font-family: var(--entry-content--font-family);
    58094148}
    58104149
    … …  
    58144153
    58154154.entry-content > iframe[style] {
    5816         margin: 30px 0 !important;
     4155        margin: var(--global--spacing-vertical) 0 !important;
    58174156        max-width: 100% !important;
    58184157}
    … …  
    58204159
    58214160        .entry-content > iframe[style] {
    5822                 max-width: 30px !important;
     4161                max-width: var(--global--spacing-vertical) !important;
    58234162        }
    58244163}
    58254164
    58264165.entry-footer {
    5827         color: #28303d;
     4166        color: var(--global--color-primary);
    58284167        clear: both;
    58294168        float: none;
    5830         font-size: 1rem;
     4169        font-size: var(--global--font-size-xs);
    58314170        display: block;
    58324171}
    … …  
    58404179}
    58414180
    5842 .entry-footer a:hover {
    5843         color: #28303d;
    5844 }
    5845 
     4181.entry-footer a:hover,
    58464182.entry-footer a:focus {
    5847         color: #28303d;
     4183        color: var(--global--color-primary-hover);
    58484184}
    58494185
    … …  
    58534189
    58544190.site-main > article > .entry-footer {
    5855         margin-top: 30px;
    5856         padding-top: 20px;
    5857         padding-bottom: 90px;
    5858         border-bottom: 1px solid #28303d;
     4191        margin-top: var(--global--spacing-vertical);
     4192        padding-top: var(--global--spacing-unit);
     4193        padding-bottom: calc(3 * var(--global--spacing-vertical));
     4194        border-bottom: var(--separator--height) solid var(--separator--border-color);
    58594195}
    58604196
    58614197body:not(.single) .site-main > article:last-of-type .entry-footer {
    5862         border-bottom: 1px solid transparent;
     4198        border-bottom: var(--separator--height) solid transparent;
    58634199}
    58644200
    58654201.single .site-main > article > .entry-footer {
    5866         margin-top: 102px;
    5867         margin-bottom: 102px;
     4202        margin-top: calc(3.4 * var(--global--spacing-vertical));
     4203        margin-bottom: calc(3.4 * var(--global--spacing-vertical));
    58684204        padding-bottom: 0;
    5869         padding-top: 24px;
    5870         border-top: 3px solid #28303d;
    5871         border-bottom: 1px solid transparent;
     4205        padding-top: calc(0.8 * var(--global--spacing-vertical));
     4206        border-top: 3px solid var(--separator--border-color);
     4207        border-bottom: var(--separator--height) solid transparent;
    58724208        display: grid;
    58734209        grid-template-columns: repeat(2, 1fr);
    5874         column-gap: 50px;
     4210        column-gap: calc(2 * var(--global--spacing-horizontal));
    58754211}
    58764212
    … …  
    59204256        margin-left: auto;
    59214257        margin-right: auto;
    5922         margin-top: 60px;
     4258        margin-top: calc(2 * var(--global--spacing-vertical));
    59234259}
    59244260
    … …  
    59284264.author-bio {
    59294265        position: relative;
    5930         font-size: 1rem;
    5931         max-width: calc(100vw - 30px);
    5932 }
    5933 @media only screen and (min-width: 482px) {
    5934 
    5935         .author-bio {
    5936                 max-width: min(calc(100vw - 100px), 610px);
    5937         }
    5938 }
    5939 @media only screen and (min-width: 822px) {
    5940 
    5941         .author-bio {
    5942                 max-width: min(calc(100vw - 200px), 610px);
    5943         }
     4266        font-size: var(--global--font-size-xs);
     4267        max-width: var(--responsive--aligndefault-width);
    59444268}
    59454269
    59464270.site-main > article > .author-bio {
    5947         margin-top: 60px;
     4271        margin-top: calc(2 * var(--global--spacing-vertical));
    59484272}
    59494273
    … …  
    59564280.author-bio.show-avatars .author-bio-content {
    59574281        display: inline-block;
    5958         padding-left: 25px;
    5959         max-width: calc(100vw - 120px);
    5960 }
    5961 @media only screen and (min-width: 482px) {
    5962 
    5963         .author-bio.show-avatars .author-bio-content {
    5964                 max-width: calc(min(calc(100vw - 4 * 25px), 610px) - 90px);
    5965         }
    5966 }
    5967 @media only screen and (min-width: 822px) {
    5968 
    5969         .author-bio.show-avatars .author-bio-content {
    5970                 max-width: calc(min(calc(100vw - 8 * 25px), 610px) - 90px);
    5971         }
     4282        padding-left: var(--global--spacing-horizontal);
     4283        max-width: calc(var(--responsive--aligndefault-width) - 90px);
    59724284}
    59734285
    59744286.author-bio .author-bio-content .author-title {
    5975         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    5976         font-size: 1.5rem;
     4287        font-family: var(--entry-author-bio--font-family);
     4288        font-size: var(--entry-author-bio--font-size);
    59774289        display: inline;
    59784290}
    59794291
    59804292.author-bio .author-bio-content .author-description {
    5981         font-size: 1rem;
    5982         margin-top: 15px;
    5983         margin-bottom: 15px;
     4293        font-size: var(--global--font-size-xs);
     4294        margin-top: calc(0.5 * var(--global--spacing-vertical));
     4295        margin-bottom: calc(0.5 * var(--global--spacing-vertical));
    59844296}
    59854297
    59864298.page-title {
    5987         font-size: 4rem;
    5988 }
    5989 
    5990 @media only screen and (min-width: 652px) {
    5991 
    5992         .page-title {
    5993                 font-size: 6rem;
    5994         }
     4299        font-size: var(--global--font-size-page-title);
     4300}
     4301
     4302h1.page-title,
     4303h2.page-title {
     4304        font-weight: var(--heading--font-weight-page-title);
    59954305}
    59964306
    59974307h1.page-title {
    5998         font-weight: 300;
    5999 }
    6000 
    6001 h2.page-title {
    6002         font-weight: 300;
    6003 }
    6004 
    6005 h1.page-title {
    6006         line-height: 1.1;
     4308        line-height: var(--heading--line-height-h1);
    60074309}
    60084310
    60094311.page-header {
    6010         border-bottom: 3px solid #28303d;
    6011         padding-bottom: 60px;
    6012 }
    6013 
    6014 .archive .content-area .format-aside .entry-content {
    6015         font-size: 1.5rem;
    6016 }
    6017 
    6018 .archive .content-area .format-status .entry-content {
    6019         font-size: 1.5rem;
    6020 }
    6021 
    6022 .archive .content-area .format-link .entry-content {
    6023         font-size: 1.5rem;
    6024 }
    6025 
    6026 .search .content-area .format-aside .entry-content {
    6027         font-size: 1.5rem;
    6028 }
    6029 
    6030 .search .content-area .format-status .entry-content {
    6031         font-size: 1.5rem;
    6032 }
    6033 
    6034 .search .content-area .format-link .entry-content {
    6035         font-size: 1.5rem;
    6036 }
    6037 
    6038 .blog .content-area .format-aside .entry-content {
    6039         font-size: 1.5rem;
    6040 }
    6041 
    6042 .blog .content-area .format-status .entry-content {
    6043         font-size: 1.5rem;
    6044 }
    6045 
     4312        border-bottom: 3px solid var(--global--color-border);
     4313        padding-bottom: calc(2 * var(--global--spacing-vertical));
     4314}
     4315
     4316.archive .content-area .format-aside .entry-content,
     4317.archive .content-area .format-status .entry-content,
     4318.archive .content-area .format-link .entry-content,
     4319.search .content-area .format-aside .entry-content,
     4320.search .content-area .format-status .entry-content,
     4321.search .content-area .format-link .entry-content,
     4322.blog .content-area .format-aside .entry-content,
     4323.blog .content-area .format-status .entry-content,
    60464324.blog .content-area .format-link .entry-content {
    6047         font-size: 1.5rem;
    6048 }
    6049 
    6050 .archive .format-image .entry-content {
    6051         margin-top: 60px;
    6052 }
    6053 
    6054 .archive .format-gallery .entry-content {
    6055         margin-top: 60px;
    6056 }
    6057 
    6058 .archive .format-video .entry-content {
    6059         margin-top: 60px;
    6060 }
    6061 
    6062 .search .format-image .entry-content {
    6063         margin-top: 60px;
    6064 }
    6065 
    6066 .search .format-gallery .entry-content {
    6067         margin-top: 60px;
    6068 }
    6069 
    6070 .search .format-video .entry-content {
    6071         margin-top: 60px;
    6072 }
    6073 
    6074 .blog .format-image .entry-content {
    6075         margin-top: 60px;
    6076 }
    6077 
    6078 .blog .format-gallery .entry-content {
    6079         margin-top: 60px;
    6080 }
    6081 
     4325        font-size: var(--global--font-size-lg);
     4326}
     4327
     4328.archive .format-image .entry-content,
     4329.archive .format-gallery .entry-content,
     4330.archive .format-video .entry-content,
     4331.search .format-image .entry-content,
     4332.search .format-gallery .entry-content,
     4333.search .format-video .entry-content,
     4334.blog .format-image .entry-content,
     4335.blog .format-gallery .entry-content,
    60824336.blog .format-video .entry-content {
    6083         margin-top: 60px;
     4337        margin-top: calc(2 * var(--global--spacing-vertical));
    60844338}
    60854339
    … …  
    60934347}
    60944348
    6095 .archive.logged-in .entry-footer .posted-on {
    6096         margin-right: 10px;
    6097 }
    6098 
    6099 .search.logged-in .entry-footer .posted-on {
    6100         margin-right: 10px;
    6101 }
    6102 
     4349.archive.logged-in .entry-footer .posted-on,
     4350.search.logged-in .entry-footer .posted-on,
    61034351.blog.logged-in .entry-footer .posted-on {
    6104         margin-right: 10px;
     4352        margin-right: calc(0.5 * var(--global--spacing-unit));
    61054353}
    61064354
    61074355.archive-description {
    6108         margin-top: 30px;
    6109         font-size: 2.25rem;
    6110         line-height: 1.3;
    6111 }
    6112 
    6113 @media only screen and (min-width: 652px) {
    6114 
    6115         .archive-description {
    6116                 font-size: 2.5rem;
    6117         }
     4356        margin-top: var(--global--spacing-vertical);
     4357        font-size: var(--global--font-size-xl);
     4358        line-height: var(--global--line-height-heading);
    61184359}
    61194360
    61204361.error404 main p {
    6121         font-size: 1.5rem;
    6122         margin-bottom: 50px;
     4362        font-size: var(--global--font-size-lg);
     4363        margin-bottom: calc(var(--global--spacing-vertical) * 1.6666666667);
    61234364}
    61244365
    61254366.search-no-results .page-content {
    6126         margin-top: 90px;
     4367        margin-top: calc(3 * var(--global--spacing-vertical));
    61274368}
    61284369
    … …  
    61314372 */
    61324373.comments-area > * {
    6133         margin-top: 30px;
    6134         margin-bottom: 30px;
     4374        margin-top: var(--global--spacing-vertical);
     4375        margin-bottom: var(--global--spacing-vertical);
    61354376}
    61364377
    … …  
    61614402 * Comment Title
    61624403 */
    6163 .comments-title {
    6164         font-size: 2.25rem;
    6165         letter-spacing: normal;
    6166 }
    6167 @media only screen and (min-width: 652px) {
    6168 
    6169         .comments-title {
    6170                 font-size: 3rem;
    6171         }
    6172 }
    6173 @media only screen and (min-width: 652px) {
    6174 
    6175         .comments-title {
    6176                 font-size: 3rem;
    6177         }
    6178 }
    6179 
     4404.comments-title,
    61804405.comment-reply-title {
    6181         font-size: 2.25rem;
    6182         letter-spacing: normal;
    6183 }
    6184 @media only screen and (min-width: 652px) {
    6185 
    6186         .comment-reply-title {
    6187                 font-size: 3rem;
    6188         }
    6189 }
    6190 @media only screen and (min-width: 652px) {
    6191 
    6192         .comment-reply-title {
    6193                 font-size: 3rem;
    6194         }
     4406        font-size: var(--heading--font-size-h2);
     4407        letter-spacing: var(--heading--letter-spacing-h2);
    61954408}
    61964409
    … …  
    62014414
    62024415.comment-reply-title small a {
    6203         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    6204         font-size: 1rem;
     4416        font-family: var(--global--font-secondary);
     4417        font-size: var(--global--font-size-xs);
    62054418        font-style: normal;
    62064419        font-weight: normal;
    … …  
    62104423/* Nested comment reply title*/
    62114424.comment .comment-respond .comment-reply-title {
    6212         font-size: 1.5rem;
     4425        font-size: var(--global--font-size-lg);
    62134426}
    62144427
    … …  
    62224435
    62234436.comment-list > li {
    6224         margin-top: 30px;
    6225         margin-bottom: 30px;
     4437        margin-top: var(--global--spacing-vertical);
     4438        margin-bottom: var(--global--spacing-vertical);
    62264439}
    62274440
    … …  
    62324445
    62334446.comment-list .children > li {
    6234         margin-top: 30px;
    6235         margin-bottom: 30px;
     4447        margin-top: var(--global--spacing-vertical);
     4448        margin-bottom: var(--global--spacing-vertical);
    62364449}
    62374450
    62384451@media only screen and (min-width: 482px) {
    62394452
    6240         .comment-list .depth-2 {
    6241                 padding-left: 100px;
    6242         }
    6243 
     4453        .comment-list .depth-2,
    62444454        .comment-list .depth-3 {
    6245                 padding-left: 100px;
     4455                padding-left: calc(4 * var(--global--spacing-horizontal));
    62464456        }
    62474457}
    … …  
    62514461 */
    62524462.comment-meta .comment-author {
    6253         line-height: 1.3;
    6254         margin-bottom: 5px;
     4463        line-height: var(--global--line-height-heading);
     4464        margin-bottom: calc(0.25 * var(--global--spacing-unit));
    62554465}
    62564466@media only screen and (min-width: 482px) {
    … …  
    62634473
    62644474.comment-meta .comment-author .fn {
    6265         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     4475        font-family: var(--global--font-secondary);
    62664476        font-weight: normal;
    6267         font-size: 1.5rem;
     4477        font-size: var(--global--font-size-lg);
    62684478        hyphens: auto;
    62694479        word-wrap: break-word;
    … …  
    62724482
    62734483.comment-meta .comment-metadata {
    6274         color: #28303d;
    6275         font-size: 1rem;
     4484        color: var(--global--color-primary);
     4485        font-size: var(--global--font-size-xs);
    62764486        padding: 8px 0 9px 0;
    62774487}
    62784488
    62794489.comment-meta .comment-metadata .edit-link {
    6280         margin-left: 25px;
     4490        margin-left: var(--global--spacing-horizontal);
    62814491}
    62824492@media only screen and (min-width: 482px) {
    … …  
    62924502
    62934503.reply {
    6294         font-size: 1.125rem;
    6295         line-height: 1.3;
     4504        font-size: var(--global--font-size-sm);
     4505        line-height: var(--global--line-height-heading);
    62964506}
    62974507
    … …  
    63044514}
    63054515
    6306 .pingback .url {
    6307         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    6308 }
    6309 
     4516.pingback .url,
    63104517.trackback .url {
    6311         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     4518        font-family: var(--global--font-primary);
    63124519}
    63134520
    63144521.comment-body {
    63154522        position: relative;
    6316         margin-bottom: 51px;
     4523        margin-bottom: calc(1.7 * var(--global--spacing-vertical));
    63174524}
    63184525
    63194526.comment-body > * {
    6320         margin-top: 30px;
    6321         margin-bottom: 30px;
     4527        margin-top: var(--global--spacing-vertical);
     4528        margin-bottom: var(--global--spacing-vertical);
    63224529}
    63234530
    … …  
    63304537}
    63314538
    6332 .pingback .comment-body {
    6333         margin-top: 30px;
    6334         margin-bottom: 30px;
    6335 }
    6336 
     4539.pingback .comment-body,
    63374540.trackback .comment-body {
    6338         margin-top: 30px;
    6339         margin-bottom: 30px;
     4541        margin-top: var(--global--spacing-vertical);
     4542        margin-bottom: var(--global--spacing-vertical);
    63404543}
    63414544
    63424545.comment-respond {
    6343         margin-top: 30px;
     4546        margin-top: var(--global--spacing-vertical);
    63444547}
    63454548
    63464549.comment-respond > * {
    6347         margin-top: 20px;
    6348         margin-bottom: 20px;
     4550        margin-top: var(--global--spacing-unit);
     4551        margin-bottom: var(--global--spacing-unit);
    63494552}
    63504553
    … …  
    63584561
    63594562.comment-respond > *:last-child.comment-form {
    6360         margin-bottom: 30px;
     4563        margin-bottom: var(--global--spacing-vertical);
    63614564}
    63624565
    … …  
    63794582
    63804583.comment-form .comment-notes {
    6381         font-size: 1.125rem;
     4584        font-size: var(--global--font-size-sm);
    63824585}
    63834586
    … …  
    64004603}
    64014604
    6402 .comment-form .comment-form-cookies-consent > label {
    6403         font-size: 1rem;
     4605.comment-form .comment-form-cookies-consent > label,
     4606.comment-form .comment-notes {
     4607        font-size: var(--global--font-size-xs);
    64044608        font-weight: normal;
    64054609}
    64064610
    6407 .comment-form .comment-notes {
    6408         font-size: 1rem;
    6409         font-weight: normal;
    6410 }
    6411 
    64124611.comment-form > p {
    6413         margin-bottom: 20px;
     4612        margin-bottom: var(--global--spacing-unit);
    64144613}
    64154614
    … …  
    64224621}
    64234622
    6424 .comment-form > p label {
    6425         display: block;
    6426         font-size: 1.125rem;
    6427         margin-bottom: 10px;
    6428         width: 100%;
    6429         font-weight: 500;
    6430 }
    6431 
    6432 .comment-form > p input[type=email] {
    6433         display: block;
    6434         font-size: 1.125rem;
    6435         margin-bottom: 10px;
    6436         width: 100%;
    6437         font-weight: 500;
    6438 }
    6439 
    6440 .comment-form > p input[type=text] {
    6441         display: block;
    6442         font-size: 1.125rem;
    6443         margin-bottom: 10px;
    6444         width: 100%;
    6445         font-weight: 500;
    6446 }
    6447 
    6448 .comment-form > p input[type=url] {
    6449         display: block;
    6450         font-size: 1.125rem;
    6451         margin-bottom: 10px;
    6452         width: 100%;
    6453         font-weight: 500;
    6454 }
    6455 
     4623.comment-form > p label,
     4624.comment-form > p input[type=email],
     4625.comment-form > p input[type=text],
     4626.comment-form > p input[type=url],
    64564627.comment-form > p textarea {
    64574628        display: block;
    6458         font-size: 1.125rem;
    6459         margin-bottom: 10px;
     4629        font-size: var(--global--font-size-sm);
     4630        margin-bottom: calc(.5 * var(--global--spacing-unit));
    64604631        width: 100%;
    6461         font-weight: 500;
     4632        font-weight: var(--form--label-weight);
    64624633}
    64634634
    … …  
    64684639
    64694640        .comment-form > p.comment-form-author {
    6470                 margin-right: 38px;
     4641                margin-right: calc(1.5 * var(--global--spacing-horizontal));
    64714642        }
    64724643
    … …  
    64824653        position: absolute;
    64834654        right: 0;
    6484         padding-top: 15px;
    6485         padding-bottom: 8px;
     4655        padding-top: calc(0.5 * var(--global--spacing-vertical));
     4656        padding-bottom: calc(0.25 * var(--global--spacing-vertical));
    64864657}
    64874658
    64884659.menu-button-container #primary-mobile-menu {
    64894660        margin-left: auto;
    6490         padding: 10px 15px;
     4661        padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(0.5 * var(--button--padding-horizontal));
    64914662}
    64924663@media only screen and (max-width: 481px) {
    … …  
    64994670.menu-button-container .button.button {
    65004671        display: flex;
    6501         font-size: 1rem;
    6502         font-weight: 500;
     4672        font-size: var(--primary-nav--font-size-button);
     4673        font-weight: var(--primary-nav--font-weight-button);
    65034674        background-color: transparent;
    65044675        border: none;
    6505         color: #28303d;
     4676        color: var(--primary-nav--color-link);
    65064677}
    65074678
    … …  
    65124683
    65134684.menu-button-container .button.button .dropdown-icon .svg-icon {
    6514         margin-left: 5px;
     4685        margin-left: calc(0.25 * var(--global--spacing-unit));
    65154686}
    65164687
    … …  
    65404711        width: 100%;
    65414712        z-index: 500;
    6542         background-color: #d1e4dd;
     4713        background-color: var(--global--color-background);
    65434714}
    65444715
    … …  
    65494720.primary-navigation {
    65504721        position: absolute;
    6551         top: 0;
     4722        top: var(--global--admin-bar--height);
    65524723        right: 0;
    6553         color: #28303d;
    6554         font-size: 1.25rem;
     4724        color: var(--primary-nav--color-text);
     4725        font-size: var(--primary-nav--font-size);
    65554726        line-height: 1.15;
    65564727        margin-top: 0;
    … …  
    65664737        bottom: 0;
    65674738        left: 0;
    6568         padding-top: calc(2rem + 47px);
    6569         padding-left: 20px;
    6570         padding-right: 20px;
    6571         padding-bottom: 25px;
    6572         background-color: #d1e4dd;
     4739        padding-top: calc(var(--button--line-height) * var(--primary-nav--font-size-button) + 42px + 5px);
     4740        padding-left: var(--global--spacing-unit);
     4741        padding-right: var(--global--spacing-unit);
     4742        padding-bottom: var(--global--spacing-horizontal);
     4743        background-color: var(--global--color-background);
    65734744        transition: all 0.15s ease-in-out;
    6574         transform: translateY(30px);
     4745        transform: translateY(var(--global--spacing-vertical));
    65754746}
    65764747@media only screen and (max-width: 481px) {
    … …  
    65904761
    65914762        .admin-bar .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container {
    6592                 top: 32px;
    6593         }
    6594         @media only screen and (max-width: 782px) {
    6595 
    6596                 .admin-bar .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container {
    6597                         top: 46px;
    6598                 }
     4763                top: var(--global--admin-bar--height);
    65994764        }
    66004765
    66014766        .admin-bar .primary-navigation > .primary-menu-container {
    6602                 height: calc(100vh - 32px);
    6603         }
    6604         @media only screen and (max-width: 782px) {
    6605 
    6606                 .admin-bar .primary-navigation > .primary-menu-container {
    6607                         height: calc(100vh - 46px);
    6608                 }
     4767                height: calc(100vh - var(--global--admin-bar--height));
    66094768        }
    66104769
    66114770        .primary-navigation > .primary-menu-container:focus {
    6612                 border: 2px solid #28303d;
     4771                border: 2px solid var(--global--color-primary);
    66134772        }
    66144773}
    … …  
    67084867.primary-navigation > div > .menu-wrapper .sub-menu-toggle {
    67094868        display: flex;
    6710         height: calc(27px + 1em);
     4869        height: calc(2 * var(--primary-nav--padding) + 1.15em + 1px);
    67114870        width: 44px;
    67124871        padding: 0;
    … …  
    67194878
    67204879.primary-navigation > div > .menu-wrapper .sub-menu-toggle:focus {
    6721         outline: 2px solid #28303d;
     4880        outline: 2px solid var(--wp--style--color--link, var(--global--color-primary));
    67224881}
    67234882@media only screen and (max-width: 481px) {
    … …  
    67684927        }
    67694928
    6770         .primary-navigation > div > .menu-wrapper > li > .sub-menu:before {
    6771                 content: "";
    6772                 display: block;
    6773                 position: absolute;
    6774                 width: 0;
    6775                 top: -10px;
    6776                 left: 25px;
    6777                 border-style: solid;
    6778                 border-color: #28303d transparent;
    6779                 border-width: 0 7px 10px 7px;
    6780         }
    6781 
     4929        .primary-navigation > div > .menu-wrapper > li > .sub-menu:before,
    67824930        .primary-navigation > div > .menu-wrapper > li > .sub-menu:after {
    67834931                content: "";
    … …  
    67864934                width: 0;
    67874935                top: -10px;
    6788                 left: 25px;
     4936                left: var(--global--spacing-horizontal);
    67894937                border-style: solid;
    6790                 border-color: #28303d transparent;
     4938                border-color: var(--primary-nav--border-color) transparent;
    67914939                border-width: 0 7px 10px 7px;
    67924940        }
    … …  
    67944942        .primary-navigation > div > .menu-wrapper > li > .sub-menu:after {
    67954943                top: -9px;
    6796                 border-color: #d1e4dd transparent;
     4944                border-color: var(--global--color-background) transparent;
    67974945        }
    67984946
    67994947        .primary-navigation > div > .menu-wrapper > li > .sub-menu li {
    6800                 background: #d1e4dd;
     4948                background: var(--global--color-background);
    68014949        }
    68024950
    … …  
    68104958        }
    68114959
    6812         .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left:before {
     4960        .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left:before,
     4961        .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left:after {
    68134962
    68144963                /* rtl:ignore */
    6815                 left: 25px;
     4964                left: var(--global--spacing-horizontal);
    68164965
    68174966                /* rtl:ignore */
    … …  
    68194968        }
    68204969
    6821         .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left:after {
    6822 
    6823                 /* rtl:ignore */
    6824                 left: 25px;
    6825 
    6826                 /* rtl:ignore */
    6827                 right: auto;
    6828         }
    6829 
    68304970        .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right {
    68314971
    … …  
    68374977        }
    68384978
    6839         .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right:before {
     4979        .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right:before,
     4980        .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right:after {
    68404981
    68414982                /* rtl:ignore */
    … …  
    68434984
    68444985                /* rtl:ignore */
    6845                 right: 25px;
    6846         }
    6847 
    6848         .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right:after {
    6849 
    6850                 /* rtl:ignore */
    6851                 left: auto;
    6852 
    6853                 /* rtl:ignore */
    6854                 right: 25px;
     4986                right: var(--global--spacing-horizontal);
    68554987        }
    68564988}
    68574989
    68584990.primary-navigation .primary-menu > .menu-item:hover > a {
    6859         color: #28303d;
     4991        color: var(--primary-nav--color-link-hover);
    68604992}
    68614993@media only screen and (min-width: 482px) {
    68624994
    68634995        .primary-navigation .primary-menu-container {
    6864                 margin-right: -13px;
    6865                 margin-left: -13px;
     4996                margin-right: calc(0px - var(--primary-nav--padding));
     4997                margin-left: calc(0px - var(--primary-nav--padding));
    68664998        }
    68674999
    … …  
    68715003
    68725004        .primary-navigation .primary-menu-container > ul > .menu-item > a {
    6873                 padding-left: 13px;
    6874                 padding-right: 13px;
     5005                padding-left: var(--primary-nav--padding);
     5006                padding-right: var(--primary-nav--padding);
    68755007        }
    68765008
    68775009        .primary-navigation .primary-menu-container > ul > .menu-item > a + .sub-menu-toggle {
    6878                 margin-left: -13px;
     5010                margin-left: calc(5px - var(--primary-nav--padding));
    68795011        }
    68805012}
    … …  
    68825014.primary-navigation a {
    68835015        display: block;
    6884         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    6885         font-size: 1.125rem;
    6886         font-weight: normal;
    6887         padding: 13px 0;
     5016        font-family: var(--primary-nav--font-family-mobile);
     5017        font-size: var(--primary-nav--font-size-mobile);
     5018        font-weight: var(--primary-nav--font-weight);
     5019        padding: var(--primary-nav--padding) 0;
    68885020        text-decoration: none;
    68895021}
    … …  
    68925024        .primary-navigation a {
    68935025                display: block;
    6894                 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    6895                 font-size: 1.25rem;
    6896                 font-weight: normal;
     5026                font-family: var(--primary-nav--font-family);
     5027                font-size: var(--primary-nav--font-size);
     5028                font-weight: var(--primary-nav--font-weight);
    68975029        }
    68985030}
    68995031
    69005032.primary-navigation a + svg {
    6901         fill: #28303d;
    6902 }
    6903 
    6904 .primary-navigation a:hover {
    6905         color: #28303d;
    6906 }
    6907 
    6908 .primary-navigation a:link {
    6909         color: #28303d;
    6910 }
    6911 
     5033        fill: var(--primary-nav--color-text);
     5034}
     5035
     5036.primary-navigation a:hover,
     5037.primary-navigation a:link,
    69125038.primary-navigation a:visited {
    6913         color: #28303d;
     5039        color: var(--primary-nav--color-link-hover);
    69145040}
    69155041
    … …  
    69235049        z-index: 99999;
    69245050        outline-offset: 0;
     5051        text-decoration-thickness: 2px;
    69255052}
    69265053
    … …  
    69415068        padding: 0;
    69425069        list-style: none;
    6943         margin-left: 13px;
    6944         border: 1px solid #28303d;
     5070        margin-left: var(--primary-nav--padding);
     5071        border: 1px solid var(--primary-nav--border-color);
    69455072}
    69465073
    … …  
    69625089
    69635090.primary-navigation .sub-menu .menu-item > a {
    6964         padding: 17px 13px;
     5091        padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding);
    69655092        display: block;
    6966         font-size: 1.125rem;
    6967         font-style: normal;
     5093        font-size: var(--primary-nav--font-size-sub-menu-mobile);
     5094        font-style: var(--primary-nav--font-style-sub-menu-mobile);
    69685095}
    69695096@media only screen and (min-width: 482px) {
    69705097
    69715098        .primary-navigation .sub-menu .menu-item > a {
    6972                 font-size: 1rem;
    6973                 font-style: normal;
     5099                font-size: var(--primary-nav--font-size-sub-menu);
     5100                font-style: var(--primary-nav--font-style);
    69745101        }
    69755102}
    … …  
    69935120        display: block;
    69945121        clear: both;
    6995         font-size: 1rem;
     5122        font-size: var(--global--font-size-xs);
    69965123        text-transform: none;
    69975124        line-height: 1.7;
    … …  
    70225149
    70235150.footer-navigation {
    7024         margin-top: 60px;
    7025         margin-bottom: 30px;
    7026         color: #28303d;
    7027         font-size: 1rem;
    7028         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     5151        margin-top: calc(2 * var(--global--spacing-vertical));
     5152        margin-bottom: var(--global--spacing-vertical);
     5153        color: var(--footer--color-text);
     5154        font-size: var(--global--font-size-xs);
     5155        font-family: var(--footer--font-family);
    70295156}
    70305157
    … …  
    70435170
    70445171.footer-navigation-wrapper li a {
    7045         padding: 17px 13px;
     5172        padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding);
    70465173        transition: transform 0.1s ease;
    7047         color: #28303d;
    7048 }
    7049 
    7050 .footer-navigation-wrapper li a:link {
    7051         color: #28303d;
    7052 }
    7053 
    7054 .footer-navigation-wrapper li a:visited {
    7055         color: #28303d;
    7056 }
    7057 
     5174        color: var(--footer--color-link);
     5175}
     5176
     5177.footer-navigation-wrapper li a:link,
     5178.footer-navigation-wrapper li a:visited,
    70585179.footer-navigation-wrapper li a:active {
    7059         color: #28303d;
     5180        color: var(--footer--color-link);
    70605181}
    70615182
    … …  
    70645185        text-decoration-style: dotted;
    70655186        text-decoration-skip-ink: none;
    7066         color: #28303d;
     5187        color: var(--footer--color-link-hover);
    70675188}
    70685189
    70695190.is-dark-theme .footer-navigation-wrapper li a:focus .svg-icon {
    7070         fill: #d1e4dd;
     5191        fill: var(--wp--style--color--link, var(--global--color-background));
     5192}
     5193
     5194.has-background-white .footer-navigation-wrapper li a:focus .svg-icon {
     5195        fill: var(--wp--style--color--link, var(--global--color-white));
    70715196}
    70725197
    70735198.footer-navigation-wrapper li .svg-icon {
    70745199        vertical-align: middle;
    7075         fill: #28303d;
     5200        fill: var(--footer--color-link);
    70765201}
    70775202
    … …  
    70875212/* Next/Previous navigation */
    70885213.navigation {
    7089         color: #28303d;
     5214        color: var(--global--color-primary);
    70905215}
    70915216
    70925217.navigation a {
    7093         color: #28303d;
     5218        color: var(--global--color-primary);
    70945219        text-decoration: none;
    70955220}
    70965221
    70975222.navigation a:hover {
    7098         color: #28303d;
     5223        color: var(--global--color-primary-hover);
    70995224        text-decoration: underline;
     5225        text-decoration-style: dotted;
    71005226}
    71015227
    71025228.navigation a:focus {
    7103         color: #39414d;
     5229        color: var(--global--color-secondary);
    71045230}
    71055231
    71065232.navigation a:active {
    7107         color: #28303d;
     5233        color: var(--global--color-primary);
    71085234}
    71095235
    … …  
    71305256        }
    71315257
    7132         .navigation .nav-links .nav-next {
    7133                 flex: 0 1 auto;
    7134                 margin-bottom: inherit;
    7135                 margin-top: inherit;
    7136                 max-width: calc(50% - 10px);
    7137         }
    7138 
     5258        .navigation .nav-links .nav-next,
    71395259        .navigation .nav-links .nav-previous {
    71405260                flex: 0 1 auto;
    71415261                margin-bottom: inherit;
    71425262                margin-top: inherit;
    7143                 max-width: calc(50% - 10px);
     5263                max-width: calc(50% - (0.5 * var(--global--spacing-unit)));
    71445264        }
    71455265
    … …  
    71565276}
    71575277
    7158 .navigation .nav-previous .svg-icon {
    7159         top: -2px;
    7160         margin-right: 5px;
    7161 }
    7162 
     5278.navigation .nav-previous .svg-icon,
    71635279.navigation .prev .svg-icon {
    71645280        top: -2px;
    7165         margin-right: 5px;
    7166 }
    7167 
    7168 .navigation .nav-next .svg-icon {
    7169         top: -1px;
    7170         margin-left: 5px;
    7171 }
    7172 
     5281        margin-right: calc(0.25 * var(--global--spacing-unit));
     5282}
     5283
     5284.navigation .nav-next .svg-icon,
    71735285.navigation .next .svg-icon {
    71745286        top: -1px;
    7175         margin-left: 5px;
     5287        margin-left: calc(0.25 * var(--global--spacing-unit));
    71765288}
    71775289
    71785290.post-navigation {
    7179         margin: 30px auto;
     5291        margin: var(--global--spacing-vertical) auto;
    71805292}
    71815293@media only screen and (min-width: 822px) {
    71825294
    71835295        .post-navigation {
    7184                 margin: 30px auto;
     5296                margin: var(--global--spacing-vertical) auto;
    71855297        }
    71865298}
    71875299
    71885300.post-navigation .meta-nav {
    7189         line-height: 1.7;
    7190         color: #28303d;
     5301        line-height: var(--global--line-height-body);
     5302        color: var(--global--color-primary);
    71915303}
    71925304
    71935305.post-navigation .post-title {
    71945306        display: inline-block;
    7195         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    7196         font-size: 1.5rem;
    7197         font-weight: 600;
    7198         line-height: 1.3;
     5307        font-family: var(--global--font-primary);
     5308        font-size: var(--global--font-size-lg);
     5309        font-weight: var(--pagination--font-weight-strong);
     5310        line-height: var(--global--line-height-heading);
    71995311}
    72005312@media only screen and (min-width: 822px) {
    72015313
    72025314        .post-navigation .post-title {
    7203                 margin: 5px 29px 0;
     5315                margin: 5px calc(24px + (0.25 * var(--global--spacing-unit))) 0;
    72045316        }
    72055317}
    … …  
    72115323}
    72125324
    7213 .post-navigation .nav-next {
    7214         margin-top: 30px;
    7215         margin-bottom: 30px;
    7216 }
    7217 
     5325.post-navigation .nav-next,
    72185326.post-navigation .nav-previous {
    7219         margin-top: 30px;
    7220         margin-bottom: 30px;
     5327        margin-top: var(--global--spacing-vertical);
     5328        margin-bottom: var(--global--spacing-vertical);
    72215329}
    72225330
    … …  
    72315339}
    72325340
    7233 .post-navigation .nav-next:hover .post-title,
    7234 .post-navigation .nav-previous:hover .post-title {
     5341.pagination,
     5342.comments-pagination {
     5343        border-top: 3px solid var(--global--color-border);
     5344        padding-top: var(--global--spacing-vertical);
     5345        margin: var(--global--spacing-vertical) auto;
     5346}
     5347@media only screen and (min-width: 822px) {
     5348
     5349        .pagination,
     5350        .comments-pagination {
     5351                margin: var(--global--spacing-vertical) auto;
     5352        }
     5353}
     5354
     5355.pagination .nav-links,
     5356.comments-pagination .nav-links {
     5357        margin-top: calc(-1 * var(--global--spacing-vertical));
     5358}
     5359
     5360.pagination .nav-links a:hover,
     5361.comments-pagination .nav-links a:hover {
     5362        color: var(--pagination--color-link-hover);
     5363}
     5364
     5365.is-dark-theme .pagination .nav-links a:active,
     5366.is-dark-theme .pagination .nav-links a:hover:active,
     5367.is-dark-theme .pagination .nav-links a:hover:focus,
     5368.is-dark-theme .comments-pagination .nav-links a:active,
     5369.is-dark-theme .comments-pagination .nav-links a:hover:active,
     5370.is-dark-theme .comments-pagination .nav-links a:hover:focus {
     5371        color: var(--global--color-background);
     5372}
     5373
     5374.has-background-white .pagination .nav-links a:active,
     5375.has-background-white .pagination .nav-links a:hover:active,
     5376.has-background-white .pagination .nav-links a:hover:focus,
     5377.has-background-white .comments-pagination .nav-links a:active,
     5378.has-background-white .comments-pagination .nav-links a:hover:active,
     5379.has-background-white .comments-pagination .nav-links a:hover:focus {
     5380        color: var(--global--color-white);
     5381}
     5382
     5383.pagination .nav-links > *,
     5384.comments-pagination .nav-links > * {
     5385        color: var(--pagination--color-text);
     5386        font-family: var(--pagination--font-family);
     5387        font-size: var(--pagination--font-size);
     5388        font-weight: var(--pagination--font-weight);
     5389        margin-top: var(--global--spacing-vertical);
     5390        margin-left: calc(0.66 * var(--global--spacing-unit));
     5391        margin-right: calc(0.66 * var(--global--spacing-unit));
     5392}
     5393
     5394.pagination .nav-links > *.current,
     5395.comments-pagination .nav-links > *.current {
    72355396        text-decoration: underline;
    7236         text-decoration-thickness: 1px;
    7237 }
    7238 
    7239 .pagination {
    7240         border-top: 3px solid #28303d;
    7241         padding-top: 30px;
    7242         margin: 30px auto;
    7243 }
    7244 
    7245 .comments-pagination {
    7246         border-top: 3px solid #28303d;
    7247         padding-top: 30px;
    7248         margin: 30px auto;
    7249 }
    7250 @media only screen and (min-width: 822px) {
    7251 
    7252         .pagination {
    7253                 margin: 30px auto;
    7254         }
    7255 
    7256         .comments-pagination {
    7257                 margin: 30px auto;
    7258         }
    7259 }
    7260 
    7261 .pagination .nav-links {
    7262         margin-top: -30px;
    7263 }
    7264 
    7265 .comments-pagination .nav-links {
    7266         margin-top: -30px;
    7267 }
    7268 
    7269 .pagination .nav-links a:hover {
    7270         color: #28303d;
    7271 }
    7272 
    7273 .comments-pagination .nav-links a:hover {
    7274         color: #28303d;
    7275 }
    7276 
    7277 .pagination .nav-links > * {
    7278         color: #28303d;
    7279         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    7280         font-size: 1.5rem;
    7281         font-weight: normal;
    7282         margin-top: 30px;
    7283         margin-left: 13px;
    7284         margin-right: 13px;
    7285 }
    7286 
    7287 .comments-pagination .nav-links > * {
    7288         color: #28303d;
    7289         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    7290         font-size: 1.5rem;
    7291         font-weight: normal;
    7292         margin-top: 30px;
    7293         margin-left: 13px;
    7294         margin-right: 13px;
    7295 }
    7296 
    7297 .pagination .nav-links > *.current {
    7298         border-bottom: 1px solid #28303d;
    7299 }
    7300 
    7301 .comments-pagination .nav-links > *.current {
    7302         border-bottom: 1px solid #28303d;
     5397}
     5398
     5399.pagination .nav-links > *:not(.dots):not(.current):hover,
     5400.comments-pagination .nav-links > *:not(.dots):not(.current):hover {
     5401        text-decoration-style: dotted;
    73035402}
    73045403
    … …  
    73525451
    73535452.comments-pagination {
    7354         padding-top: 20px;
    7355         margin: 90px auto;
     5453        padding-top: calc(0.66 * var(--global--spacing-vertical));
     5454        margin: calc(3 * var(--global--spacing-vertical)) auto;
    73565455}
    73575456@media only screen and (min-width: 822px) {
    73585457
    73595458        .comments-pagination {
    7360                 margin: 90px auto 120px auto;
     5459                margin: calc(3 * var(--global--spacing-vertical)) auto calc(4 * var(--global--spacing-vertical)) auto;
    73615460        }
    73625461}
    73635462
    73645463.comments-pagination .nav-links > * {
    7365         font-size: 1.25rem;
     5464        font-size: var(--global--font-size-md);
    73665465}
    73675466
    73685467.widget-area {
    7369         margin-top: 180px;
    7370         padding-bottom: 10px;
    7371         color: #28303d;
    7372         font-size: 1.125rem;
    7373         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     5468        margin-top: calc(6 * var(--global--spacing-vertical));
     5469        padding-bottom: calc(var(--global--spacing-vertical) / 3);
     5470        color: var(--footer--color-text);
     5471        font-size: var(--footer--font-size);
     5472        font-family: var(--footer--font-family);
    73745473}
    73755474@media only screen and (min-width: 652px) {
    … …  
    73785477                display: grid;
    73795478                grid-template-columns: repeat(2, 1fr);
    7380                 column-gap: 50px;
     5479                column-gap: calc(2 * var(--global--spacing-horizontal));
    73815480        }
    73825481}
    … …  
    73855484        .widget-area {
    73865485                grid-template-columns: repeat(3, 1fr);
     5486        }
     5487}
     5488@media only screen and (max-width: 481px) {
     5489
     5490        .widget-area {
     5491                margin-top: calc(3 * var(--global--spacing-vertical));
    73875492        }
    73885493}
    … …  
    73945499
    73955500.widget-area ul li {
    7396         line-height: 1.9;
    7397 }
    7398 
    7399 .widget-area ul.sub-menu {
    7400         margin-left: 13px;
    7401 }
    7402 
     5501        line-height: var(--widget--line-height-list);
     5502}
     5503
     5504.widget-area ul.sub-menu,
    74035505.widget-area ul.children {
    7404         margin-left: 13px;
     5506        margin-left: var(--widget--spacing-menu);
    74055507}
    74065508
    … …  
    74105512
    74115513.widget-area a {
    7412         color: #28303d;
     5514        color: var(--footer--color-link);
    74135515        text-decoration: underline;
    74145516        text-decoration-style: solid;
    … …  
    74165518}
    74175519
    7418 .widget-area a:link {
    7419         color: #28303d;
    7420 }
    7421 
    7422 .widget-area a:visited {
    7423         color: #28303d;
    7424 }
    7425 
     5520.widget-area a:link,
     5521.widget-area a:visited,
    74265522.widget-area a:active {
    7427         color: #28303d;
     5523        color: var(--footer--color-link);
    74285524}
    74295525
    74305526.widget-area a:hover {
    7431         color: #28303d;
     5527        color: var(--footer--color-link-hover);
    74325528        text-decoration-style: dotted;
    74335529}
    74345530
    74355531.widget-area .wp-block-social-links.alignright {
    7436         margin-top: 30px;
     5532        margin-top: var(--global--spacing-vertical);
    74375533        justify-content: flex-end;
    74385534}
    74395535
    74405536.widget-area .wp-block-social-links.alignleft {
    7441         margin-top: 30px;
     5537        margin-top: var(--global--spacing-vertical);
    74425538}
    74435539
    … …  
    74495545
    74505546.widget-title {
    7451         font-size: 1.125rem;
    7452         font-weight: 700;
    7453         line-height: 1.4;
     5547        font-size: var(--global--font-size-sm);
     5548        font-weight: var(--widget--font-weight-title);
     5549        line-height: var(--widget--line-height-title);
    74545550}
    74555551
    … …  
    74585554        flex-wrap: wrap;
    74595555        margin: auto;
    7460         max-width: calc(100vw - 30px);
    7461 }
    7462 
    7463 @media only screen and (min-width: 482px) {
    7464 
    7465         .search-form {
    7466                 max-width: min(calc(100vw - 100px), 610px);
    7467         }
    7468 }
    7469 
    7470 @media only screen and (min-width: 822px) {
    7471 
    7472         .search-form {
    7473                 max-width: min(calc(100vw - 200px), 610px);
    7474         }
     5556        max-width: var(--responsive--aligndefault-width);
    74755557}
    74765558
    … …  
    74785560        width: 100%;
    74795561        margin-bottom: 0;
    7480         font-weight: 500;
     5562        font-weight: var(--form--label-weight);
    74815563}
    74825564
    … …  
    74845566        flex-grow: 1;
    74855567        max-width: inherit;
    7486         margin-top: 10px;
    7487         margin-right: 17px;
     5568        margin-top: calc(var(--global--spacing-vertical) / 3);
     5569        margin-right: calc(0.66 * var(--global--spacing-horizontal));
    74885570}
    74895571
    74905572.search-form .search-submit {
    7491         margin-top: 10px;
     5573        margin-top: calc(var(--global--spacing-vertical) / 3);
    74925574        margin-left: 10px;
    74935575}
    74945576
    74955577.widget_search > .search-form .search-field {
    7496         margin-right: -3px;
     5578        margin-right: calc(-1 * var(--button--border-width));
    74975579        -webkit-appearance: none;
    7498         margin-bottom: 15px;
     5580        margin-bottom: calc(0.5 * var(--global--spacing-vertical));
    74995581}
    75005582
    … …  
    75025584        margin-left: 0;
    75035585        background-color: transparent;
    7504         color: #39414d;
    7505         margin-bottom: 15px;
     5586        color: var(--button--color-text-hover);
     5587        margin-bottom: calc(0.5 * var(--global--spacing-vertical));
    75065588}
    75075589
    75085590.widget_search > .search-form .search-submit:hover {
    7509         background-color: #39414d;
    7510         color: #d1e4dd;
     5591        background-color: var(--button--color-background);
     5592        color: var(--button--color-text);
    75115593}
    75125594
    … …  
    75665648
    75675649.has-black-color[class] {
    7568         color: #000;
     5650        color: var(--global--color-black);
    75695651}
    75705652
    75715653.has-gray-color[class] {
    7572         color: #39414d;
     5654        color: var(--global--color-gray);
    75735655}
    75745656
    75755657.has-dark-gray-color[class] {
    7576         color: #28303d;
     5658        color: var(--global--color-dark-gray);
    75775659}
    75785660
    75795661.has-green-color[class] {
    7580         color: #d1e4dd;
     5662        color: var(--global--color-green);
    75815663}
    75825664
    75835665.has-blue-color[class] {
    7584         color: #d1dfe4;
     5666        color: var(--global--color-blue);
    75855667}
    75865668
    75875669.has-purple-color[class] {
    7588         color: #d1d1e4;
     5670        color: var(--global--color-purple);
    75895671}
    75905672
    75915673.has-red-color[class] {
    7592         color: #e4d1d1;
     5674        color: var(--global--color-red);
    75935675}
    75945676
    75955677.has-orange-color[class] {
    7596         color: #e4dad1;
     5678        color: var(--global--color-orange);
    75975679}
    75985680
    75995681.has-yellow-color[class] {
    7600         color: #eeeadd;
     5682        color: var(--global--color-yellow);
    76015683}
    76025684
    76035685.has-white-color[class] {
    7604         color: #fff;
    7605 }
    7606 
    7607 .has-background:not(.has-background-background-color) a:not(.wp-block-button__link),
     5686        color: var(--global--color-white);
     5687}
     5688
     5689.has-background a,
    76085690.has-background p,
    76095691.has-background h1,
    … …  
    76175699
    76185700.has-black-background-color[class] {
    7619         background-color: #000;
     5701        background-color: var(--global--color-black);
    76205702}
    76215703
    76225704.has-gray-background-color[class] {
    7623         background-color: #39414d;
     5705        background-color: var(--global--color-gray);
    76245706}
    76255707
    76265708.has-dark-gray-background-color[class] {
    7627         background-color: #28303d;
     5709        background-color: var(--global--color-dark-gray);
    76285710}
    76295711
    76305712.has-green-background-color[class] {
    7631         background-color: #d1e4dd;
     5713        background-color: var(--global--color-green);
    76325714}
    76335715
    76345716.has-blue-background-color[class] {
    7635         background-color: #d1dfe4;
     5717        background-color: var(--global--color-blue);
    76365718}
    76375719
    76385720.has-purple-background-color[class] {
    7639         background-color: #d1d1e4;
     5721        background-color: var(--global--color-purple);
    76405722}
    76415723
    76425724.has-red-background-color[class] {
    7643         background-color: #e4d1d1;
     5725        background-color: var(--global--color-red);
    76445726}
    76455727
    76465728.has-orange-background-color[class] {
    7647         background-color: #e4dad1;
     5729        background-color: var(--global--color-orange);
    76485730}
    76495731
    76505732.has-yellow-background-color[class] {
    7651         background-color: #eeeadd;
     5733        background-color: var(--global--color-yellow);
    76525734}
    76535735
    76545736.has-white-background-color[class] {
    7655         background-color: #fff;
    7656 }
    7657 
    7658 :not(.has-text-color).has-black-background-color[class] {
    7659         color: #fff;
    7660 }
    7661 
    7662 :not(.has-text-color).has-gray-background-color[class] {
    7663         color: #fff;
    7664 }
    7665 
     5737        background-color: var(--global--color-white);
     5738}
     5739
     5740:not(.has-text-color).has-black-background-color[class],
     5741:not(.has-text-color).has-gray-background-color[class],
    76665742:not(.has-text-color).has-dark-gray-background-color[class] {
    7667         color: #fff;
    7668 }
    7669 
    7670 :not(.has-text-color).has-green-background-color[class] {
    7671         color: #28303d;
    7672 }
    7673 
    7674 :not(.has-text-color).has-blue-background-color[class] {
    7675         color: #28303d;
    7676 }
    7677 
    7678 :not(.has-text-color).has-purple-background-color[class] {
    7679         color: #28303d;
    7680 }
    7681 
    7682 :not(.has-text-color).has-red-background-color[class] {
    7683         color: #28303d;
    7684 }
    7685 
    7686 :not(.has-text-color).has-orange-background-color[class] {
    7687         color: #28303d;
    7688 }
    7689 
    7690 :not(.has-text-color).has-yellow-background-color[class] {
    7691         color: #28303d;
    7692 }
    7693 
     5743        color: var(--global--color-white);
     5744}
     5745
     5746:not(.has-text-color).has-green-background-color[class],
     5747:not(.has-text-color).has-blue-background-color[class],
     5748:not(.has-text-color).has-purple-background-color[class],
     5749:not(.has-text-color).has-red-background-color[class],
     5750:not(.has-text-color).has-orange-background-color[class],
     5751:not(.has-text-color).has-yellow-background-color[class],
    76945752:not(.has-text-color).has-white-background-color[class] {
    7695         color: #28303d;
     5753        color: var(--global--color-dark-gray);
    76965754}
    76975755
    76985756.has-purple-to-yellow-gradient-background {
    7699         background: linear-gradient(160deg, #d1d1e4, #eeeadd);
     5757        background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-yellow));
    77005758}
    77015759
    77025760.has-yellow-to-purple-gradient-background {
    7703         background: linear-gradient(160deg, #eeeadd, #d1d1e4);
     5761        background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-purple));
    77045762}
    77055763
    77065764.has-green-to-yellow-gradient-background {
    7707         background: linear-gradient(160deg, #d1e4dd, #eeeadd);
     5765        background: linear-gradient(160deg, var(--global--color-green), var(--global--color-yellow));
    77085766}
    77095767
    77105768.has-yellow-to-green-gradient-background {
    7711         background: linear-gradient(160deg, #eeeadd, #d1e4dd);
     5769        background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-green));
    77125770}
    77135771
    77145772.has-red-to-yellow-gradient-background {
    7715         background: linear-gradient(160deg, #e4d1d1, #eeeadd);
     5773        background: linear-gradient(160deg, var(--global--color-red), var(--global--color-yellow));
    77165774}
    77175775
    77185776.has-yellow-to-red-gradient-background {
    7719         background: linear-gradient(160deg, #eeeadd, #e4d1d1);
     5777        background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-red));
    77205778}
    77215779
    77225780.has-purple-to-red-gradient-background {
    7723         background: linear-gradient(160deg, #d1d1e4, #e4d1d1);
     5781        background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-red));
    77245782}
    77255783
    77265784.has-red-to-purple-gradient-background {
    7727         background: linear-gradient(160deg, #e4d1d1, #d1d1e4);
    7728 }
    7729 
    7730 header * {
    7731         max-width: unset;
    7732 }
    7733 
    7734 main * {
    7735         max-width: unset;
    7736 }
    7737 
     5785        background: linear-gradient(160deg, var(--global--color-red), var(--global--color-purple));
     5786}
     5787
     5788header *,
     5789main *,
    77385790footer * {
    7739         max-width: unset;
     5791        max-width: var(--global--spacing-measure);
    77405792}
    77415793

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css

    r49633 r49728  
    1414        }
    1515
    16         .is-dark-theme.is-dark-theme .site a:focus,
    17         .is-dark-theme.is-dark-theme .site a:focus .meta-nav {
     16        .is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),
     17        .is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
    1818                background: #000;
    1919                color: #fff;

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css

    r49633 r49728  
    1414        }
    1515
    16         .is-dark-theme.is-dark-theme .site a:focus,
    17         .is-dark-theme.is-dark-theme .site a:focus .meta-nav {
     16        .is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),
     17        .is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
    1818                background: #000;
    1919                color: #fff;

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css

    r49574 r49728  
    375375        font-size: var(--quote--font-size);
    376376        line-height: var(--quote--line-height);
     377        position: absolute;
     378        left: calc(-0.5 * var(--global--spacing-horizontal));
    377379}
    378380
    … …  
    417419figcaption,
    418420.wp-caption,
    419 .wp-caption-text {
     421.wp-caption-text,
     422.wp-block-embed figcaption {
    420423        color: currentColor;
    421424        font-size: var(--global--font-size-xs);
    … …  
    431434.alignright .wp-caption,
    432435.alignleft .wp-caption-text,
    433 .alignright .wp-caption-text {
     436.alignright .wp-caption-text,
     437.alignleft .wp-block-embed figcaption,
     438.alignright .wp-block-embed figcaption {
    434439        margin-bottom: 0;
    435440}
    … …  
    475480}
    476481
    477 .site a:focus {
     482.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
    478483
    479484        /* Only visible in Windows High Contrast mode */
    480485        outline: 2px solid transparent;
     486        text-decoration: underline 1px dotted currentColor;
     487        text-decoration-skip-ink: none;
    481488        background: rgba(255, 255, 255, 0.9);
    482489}
    483490
    484 .is-dark-theme .site a:focus,
    485 .is-dark-theme .site a:focus .meta-nav {
     491.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),
     492.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
    486493        color: var(--wp--style--color--link, var(--global--color-background));
    487494}
    488495
    489 .has-background-white .site a:focus {
     496.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
    490497        background: rgba(0, 0, 0, 0.9);
    491498        color: var(--wp--style--color--link, var(--global--color-white));
    492499}
    493500
    494 .has-background-white .site a:focus .meta-nav {
     501.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
    495502        color: var(--wp--style--color--link, var(--global--color-white));
    496503}
    497504
    498 .site a:focus.skip-link {
     505.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link {
    499506
    500507        /* Only visible in Windows High Contrast mode */
    … …  
    503510}
    504511
    505 .site a:focus.skip-link:focus {
     512.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link:focus {
    506513        color: #21759b;
    507514        background-color: #f1f1f1;
    508515}
    509516
    510 .site a:focus img {
     517.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img {
    511518        outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary));
    512519}
    513520
    514 .has-background:not(.has-background-background-color) .has-link-color a,
    515 .has-background:not(.has-background-background-color).has-link-color a {
     521.has-background .has-link-color a,
     522.has-background.has-link-color a {
    516523        color: var(--wp--style--color--link, var(--global--color-primary));
    517524}
    … …  
    531538}
    532539
    533 .wp-block-button__link:before,
    534 .wp-block-button__link:after {
    535         content: "";
    536         display: block;
    537         height: 0;
    538         width: 0;
    539 }
    540 
    541 .wp-block-button__link:before {
    542         margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
    543 }
    544 
    545 .wp-block-button__link:after {
    546         margin-top: -calc(.5em * var(--button--line-height) + -.39);
    547 }
    548 
    549540.wp-block-button__link:focus {
    550541        background: transparent;
    … …  
    688679[data-align=full] .wp-block-cover-image {
    689680        margin-top: 0;
     681        margin-bottom: 0;
     682}
     683
     684.wp-block-cover > .wp-block-cover__inner-container > *:first-child,
     685.wp-block-cover-image > .wp-block-cover__inner-container > *:first-child {
     686        margin-top: 0;
     687}
     688
     689.wp-block-cover > .wp-block-cover__inner-container > *:last-child:not(.block-list-appender),
     690.wp-block-cover-image > .wp-block-cover__inner-container > *:last-child:not(.block-list-appender) {
     691        margin-bottom: 0;
     692}
     693
     694.wp-block-cover.has-child-selected > .wp-block-cover__inner-container > *:nth-last-child(2),
     695.wp-block-cover.is-selected > .wp-block-cover__inner-container > *:nth-last-child(2),
     696.wp-block-cover-image.has-child-selected > .wp-block-cover__inner-container > *:nth-last-child(2),
     697.wp-block-cover-image.is-selected > .wp-block-cover__inner-container > *:nth-last-child(2) {
    690698        margin-bottom: 0;
    691699}
    … …  
    772780.wp-block-columns .wp-block-column {
    773781        max-width: inherit;
     782}
     783
     784.wp-block-columns > .wp-block-column > *:first-child {
     785        margin-top: 0;
     786}
     787
     788.wp-block-columns > .wp-block-column > *:last-child:not(.block-list-appender) {
     789        margin-bottom: 0;
     790}
     791
     792.wp-block-columns.has-child-selected > .wp-block-column > *:nth-last-child(2),
     793.wp-block-columns.is-selected > .wp-block-column > *:nth-last-child(2) {
     794        margin-bottom: 0;
    774795}
    775796@media only screen and (min-width: 652px) {
    … …  
    805826}
    806827
    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) {
     828.wp-block[data-align=full] > .wp-block-columns p:not(.has-background),
     829.wp-block[data-align=full] > .wp-block-columns h1:not(.has-background),
     830.wp-block[data-align=full] > .wp-block-columns h2:not(.has-background),
     831.wp-block[data-align=full] > .wp-block-columns h3:not(.has-background),
     832.wp-block[data-align=full] > .wp-block-columns h4:not(.has-background),
     833.wp-block[data-align=full] > .wp-block-columns h5:not(.has-background),
     834.wp-block[data-align=full] > .wp-block-columns h6:not(.has-background) {
    814835        padding-left: var(--global--spacing-unit);
    815836        padding-right: var(--global--spacing-unit);
    … …  
    842863}
    843864
    844 .wp-block-file .wp-block-file__button:before,
    845 .wp-block-file .wp-block-file__button:after {
    846         content: "";
    847         display: block;
    848         height: 0;
    849         width: 0;
    850 }
    851 
    852 .wp-block-file .wp-block-file__button:before {
    853         margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
    854 }
    855 
    856 .wp-block-file .wp-block-file__button:after {
    857         margin-top: -calc(.5em * var(--button--line-height) + -.39);
    858 }
    859 
    860865.wp-block-file .wp-block-file__button:focus {
    861866        background: transparent;
    … …  
    924929}
    925930
    926 .wp-block-group .wp-block-group__inner-container > *:last-child {
     931.wp-block-group > .wp-block-group__inner-container > *:first-child {
     932        margin-top: 0;
     933}
     934
     935.wp-block-group > .wp-block-group__inner-container > *:last-child:not(.block-list-appender) {
     936        margin-bottom: 0;
     937}
     938
     939.wp-block-group.has-child-selected > .wp-block-group__inner-container > *:nth-last-child(2),
     940.wp-block-group.is-selected > .wp-block-group__inner-container > *:nth-last-child(2) {
    927941        margin-bottom: 0;
    928942}
    … …  
    13051319}
    13061320
     1321.wp-block-media-text > .wp-block-media-text__content > *:first-child {
     1322        margin-top: 0;
     1323}
     1324
     1325.wp-block-media-text > .wp-block-media-text__content > *:last-child:not(.block-list-appender) {
     1326        margin-bottom: 0;
     1327}
     1328
     1329.wp-block-media-text.has-child-selected > .wp-block-media-text__content > *:nth-last-child(2),
     1330.wp-block-media-text.is-selected > .wp-block-media-text__content > *:nth-last-child(2) {
     1331        margin-bottom: 0;
     1332}
     1333
    13071334.wp-block-media-text .wp-block-media-text__content {
    13081335        padding: var(--global--spacing-horizontal);
    1309 }
    1310 
    1311 .wp-block-media-text .wp-block-media-text__content [data-block]:first-child {
    1312         margin-top: 0;
    1313 }
    1314 
    1315 .wp-block-media-text .wp-block-media-text__content [data-block]:last-child {
    1316         margin-bottom: 0;
    13171336}
    13181337
    … …  
    13781397        content: "“";
    13791398        display: block;
     1399        position: relative;
     1400        left: 0;
    13801401        font-size: 3rem;
    13811402        font-weight: 500;
    … …  
    14541475}
    14551476
     1477.wp-block[data-align=left] .wp-block-pullquote.is-style-solid-color,
     1478.wp-block[data-align=right] .wp-block-pullquote.is-style-solid-color {
     1479        padding: var(--global--spacing-unit);
     1480}
     1481
    14561482.wp-block-quote {
    14571483        position: relative;
    … …  
    14761502        font-size: var(--quote--font-size);
    14771503        line-height: var(--quote--line-height);
    1478         position: absolute;
    14791504        left: calc(-0.5 * var(--global--spacing-horizontal));
    14801505}
    … …  
    14861511}
    14871512
    1488 .has-background:not(.has-background-background-color) .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,
     1513.has-background .wp-block-quote .wp-block-quote__citation,
     1514[class*=background-color] .wp-block-quote .wp-block-quote__citation,
     1515[style*=background-color] .wp-block-quote .wp-block-quote__citation,
    14911516.wp-block-cover[style*=background-image] .wp-block-quote .wp-block-quote__citation {
    14921517        color: currentColor;
    … …  
    15001525
    15011526.wp-block-quote.has-text-align-right:before {
     1527        display: none;
     1528}
     1529
     1530.wp-block-quote.has-text-align-right p:before {
    15021531        content: "”";
    1503         left: initial;
    1504         right: calc(-0.5 * var(--global--spacing-horizontal));
     1532        font-size: var(--quote--font-size);
     1533        font-weight: normal;
     1534        line-height: var(--quote--line-height);
     1535        margin-right: 5px;
    15051536}
    15061537
    … …  
    15381569.wp-block-quote.is-large.has-text-align-right:before,
    15391570.wp-block-quote.is-style-large.has-text-align-right:before {
    1540         left: initial;
    1541         right: calc(-1 * var(--global--spacing-horizontal));
     1571        display: none;
     1572}
     1573
     1574.wp-block-quote.is-large.has-text-align-right p:before,
     1575.wp-block-quote.is-style-large.has-text-align-right p:before {
     1576        content: "”";
     1577        font-size: var(--quote--font-size-large);
     1578        font-weight: normal;
     1579        line-height: var(--quote--line-height-large);
     1580        margin-right: 10px;
    15421581}
    15431582@media only screen and (max-width: 481px) {
    … …  
    17581797}
    17591798
    1760 .wp-block-search .wp-block-search__button:before,
    1761 .wp-block-search .wp-block-search__button:after {
    1762         content: "";
    1763         display: block;
    1764         height: 0;
    1765         width: 0;
    1766 }
    1767 
    1768 .wp-block-search .wp-block-search__button:before {
    1769         margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
    1770 }
    1771 
    1772 .wp-block-search .wp-block-search__button:after {
    1773         margin-top: -calc(.5em * var(--button--line-height) + -.39);
    1774 }
    1775 
    17761799.wp-block-search .wp-block-search__button:focus {
    17771800        background: transparent;
    … …  
    19842007}
    19852008
    1986 .has-background:not(.has-background-background-color) .wp-block-separator,
    1987 [class*=background-color]:not(.has-background-background-color) .wp-block-separator,
    1988 [style*=background-color]:not(.has-background-background-color) .wp-block-separator,
     2009.has-background .wp-block-separator,
     2010[class*=background-color] .wp-block-separator,
     2011[style*=background-color] .wp-block-separator,
    19892012.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,
     2013.has-background hr,
     2014[class*=background-color] hr,
     2015[style*=background-color] hr,
    19932016.wp-block-cover[style*=background-image] hr {
    19942017        border-color: currentColor;
    … …  
    21792202}
    21802203
    2181 .has-background:not(.has-background-background-color) a:not(.wp-block-button__link),
     2204.has-background a,
    21822205.has-background p,
    21832206.has-background h1,
    … …  
    22102233}
    22112234
    2212 /**
    2213  * Spacing Overrides
    2214  */
    22152235[data-block] {
    22162236        margin-top: var(--global--spacing-vertical);
    … …  
    22182238}
    22192239
    2220 [data-block] [data-block]:first-child {
    2221         margin-top: 0;
    2222 }
    2223 
    2224 [data-block] [data-block]:nth-last-child(2) {
    2225         margin-bottom: 0;
    2226 }
    2227 
    2228 /* Block Alignments */
    22292240.wp-block {
    22302241        max-width: var(--responsive--aligndefault-width);
    … …  
    22752286}
    22762287
     2288.wp-block-freeform.block-library-rich-text__tinymce blockquote {
     2289        border: none;
     2290}
     2291
     2292.wp-block-freeform.block-library-rich-text__tinymce blockquote:before {
     2293        left: 5px;
     2294}
     2295
    22772296html {
    22782297        font-family: var(--global--font-secondary);
    … …  
    23042323}
    23052324
    2306 .has-background:not(.has-background-background-color) .has-link-color a,
    2307 .has-background:not(.has-background-background-color).has-link-color a {
     2325.has-background .has-link-color a,
     2326.has-background.has-link-color a {
    23082327        color: var(--wp--style--color--link, var(--global--color-primary));
    23092328}
    … …  
    23542373}
    23552374
    2356 .has-background:not(.has-background-background-color) a:not(.wp-block-button__link),
     2375.has-background a,
    23572376.has-background p,
    23582377.has-background h1,

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/js/customize-preview.js

    r49574 r49728  
    1616                                document.body.classList.add( 'is-dark-theme' );
    1717                                document.documentElement.classList.add( 'is-dark-theme' );
     18                                document.body.classList.remove( 'is-light-theme' );
     19                                document.documentElement.classList.remove( 'is-light-theme' );
    1820                                document.documentElement.classList.remove( 'respect-color-scheme-preference' );
    1921                        } else {
    2022                                document.body.classList.remove( 'is-dark-theme' );
    2123                                document.documentElement.classList.remove( 'is-dark-theme' );
     24                                document.body.classList.add( 'is-light-theme' );
     25                                document.documentElement.classList.add( 'is-light-theme' );
    2226                                if ( wp.customize( 'respect_user_color_preference' ).get() ) {
    2327                                        document.documentElement.classList.add( 'respect-color-scheme-preference' );
    … …  
    2630
    2731                        // Toggle the white background class.
    28                         if ( '#ffffff' === to.toLowerCase() ) {
     32                        if ( 225 <= lum ) {
    2933                                document.body.classList.add( 'has-background-white' );
    3034                        } else {

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js

    r49633 r49728  
    4242function twentytwentyoneSubmenuPosition( li ) {
    4343        var subMenu = li.querySelector( 'ul.sub-menu' ),
    44                 rect = subMenu.getBoundingClientRect(),
    45                 right = Math.round( rect.right ),
    46                 left = Math.round( rect.left ),
    47                 windowWidth = Math.round( window.innerWidth );
     44                rect,
     45                right,
     46                left,
     47                windowWidth;
     48
     49        if ( ! subMenu ) {
     50                return;
     51        }
     52
     53        rect = subMenu.getBoundingClientRect();
     54        right = Math.round( rect.right );
     55        left = Math.round( rect.left );
     56        windowWidth = Math.round( window.innerWidth );
    4857
    4958        if ( right > windowWidth ) {

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/02-tools/mixins.scss

    r49574 r49728  
    1818}
    1919
    20 // Crop Text Boundry
    21 // - Sets a fixed-width on content within alignwide and alignfull blocks
    22 @mixin crop-text($inset-line-height: 1) {
    23 
    24         line-height: $inset-line-height;
    25         $offset-top: calc(.5em * #{$inset-line-height} + -.38);
    26         $offset-bottom: calc(.5em * #{$inset-line-height} + -.39);
    27 
    28         &:before,
    29         &:after {
    30                 content: "";
    31                 display: block;
    32                 height: 0;
    33                 width: 0;
    34         }
    35 
    36         &:before {
    37                 margin-bottom: -($offset-top);
    38         }
    39 
    40         &:after {
    41                 margin-top: -($offset-bottom);
    42         }
    43 }
    44 
    4520// Button style
    4621// - Applies button styles to blocks and elements that share them.
    4722@mixin button-style() {
    48         @include crop-text(var(--button--line-height));
     23        line-height: var(--button--line-height);
    4924        color: var(--button--color-text);
    5025        cursor: pointer;
    … …  
    7853        }
    7954}
     55
     56@mixin innerblock-margin-clear($container) {
     57
     58        // Clear the top margin for the first-child.
     59        > #{$container} > *:first-child {
     60                margin-top: 0;
     61        }
     62
     63        // Last child that is not the appender.
     64        > #{$container} > *:last-child:not(.block-list-appender) {
     65                margin-bottom: 0;
     66        }
     67
     68        // When selected, the last item becomes the second last because of the appender.
     69        &.has-child-selected > #{$container} > *:nth-last-child(2),
     70        &.is-selected > #{$container} > *:nth-last-child(2) {
     71                margin-bottom: 0;
     72        }
     73}

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/blockquote.scss

    r49574 r49728  
    6060                font-size: var(--quote--font-size);
    6161                line-height: var(--quote--line-height);
     62                position: absolute;
     63                left: calc(-0.5 * var(--global--spacing-horizontal));
    6264        }
    6365

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/forms.scss

    r49574 r49728  
    3535                background: var(--global--color-white-90);
    3636        }
    37 
    3837}
    3938
    … …  
    217216                -webkit-appearance: none;
    218217                border: 3px solid var(--form--color-ranged);
    219                 height: 25px;
    220                 width: 25px;
     218                height: 44px;
     219                width: 44px;
    221220                border-radius: 50%;
    222221                background: var(--global--color-background);
    … …  
    226225        input[type="range"]::-moz-range-thumb {
    227226                border: 3px solid var(--form--color-ranged);
    228                 height: 25px;
    229                 width: 25px;
     227                height: 44px;
     228                width: 44px;
    230229                border-radius: 50%;
    231230                background: var(--global--color-background);
    232231                cursor: pointer;
     232                box-sizing: border-box;
    233233        }
    234234}
    … …  
    257257input[type="range"]::-ms-thumb {
    258258        border: 3px solid var(--form--color-ranged);
    259         height: 25px;
    260         width: 25px;
     259        height: 44px;
     260        width: 44px;
    261261        border-radius: 50%;
    262262        background: var(--global--color-background);

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/links.scss

    r49574 r49728  
    1616}
    1717
    18 .site a:focus {
     18.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
    1919
    2020        /* Only visible in Windows High Contrast mode */
    2121        outline: 2px solid transparent;
    2222
     23        text-decoration: underline 1px dotted currentColor;
     24        text-decoration-skip-ink: none;
    2325        background: rgba(255, 255, 255, .9);
    2426
    … …  
    5860// Enforce the custom link color even if a custom background color has been set.
    5961// The extra specificity here is required to override the background color styles.
    60 .has-background:not(.has-background-background-color) {
     62.has-background {
    6163        // Target both current level and nested block.
    6264        .has-link-color a,

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/media.scss

    r49574 r49728  
    1818}
    1919
    20 
    2120/* Media captions */
    2221figcaption,
    2322.wp-caption,
    24 .wp-caption-text {
     23.wp-caption-text,
     24.wp-block-embed figcaption {
    2525        color: currentColor;
    2626        font-size: var(--global--font-size-xs);

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/columns/_editor.scss

    r49574 r49728  
    1010                max-width: inherit;
    1111        }
     12
     13        @include innerblock-margin-clear(".wp-block-column");
    1214
    1315        &.is-style-twentytwentyone-columns-overlap {
    … …  
    5153        }
    5254
    53         .wp-block[data-align="full"] & {
     55        .wp-block[data-align="full"] > & {
    5456
    5557                p:not(.has-background),

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_editor.scss

    r49574 r49728  
    1515                margin-bottom: 0;
    1616        }
     17
     18        @include innerblock-margin-clear(".wp-block-cover__inner-container");
    1719
    1820        .wp-block-cover__inner-container,

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_style.scss

    r49574 r49728  
    1919        .wp-block-cover-image-text,
    2020        .wp-block-cover-text {
    21                 color: currentColor; // uses text color specified with background-color options in /blocks/utilities/_style.scss
     21                color: currentColor; // Uses text color specified with background-color options in 07-utilities\color-palette.scss
    2222                margin-top: var(--global--spacing-vertical);
    2323                margin-bottom: var(--global--spacing-vertical);
    2424
    25                 a {
     25                a:not(.wp-block-button__link):not(.wp-block-file__button) {
    2626                        color: currentColor;
    2727                }

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/group/_editor.scss

    r49574 r49728  
    3737        }
    3838
    39         .wp-block-group__inner-container > *:last-child {
    40                 margin-bottom: 0;
    41         }
     39        @include innerblock-margin-clear(".wp-block-group__inner-container");
    4240}
    4341

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/media-text/_editor.scss

    r49574 r49728  
    66        }
    77
     8        @include innerblock-margin-clear(".wp-block-media-text__content");
     9
    810        .wp-block-media-text__content {
    911                padding: var(--global--spacing-horizontal);
    10 
    11                 [data-block]:first-child {
    12                         margin-top: 0;
    13                 }
    14 
    15                 [data-block]:last-child {
    16                         margin-bottom: 0;
    17                 }
    1812        }
    1913

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_editor.scss

    r49574 r49728  
    1313                content: "\201C";
    1414                display: block;
     15                position: relative; // Override the absolute position.
     16                left: 0;
    1517                font-size: 3rem;
    1618                font-weight: 500;
    … …  
    9597        }
    9698}
     99
     100.wp-block[data-align="left"],
     101.wp-block[data-align="right"] {
     102
     103        .wp-block-pullquote.is-style-solid-color {
     104                padding: var(--global--spacing-unit);
     105        }
     106}

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_style.scss

    r49574 r49728  
    55        border-bottom-style: solid;
    66        border-top-style: solid;
     7        color: currentColor;
     8        border-color: currentColor;
    79        position: relative;
    810
    … …  
    1113                content: "\201C";
    1214                display: block;
     15                position: relative; // Override the absolute position.
     16                left: 0;
    1317                font-size: 3rem;
    1418                font-weight: 500;
    … …  
    4751        }
    4852
    49         &.alignleft {
     53        &.alignleft:not(.is-style-solid-color) {
    5054
    5155                blockquote:before,
    … …  
    5862        &.alignwide blockquote {
    5963                max-width: var(--responsive--alignwide-width);
    60 
    6164        }
    6265
    … …  
    7376                border-color: var(--pullquote--border-color);
    7477
    75                 @media ( min-width: 600px ) {
     78                @media (min-width: 600px) {
    7679                        padding: calc(5 * var(--global--spacing-unit));
    7780                }
    … …  
    8285
    8386                blockquote {
     87                        margin: 0;
    8488                        max-width: inherit;
    8589
    … …  
    9498                        color: currentColor;
    9599                }
     100
     101                &.alignleft,
     102                &.alignright {
     103                        padding: var(--global--spacing-unit);
     104
     105                        blockquote {
     106                                max-width: initial;
     107                        }
     108                }
    96109        }
    97110}

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_editor.scss

    r49574 r49728  
    2020                font-size: var(--quote--font-size);
    2121                line-height: var(--quote--line-height);
    22                 position: absolute;
    2322                left: calc(-0.5 * var(--global--spacing-horizontal));
    2423        }
    … …  
    2928                font-style: var(--quote--font-style-cite);
    3029
    31                 .has-background:not(.has-background-background-color) &,
    32                 [class*="background-color"]:not(.has-background-background-color) &,
    33                 [style*="background-color"]:not(.has-background-background-color) &,
     30                .has-background &,
     31                [class*="background-color"] &,
     32                [style*="background-color"] &,
    3433                .wp-block-cover[style*="background-image"] & {
    3534                        color: currentColor;
    … …  
    4241                border-right: none;
    4342
     43                // Hide the left aligned quote.
    4444                &:before {
     45                        display: none;
     46                }
     47
     48                // Align the quote left of the text.
     49                p:before {
    4550                        content: "\201D";
    46                         left: initial;
    47                         right: calc(-0.5 * var(--global--spacing-horizontal));
     51                        font-size: var(--quote--font-size);
     52                        font-weight: normal;
     53                        line-height: var(--quote--line-height);
     54                        margin-right: 5px;
    4855                }
    4956        }
    … …  
    7986                &.has-text-align-right {
    8087
     88                        // Hide the left aligned quote.
    8189                        &:before {
    82                                 left: initial;
    83                                 right: calc(-1 * var(--global--spacing-horizontal));
     90                                display: none;
     91                        }
     92
     93                        // Align the quote left of the text.
     94                        p:before {
     95                                content: "\201D";
     96                                font-size: var(--quote--font-size-large);
     97                                font-weight: normal;
     98                                line-height: var(--quote--line-height-large);
     99                                margin-right: 10px;
    84100                        }
    85101                }

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_style.scss

    r49574 r49728  
    11.wp-block-quote {
     2        border-left: none;
     3
     4        &:before {
     5                content: "\201C";
     6                font-size: var(--quote--font-size);
     7                line-height: var(--quote--line-height);
     8                left: 8px;
     9        }
    210
    311        .wp-block-quote__citation,
    … …  
    513        footer {
    614
    7                 .has-background:not(.has-background-background-color) &,
    8                 [class*="background-color"]:not(.has-background-background-color) &,
     15                .has-background &,
     16                [class*="background-color"] &,
    917                [style*="background-color"] &,
    1018                .wp-block-cover[style*="background-image"] & {
    … …  
    2129                border-right: none;
    2230
     31                // Hide the left aligned quote.
    2332                &:before {
     33                        display: none;
     34                }
     35
     36                // Align the quote left of the text.
     37                p:before {
    2438                        content: "\201D";
    25                         left: initial;
    26                         right: calc(-0.5 * var(--global--spacing-horizontal));
     39                        font-size: var(--quote--font-size);
     40                        font-weight: normal;
     41                        line-height: var(--quote--line-height);
     42                        margin-right: 5px;
    2743                }
    2844        }
    … …  
    5975                &.has-text-align-right {
    6076
     77                        // Hide the left aligned quote.
    6178                        &:before {
    62                                 left: initial;
    63                                 right: calc(-1 * var(--global--spacing-horizontal));
     79                                display: none;
     80                        }
     81
     82                        // Align the quote left of the text.
     83                        p:before {
     84                                content: "\201D";
     85                                font-size: var(--quote--font-size-large);
     86                                font-weight: normal;
     87                                line-height: var(--quote--line-height-large);
     88                                margin-right: 10px;
    6489                        }
    6590                }

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_style.scss

    r49574 r49728  
    11.wp-block-search {
    22        max-width: var(--responsive--aligndefault-width);
    3 
    4         &__button-inside {
    5 
    6                 .wp-block-search__inside-wrapper {
    7                         background-color: var(--global--color-white);
    8                 }
    9         }
    103
    114        &__button-only.aligncenter {
    … …  
    3629                }
    3730
    38                 .has-background:not(.has-background-background-color) &,
    39                 [class*="background-color"]:not(.has-background-background-color) &,
     31                .has-background &,
     32                [class*="background-color"] &,
    4033                [style*="background-color"] &,
    4134                .wp-block-cover[style*="background-image"] & {
    … …  
    114107        &.wp-block-search__button-inside {
    115108
     109                .wp-block-search__inside-wrapper {
     110                        background-color: var(--global--color-white);
     111                        border: var(--form--border-width) solid var(--form--border-color);
     112                        border-radius: var(--form--border-radius);
     113
     114                        .wp-block-search__input {
     115                                margin-right: 0;
     116
     117                                &:focus {
     118                                        outline: 2px dotted var(--form--border-color);
     119                                        outline-offset: -5px;
     120
     121                                        .is-dark-theme & {
     122                                                outline-color: currentColor;
     123                                        }
     124                                }
     125                        }
     126                }
     127
    116128                &.wp-block-search__text-button {
    117129

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/separator/_editor.scss

    r49574 r49728  
    4040        }
    4141
    42         .has-background:not(.has-background-background-color) &,
    43         [class*="background-color"]:not(.has-background-background-color) &,
    44         [style*="background-color"]:not(.has-background-background-color) &,
     42        .has-background &,
     43        [class*="background-color"] &,
     44        [style*="background-color"] &,
    4545        .wp-block-cover[style*="background-image"] & {
    4646                border-color: currentColor;

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/separator/_style.scss

    r49574 r49728  
    88        &.wp-block-separator {
    99                border-bottom: var(--separator--height) solid var(--separator--border-color);
     10                opacity: 1;
    1011
    1112                &:not(.is-style-dots):not(.alignwide) {
    1213                        max-width: var(--responsive--aligndefault-width);
     14                }
     15
     16                &:not(.is-style-dots) {
     17
     18                        &.alignwide {
     19                                max-width: var(--responsive--alignwide-width);
     20                        }
    1321
    1422                        &.alignfull {
    … …  
    4351                }
    4452
    45                 .has-background:not(.has-background-background-color) &,
    46                 [class*="background-color"]:not(.has-background-background-color) &,
     53                .has-background &,
     54                [class*="background-color"] &,
    4755                [style*="background-color"] &,
    4856                .wp-block-cover[style*="background-image"] & {

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/social-icons/_style.scss

    r49574 r49728  
    1 .wp-block-social-links.is-style-twentytwentyone-social-icons-color {
     1.wp-block-social-links {
    22
    3         a {
     3        a:focus {
    44                color: var(--global--color-primary);
    55        }
    66
    7         .wp-social-link {
    8                 background: none;
     7        &.is-style-twentytwentyone-social-icons-color {
     8
     9                a {
     10                        color: var(--global--color-primary);
     11                }
     12
     13                .wp-social-link {
     14                        background: none;
     15                }
     16
    917        }
    10 
    1118}

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/utilities/_editor.scss

    r49574 r49728  
    2727
    2828// Gutenberg text color options
    29 
    3029.has-primary-color[class] {
    3130        color: var(--global--color-primary);
    … …  
    3938.has-background {
    4039
    41         &:not(.has-background-background-color) a:not(.wp-block-button__link),
     40        a,
    4241        p,
    4342        h1,
    … …  
    7170}
    7271
    73 /**
    74  * Spacing Overrides
    75  */
    76 
     72// Spacing Overrides
    7773[data-block] {
    7874        margin-top: var(--global--spacing-vertical);
    7975        margin-bottom: var(--global--spacing-vertical);
    80 
    81         [data-block]:first-child {
    82                 margin-top: 0;
    83         }
    84 
    85         // Needs to be the second-last child to avoid applying this to the appender.
    86         [data-block]:nth-last-child(2) {
    87                 margin-bottom: 0;
    88         }
    8976}
    9077
    91 /* Block Alignments */
     78// Block Alignments
    9279.wp-block {
    9380
    … …  
    142129        }
    143130}
     131
     132// Remove the border of blockquotes inside the classic block.
     133.wp-block-freeform.block-library-rich-text__tinymce blockquote {
     134        border: none;
     135}
     136
     137// Adjust the position of the quote symbol for blockquotes inside the classic block.
     138.wp-block-freeform.block-library-rich-text__tinymce blockquote:before {
     139        left: 5px;
     140}

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/06-components/editor.scss

    r49574 r49728  
    3131// Enforce the custom link color even if a custom background color has been set.
    3232// The extra specificity here is required to override the background color styles.
    33 .has-background:not(.has-background-background-color) {
     33.has-background {
    3434        // Target both current level and nested block.
    3535        .has-link-color a,

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/06-components/footer-navigation.scss

    r49574 r49728  
    4646                                        }
    4747                                }
     48
     49                                // Change colors when the body background is white.
     50                                .has-background-white & {
     51
     52                                        .svg-icon {
     53                                                fill: var(--wp--style--color--link, var(--global--color-white));
     54                                        }
     55                                }
    4856                        }
    4957                }

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/06-components/footer.scss

    r49574 r49728  
    88        .no-widgets & {
    99                margin-top: calc(6 * var(--global--spacing-vertical));
     10        }
     11
     12        @include media(mobile-only) {
     13
     14                .no-widgets & {
     15                        margin-top: calc(3 * var(--global--spacing-vertical));
     16                }
    1017        }
    1118}
    … …  
    5865                                color: var(--wp--style--color--link, var(--global--color-background));
    5966                        }
     67
     68                        // Change colors when the body background is white.
     69                        .has-background-white & {
     70                                color: var(--wp--style--color--link, var(--global--color-white));
     71                        }
    6072                }
    6173        }

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/06-components/header.scss

    r49574 r49728  
    8080a.custom-logo-link {
    8181        text-decoration: none;
     82
     83        &:focus {
     84                // Change colors when the body background is white.
     85                .has-background-white &,
     86                .is-dark-theme & {
     87                        background: none;
     88                }
     89        }
    8290}
    8391
    … …  
    8795
    8896// Site logo
    89 
    9097.site-logo {
    9198

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/06-components/navigation.scss

    r49574 r49728  
    375375
    376376                                        + .sub-menu-toggle {
    377                                                 margin-left: calc(0px - var(--primary-nav--padding));
     377                                                margin-left: calc(5px - var(--primary-nav--padding));
    378378                                        }
    379379                                }
    … …  
    417417                        z-index: 99999; // Ensure focus styles appear above absolute positioned elements
    418418                        outline-offset: 0;
     419                        text-decoration-thickness: 2px;
    419420                }
    420421        }

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/06-components/pagination.scss

    r49574 r49728  
    1212                        color: var(--global--color-primary-hover);
    1313                        text-decoration: underline;
     14                        text-decoration-style: dotted;
    1415                }
    1516
    … …  
    124125                        margin-bottom: 0;
    125126                }
    126 
    127                 &:hover {
    128 
    129                         .post-title {
    130                                 text-decoration: underline;
    131                                 text-decoration-thickness: 1px;
    132                         }
    133                 }
    134         }
    135 
     127        }
    136128}
    137129
    … …  
    158150                }
    159151
     152                .is-dark-theme & {
     153
     154                        a:active,
     155                        a:hover:active,
     156                        a:hover:focus {
     157                                color: var(--global--color-background);
     158                        }
     159                }
     160
     161                .has-background-white & {
     162
     163                        a:active,
     164                        a:hover:active,
     165                        a:hover:focus {
     166                                color: var(--global--color-white);
     167                        }
     168                }
    160169        }
    161170
    … …  
    170179
    171180                &.current {
    172                         border-bottom: 1px solid var(--pagination--color-text);
     181                        text-decoration: underline;
     182                }
     183
     184                &:not(.dots):not(.current):hover {
     185                        text-decoration-style: dotted;
    173186                }
    174187
    … …  
    228241                font-size: var(--global--font-size-md);
    229242        }
    230 
    231 }
     243}

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss

    r49574 r49728  
    1515        @include media(wide) {
    1616                grid-template-columns: repeat(3, 1fr);
     17        }
     18
     19        @include media(mobile-only) {
     20                margin-top: calc(3 * var(--global--spacing-vertical));
    1721        }
    1822

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss

    r49574 r49728  
    4444.has-background {
    4545
    46         &:not(.has-background-background-color) a:not(.wp-block-button__link),
     46        a,
    4747        p,
    4848        h1,

  • branches/5.6/src/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss

    r49633 r49728  
    1313                --global--color-border: #9ea1a7;
    1414
    15                 .site a:focus,
    16                 .site a:focus .meta-nav {
     15                .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),
     16                .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
    1717                        background: #000;
    1818                        color: #fff;

  • branches/5.6/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php

    r49574 r49728  
    169169        public function body_class( $classes ) {
    170170                $background_color = get_theme_mod( 'background_color', 'D1E4DD' );
    171                 if ( 127 > self::get_relative_luminance_from_hex( $background_color ) ) {
     171                $luminance        = self::get_relative_luminance_from_hex( $background_color );
     172
     173                if ( 127 > $luminance ) {
    172174                        $classes[] = 'is-dark-theme';
    173175                } else {
    … …  
    175177                }
    176178
    177                 if ( 'ffffff' === strtolower( $background_color ) ) {
     179                if ( 225 <= $luminance ) {
    178180                        $classes[] = 'has-background-white';
    179181                }

  • branches/5.6/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php

    r49633 r49728  
    6666                        wp_add_inline_style(
    6767                                'twenty-twenty-one-custom-color-overrides',
    68                                 '.is-dark-theme.is-dark-theme .editor-styles-wrapper { --global--color-background: var(--global--color-dark-gray); --global--color-primary: var(--global--color-light-gray); --global--color-secondary: var(--global--color-light-gray); }'
     68                                '.is-dark-theme.is-dark-theme .editor-styles-wrapper { --global--color-background: var(--global--color-dark-gray); --global--color-primary: var(--global--color-light-gray); --global--color-secondary: var(--global--color-light-gray); --button--color-text: var(--global--color-background); --button--color-text-hover: var(--global--color-secondary); --button--color-text-active: var(--global--color-secondary); --button--color-background: var(--global--color-secondary); --button--color-background-active: var(--global--color-background); --global--color-border: #9ea1a7; }'
    6969                        );
    7070                }
    … …  
    183183                );
    184184
    185                 $description  = '<p>' . __( 'Dark Mode is a device setting. If a visitor to your site requests it, your site will be shown with a dark background and light text. <a href="https://wordpress.org/support/article/twenty-twenty-one/">Learn more about Dark Mode.</a>', 'twentytwentyone' ) . '</p>';
     185                $description  = '<p>';
     186                $description .= sprintf(
     187                        // translators: %s is the wordpress.org Twenty Twenty-One support article URL.
     188                        __( 'Dark Mode is a device setting. If a visitor to your site requests it, your site will be shown with a dark background and light text. <a href="%s">Learn more about Dark Mode.</a>', 'twentytwentyone' ),
     189                        __( 'https://wordpress.org/support/article/twenty-twenty-one/', 'twentytwentyone' )
     190                );
     191                $description .= '</p>';
    186192                $description .= '<p>' . __( 'Dark Mode can also be turned on and off with a button that you can find in the bottom right corner of the page.', 'twentytwentyone' ) . '</p>';
    187193

  • branches/5.6/src/wp-content/themes/twentytwentyone/functions.php

    r49578 r49728  
    273273                                array(
    274274                                        'name'     => esc_html__( 'Purple to yellow', 'twentytwentyone' ),
    275                                         'gradient' => 'linear-gradient(160deg, ' . $purple . ', ' . $yellow . ')',
     275                                        'gradient' => 'linear-gradient(160deg, ' . $purple . ' 0%, ' . $yellow . ' 100%)',
    276276                                        'slug'     => 'purple-to-yellow',
    277277                                ),
    278278                                array(
    279279                                        'name'     => esc_html__( 'Yellow to purple', 'twentytwentyone' ),
    280                                         'gradient' => 'linear-gradient(160deg, ' . $yellow . ', ' . $purple . ')',
     280                                        'gradient' => 'linear-gradient(160deg, ' . $yellow . ' 0%, ' . $purple . ' 100%)',
    281281                                        'slug'     => 'yellow-to-purple',
    282282                                ),
    283283                                array(
    284284                                        'name'     => esc_html__( 'Green to yellow', 'twentytwentyone' ),
    285                                         'gradient' => 'linear-gradient(160deg, ' . $green . ', ' . $yellow . ')',
     285                                        'gradient' => 'linear-gradient(160deg, ' . $green . ' 0%, ' . $yellow . ' 100%)',
    286286                                        'slug'     => 'green-to-yellow',
    287287                                ),
    288288                                array(
    289289                                        'name'     => esc_html__( 'Yellow to green', 'twentytwentyone' ),
    290                                         'gradient' => 'linear-gradient(160deg, ' . $yellow . ', ' . $green . ')',
     290                                        'gradient' => 'linear-gradient(160deg, ' . $yellow . ' 0%, ' . $green . ' 100%)',
    291291                                        'slug'     => 'yellow-to-green',
    292292                                ),
    293293                                array(
    294294                                        'name'     => esc_html__( 'Red to yellow', 'twentytwentyone' ),
    295                                         'gradient' => 'linear-gradient(160deg, ' . $red . ', ' . $yellow . ')',
     295                                        'gradient' => 'linear-gradient(160deg, ' . $red . ' 0%, ' . $yellow . ' 100%)',
    296296                                        'slug'     => 'red-to-yellow',
    297297                                ),
    298298                                array(
    299299                                        'name'     => esc_html__( 'Yellow to red', 'twentytwentyone' ),
    300                                         'gradient' => 'linear-gradient(160deg, ' . $yellow . ', ' . $red . ')',
     300                                        'gradient' => 'linear-gradient(160deg, ' . $yellow . ' 0%, ' . $red . ' 100%)',
    301301                                        'slug'     => 'yellow-to-red',
    302302                                ),
    303303                                array(
    304304                                        'name'     => esc_html__( 'Purple to red', 'twentytwentyone' ),
    305                                         'gradient' => 'linear-gradient(160deg, ' . $purple . ', ' . $red . ')',
     305                                        'gradient' => 'linear-gradient(160deg, ' . $purple . ' 0%, ' . $red . ' 100%)',
    306306                                        'slug'     => 'purple-to-red',
    307307                                ),
    308308                                array(
    309309                                        'name'     => esc_html__( 'Red to purple', 'twentytwentyone' ),
    310                                         'gradient' => 'linear-gradient(160deg, ' . $red . ', ' . $purple . ')',
     310                                        'gradient' => 'linear-gradient(160deg, ' . $red . ' 0%, ' . $purple . ' 100%)',
    311311                                        'slug'     => 'red-to-purple',
    312312                                ),
    … …  
    334334
    335335                // Add support for experimental cover block spacing.
    336                 add_theme_support( 'experimental-custom-spacing' );
     336                add_theme_support( 'custom-spacing' );
    337337
    338338                // Add support for custom units.

  • branches/5.6/src/wp-content/themes/twentytwentyone/inc/block-patterns.php

    r49633 r49728  
    115115                        'categories'  => array( 'twentytwentyone' ),
    116116                        'description' => esc_html_x( 'A block with 3 columns that display contact information and social media links.', 'Block pattern description', 'twentytwentyone' ),
    117                         'content'     => '<!-- wp:columns {"align":"wide"} --><div class="wp-block-columns alignwide"><!-- wp:column --><div class="wp-block-column"><!-- wp:paragraph --><p><a href="mailto:#">' . esc_html_x( 'example@example.com', 'Block pattern sample content', 'twentytwentyone' ) . '<br></a>' . esc_html_x( '123-456-7890', 'Block pattern sample content', 'twentytwentyone' ) . '</p><!-- /wp:paragraph --></div><!-- /wp:column --><!-- wp:column --><div class="wp-block-column"><!-- wp:paragraph {"align":"center"} --><p class="has-text-align-center">' . esc_html_x( '123 Main Street', 'Block pattern sample content', 'twentytwentyone' ) . '<br>' . esc_html_x( 'Cambridge, MA, 02139', 'Block pattern sample content', 'twentytwentyone' ) . '</p><!-- /wp:paragraph --></div><!-- /wp:column --><!-- wp:column {"verticalAlignment":"center"} --><div class="wp-block-column is-vertically-aligned-center"><!-- wp:social-links {"align":"right","className":"is-style-twentytwentyone-social-icons-color"} --><ul class="wp-block-social-links alignright is-style-twentytwentyone-social-icons-color"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /--><!-- wp:social-link {"url":"https://www.facebook.com/WordPress/","service":"facebook"} /--><!-- wp:social-link {"url":"https://twitter.com/WordPress","service":"twitter"} /--><!-- wp:social-link {"service":"instagram"} /--><!-- wp:social-link {"service":"linkedin"} /--><!-- wp:social-link {"service":"youtube"} /--><!-- wp:social-link {"url":"https://www.youtube.com/wordpress","service":"youtube"} /--></ul><!-- /wp:social-links --></div><!-- /wp:column --></div><!-- /wp:columns --><!-- wp:paragraph --><p></p><!-- /wp:paragraph -->',
     117                        'content'     => '<!-- wp:columns {"align":"wide"} --><div class="wp-block-columns alignwide"><!-- wp:column --><div class="wp-block-column"><!-- wp:paragraph --><p><a href="mailto:#">' . esc_html_x( 'example@example.com', 'Block pattern sample content', 'twentytwentyone' ) . '<br></a>' . esc_html_x( '123-456-7890', 'Block pattern sample content', 'twentytwentyone' ) . '</p><!-- /wp:paragraph --></div><!-- /wp:column --><!-- wp:column --><div class="wp-block-column"><!-- wp:paragraph {"align":"center"} --><p class="has-text-align-center">' . esc_html_x( '123 Main Street', 'Block pattern sample content', 'twentytwentyone' ) . '<br>' . esc_html_x( 'Cambridge, MA, 02139', 'Block pattern sample content', 'twentytwentyone' ) . '</p><!-- /wp:paragraph --></div><!-- /wp:column --><!-- wp:column {"verticalAlignment":"center"} --><div class="wp-block-column is-vertically-aligned-center"><!-- wp:social-links {"align":"right","className":"is-style-twentytwentyone-social-icons-color"} --><ul class="wp-block-social-links alignright is-style-twentytwentyone-social-icons-color"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /--><!-- wp:social-link {"url":"https://www.facebook.com/WordPress/","service":"facebook"} /--><!-- wp:social-link {"url":"https://twitter.com/WordPress","service":"twitter"} /--><!-- wp:social-link {"url":"https://www.youtube.com/wordpress","service":"youtube"} /--></ul><!-- /wp:social-links --></div><!-- /wp:column --></div><!-- /wp:columns -->',
    118118                )
    119119        );

  • branches/5.6/src/wp-content/themes/twentytwentyone/inc/template-tags.php

    r49574 r49728  
    194194                                the_post_thumbnail( 'post-thumbnail', array( 'loading' => 'eager' ) );
    195195                                ?>
     196                                <?php if ( wp_get_attachment_caption( get_post_thumbnail_id() ) ) : ?>
     197                                        <figcaption class="wp-caption-text"><?php echo wp_kses_post( wp_get_attachment_caption( get_post_thumbnail_id() ) ); ?></figcaption>
     198                                <?php endif; ?>
    196199                        </figure><!-- .post-thumbnail -->
    197200
    … …  
    202205                                        <?php the_post_thumbnail( 'post-thumbnail' ); ?>
    203206                                </a>
     207                                <?php if ( wp_get_attachment_caption( get_post_thumbnail_id() ) ) : ?>
     208                                        <figcaption class="wp-caption-text"><?php echo wp_kses_post( wp_get_attachment_caption( get_post_thumbnail_id() ) ); ?></figcaption>
     209                                <?php endif; ?>
    204210                        </figure>
    205211

  • branches/5.6/src/wp-content/themes/twentytwentyone/package-lock.json

    r49633 r49728  
    1515                },
    1616                "@babel/core": {
    17                         "version": "7.12.3",
    18                         "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.3.tgz",
    19                         "integrity": "sha512-0qXcZYKZp3/6N2jKYVxZv0aNCsxTSVCiK72DTiTYZAu7sjg73W0/aynWjMbiGd87EQL4WyA8reiJVh92AVla9g==",
     17                        "version": "7.12.9",
     18                        "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.9.tgz",
     19                        "integrity": "sha512-gTXYh3M5wb7FRXQy+FErKFAv90BnlOuNn1QkCK2lREoPAjrQCO49+HVSrFoe5uakFAF5eenS75KbO2vQiLrTMQ==",
    2020                        "dev": true,
    2121                        "requires": {
    2222                                "@babel/code-frame": "^7.10.4",
    23                                 "@babel/generator": "^7.12.1",
     23                                "@babel/generator": "^7.12.5",
    2424                                "@babel/helper-module-transforms": "^7.12.1",
    25                                 "@babel/helpers": "^7.12.1",
    26                                 "@babel/parser": "^7.12.3",
    27                                 "@babel/template": "^7.10.4",
    28                                 "@babel/traverse": "^7.12.1",
    29                                 "@babel/types": "^7.12.1",
     25                                "@babel/helpers": "^7.12.5",
     26                                "@babel/parser": "^7.12.7",
     27                                "@babel/template": "^7.12.7",
     28                                "@babel/traverse": "^7.12.9",
     29                                "@babel/types": "^7.12.7",
    3030                                "convert-source-map": "^1.7.0",
    3131                                "debug": "^4.1.0",
    … …  
    7878                },
    7979                "@babel/helper-member-expression-to-functions": {
    80                         "version": "7.12.1",
    81                         "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.12.1.tgz",
    82                         "integrity": "sha512-k0CIe3tXUKTRSoEx1LQEPFU9vRQfqHtl+kf8eNnDqb4AUJEy5pz6aIiog+YWtVm2jpggjS1laH68bPsR+KWWPQ==",
    83                         "dev": true,
    84                         "requires": {
    85                                 "@babel/types": "^7.12.1"
     80                        "version": "7.12.7",
     81                        "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.12.7.tgz",
     82                        "integrity": "sha512-DCsuPyeWxeHgh1Dus7APn7iza42i/qXqiFPWyBDdOFtvS581JQePsc1F/nD+fHrcswhLlRc2UpYS1NwERxZhHw==",
     83                        "dev": true,
     84                        "requires": {
     85                                "@babel/types": "^7.12.7"
    8686                        }
    8787                },
    … …  
    113113                },
    114114                "@babel/helper-optimise-call-expression": {
    115                         "version": "7.10.4",
    116                         "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.4.tgz",
    117                         "integrity": "sha512-n3UGKY4VXwXThEiKrgRAoVPBMqeoPgHVqiHZOanAJCG9nQUL2pLRQirUzl0ioKclHGpGqRgIOkgcIJaIWLpygg==",
    118                         "dev": true,
    119                         "requires": {
    120                                 "@babel/types": "^7.10.4"
     115                        "version": "7.12.7",
     116                        "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.7.tgz",
     117                        "integrity": "sha512-I5xc9oSJ2h59OwyUqjv95HRyzxj53DAubUERgQMrpcCEYQyToeHA+NEcUEsVWB4j53RDeskeBJ0SgRAYHDBckw==",
     118                        "dev": true,
     119                        "requires": {
     120                                "@babel/types": "^7.12.7"
    121121                        }
    122122                },
    … …  
    180180                },
    181181                "@babel/parser": {
    182                         "version": "7.12.5",
    183                         "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.5.tgz",
    184                         "integrity": "sha512-FVM6RZQ0mn2KCf1VUED7KepYeUWoVShczewOCfm3nzoBybaih51h+sYVVGthW9M6lPByEPTQf+xm27PBdlpwmQ==",
     182                        "version": "7.12.7",
     183                        "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.7.tgz",
     184                        "integrity": "sha512-oWR02Ubp4xTLCAqPRiNIuMVgNO5Aif/xpXtabhzW2HWUD47XJsAB4Zd/Rg30+XeQA3juXigV7hlquOTmwqLiwg==",
    185185                        "dev": true
    186186                },
    … …  
    205205                },
    206206                "@babel/template": {
    207                         "version": "7.10.4",
    208                         "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz",
    209                         "integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==",
     207                        "version": "7.12.7",
     208                        "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.7.tgz",
     209                        "integrity": "sha512-GkDzmHS6GV7ZeXfJZ0tLRBhZcMcY0/Lnb+eEbXDBfCAcZCjrZKe6p3J4we/D24O9Y8enxWAg1cWwof59yLh2ow==",
    210210                        "dev": true,
    211211                        "requires": {
    212212                                "@babel/code-frame": "^7.10.4",
    213                                 "@babel/parser": "^7.10.4",
    214                                 "@babel/types": "^7.10.4"
     213                                "@babel/parser": "^7.12.7",
     214                                "@babel/types": "^7.12.7"
    215215                        }
    216216                },
    217217                "@babel/traverse": {
    218                         "version": "7.12.5",
    219                         "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.5.tgz",
    220                         "integrity": "sha512-xa15FbQnias7z9a62LwYAA5SZZPkHIXpd42C6uW68o8uTuua96FHZy1y61Va5P/i83FAAcMpW8+A/QayntzuqA==",
     218                        "version": "7.12.9",
     219                        "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.9.tgz",
     220                        "integrity": "sha512-iX9ajqnLdoU1s1nHt36JDI9KG4k+vmI8WgjK5d+aDTwQbL2fUnzedNedssA645Ede3PM2ma1n8Q4h2ohwXgMXw==",
    221221                        "dev": true,
    222222                        "requires": {
    … …  
    225225                                "@babel/helper-function-name": "^7.10.4",
    226226                                "@babel/helper-split-export-declaration": "^7.11.0",
    227                                 "@babel/parser": "^7.12.5",
    228                                 "@babel/types": "^7.12.5",
     227                                "@babel/parser": "^7.12.7",
     228                                "@babel/types": "^7.12.7",
    229229                                "debug": "^4.1.0",
    230230                                "globals": "^11.1.0",
    … …  
    241241                },
    242242                "@babel/types": {
    243                         "version": "7.12.6",
    244                         "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.6.tgz",
    245                         "integrity": "sha512-hwyjw6GvjBLiyy3W0YQf0Z5Zf4NpYejUnKFcfcUhZCSffoBBp30w6wP2Wn6pk31jMYZvcOrB/1b7cGXvEoKogA==",
     243                        "version": "7.12.7",
     244                        "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.7.tgz",
     245                        "integrity": "sha512-MNyI92qZq6jrQkXvtIiykvl4WtoRrVV9MPn+ZfsoEENjiWcBQ3ZSHrkxnJWgWtLX3XXqX5hrSQ+X69wkmesXuQ==",
    246246                        "dev": true,
    247247                        "requires": {
    … …  
    314314                },
    315315                "@stylelint/postcss-markdown": {
    316                         "version": "0.36.1",
    317                         "resolved": "https://registry.npmjs.org/@stylelint/postcss-markdown/-/postcss-markdown-0.36.1.tgz",
    318                         "integrity": "sha512-iDxMBWk9nB2BPi1VFQ+Dc5+XpvODBHw2n3tYpaBZuEAFQlbtF9If0Qh5LTTwSi/XwdbJ2jt+0dis3i8omyggpw==",
    319                         "dev": true,
    320                         "requires": {
    321                                 "remark": "^12.0.0",
    322                                 "unist-util-find-all-after": "^3.0.1"
     316                        "version": "0.36.2",
     317                        "resolved": "https://registry.npmjs.org/@stylelint/postcss-markdown/-/postcss-markdown-0.36.2.tgz",
     318                        "integrity": "sha512-2kGbqUVJUGE8dM+bMzXG/PYUWKkjLIkRLWNh39OaADkiabDRdw8ATFCgbMz5xdIcvwspPAluSL7uY+ZiTWdWmQ==",
     319                        "dev": true,
     320                        "requires": {
     321                                "remark": "^13.0.0",
     322                                "unist-util-find-all-after": "^3.0.2"
    323323                        }
    324324                },
    … …  
    328328                        "integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==",
    329329                        "dev": true
     330                },
     331                "@types/mdast": {
     332                        "version": "3.0.3",
     333                        "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.3.tgz",
     334                        "integrity": "sha512-SXPBMnFVQg1s00dlMCc/jCdvPqdE4mXaMMCeRlxLDmTAEoegHT53xKtkDnzDTOcmMHUfcjyf36/YYZ6SxRdnsw==",
     335                        "dev": true,
     336                        "requires": {
     337                                "@types/unist": "*"
     338                        }
    330339                },
    331340                "@types/minimist": {
    … …  
    405414                                "prettier": "npm:wp-prettier@2.0.5",
    406415                                "requireindex": "^1.2.0"
    407                         },
    408                         "dependencies": {
    409                                 "prettier": {
    410                                         "version": "npm:wp-prettier@2.0.5",
    411                                         "resolved": "https://registry.npmjs.org/wp-prettier/-/wp-prettier-2.0.5.tgz",
    412                                         "integrity": "sha512-5GCgdeevIXwR3cW4Qj5XWC5MO1iSCz8+IPn0mMw6awAt/PBiey8yyO7MhePRsaMqghJAhg6Q3QLYWSnUHWkG6A==",
    413                                         "dev": true
    414                                 }
    415416                        }
    416417                },
    … …  
    496497                },
    497498                "array-includes": {
    498                         "version": "3.1.1",
    499                         "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.1.tgz",
    500                         "integrity": "sha512-c2VXaCHl7zPsvpkFsw4nxvFie4fh1ur9bpcgsVkIjqn0H/Xwdg+7fv3n2r/isyS8EBj5b06M9kHyZuIr4El6WQ==",
    501                         "dev": true,
    502                         "requires": {
     499                        "version": "3.1.2",
     500                        "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.2.tgz",
     501                        "integrity": "sha512-w2GspexNQpx+PutG3QpT437/BenZBj0M/MZGn5mzv/MofYqo0xmRHzn4lFsoDlWJ+THYsGJmFlW68WlDFx7VRw==",
     502                        "dev": true,
     503                        "requires": {
     504                                "call-bind": "^1.0.0",
    503505                                "define-properties": "^1.1.3",
    504                                 "es-abstract": "^1.17.0",
     506                                "es-abstract": "^1.18.0-next.1",
     507                                "get-intrinsic": "^1.0.1",
    505508                                "is-string": "^1.0.5"
    506509                        }
    … …  
    513516                },
    514517                "array.prototype.flatmap": {
    515                         "version": "1.2.3",
    516                         "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.3.tgz",
    517                         "integrity": "sha512-OOEk+lkePcg+ODXIpvuU9PAryCikCJyo7GlDG1upleEpQRx6mzL9puEBkozQ5iAx20KV0l3DbyQwqciJtqe5Pg==",
    518                         "dev": true,
    519                         "requires": {
     518                        "version": "1.2.4",
     519                        "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.4.tgz",
     520                        "integrity": "sha512-r9Z0zYoxqHz60vvQbWEdXIEtCwHF0yxaWfno9qzXeNHvfyl3BZqygmGzb84dsubyaXLH4husF+NFgMSdpZhk2Q==",
     521                        "dev": true,
     522                        "requires": {
     523                                "call-bind": "^1.0.0",
    520524                                "define-properties": "^1.1.3",
    521                                 "es-abstract": "^1.17.0-next.1",
     525                                "es-abstract": "^1.18.0-next.1",
    522526                                "function-bind": "^1.1.1"
    523527                        }
    … …  
    563567                },
    564568                "axe-core": {
    565                         "version": "4.0.2",
    566                         "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.0.2.tgz",
    567                         "integrity": "sha512-arU1h31OGFu+LPrOLGZ7nB45v940NMDMEJeNmbutu57P+UFDVnkZg3e+J1I2HJRZ9hT7gO8J91dn/PMrAiKakA==",
     569                        "version": "4.1.1",
     570                        "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.1.1.tgz",
     571                        "integrity": "sha512-5Kgy8Cz6LPC9DJcNb3yjAXTu3XihQgEdnIg50c//zOC/MyLP0Clg+Y8Sh9ZjjnvBrDZU4DgXS9C3T9r4/scGZQ==",
    568572                        "dev": true
    569573                },
    … …  
    698702                },
    699703                "caniuse-lite": {
    700                         "version": "1.0.30001157",
    701                         "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001157.tgz",
    702                         "integrity": "sha512-gOerH9Wz2IRZ2ZPdMfBvyOi3cjaz4O4dgNwPGzx8EhqAs4+2IL/O+fJsbt+znSigujoZG8bVcIAUM/I/E5K3MA==",
    703                         "dev": true
    704                 },
    705                 "ccount": {
    706                         "version": "1.1.0",
    707                         "resolved": "https://registry.npmjs.org/ccount/-/ccount-1.1.0.tgz",
    708                         "integrity": "sha512-vlNK021QdI7PNeiUh/lKkC/mNHHfV0m/Ad5JoI0TYtlBnJAslM/JIkm/tGC88bkLIwO6OQ5uV6ztS6kVAtCDlg==",
     704                        "version": "1.0.30001164",
     705                        "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001164.tgz",
     706                        "integrity": "sha512-G+A/tkf4bu0dSp9+duNiXc7bGds35DioCyC6vgK2m/rjA4Krpy5WeZgZyfH2f0wj2kI6yAWWucyap6oOwmY1mg==",
    709707                        "dev": true
    710708                },
    … …  
    724722                        "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
    725723                        "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==",
    726                         "dev": true
    727                 },
    728                 "character-entities-html4": {
    729                         "version": "1.1.4",
    730                         "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-1.1.4.tgz",
    731                         "integrity": "sha512-HRcDxZuZqMx3/a+qrzxdBKBPUpxWEq9xw2OPZ3a/174ihfrQKVsFhqtthBInFy1zZ9GgZyFXOatNujm8M+El3g==",
    732724                        "dev": true
    733725                },
    … …  
    792784                        }
    793785                },
    794                 "collapse-white-space": {
    795                         "version": "1.0.6",
    796                         "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.6.tgz",
    797                         "integrity": "sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ==",
    798                         "dev": true
    799                 },
    800786                "color-convert": {
    801787                        "version": "1.9.3",
    … …  
    847833                },
    848834                "core-js-pure": {
    849                         "version": "3.7.0",
    850                         "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.7.0.tgz",
    851                         "integrity": "sha512-EZD2ckZysv8MMt4J6HSvS9K2GdtlZtdBncKAmF9lr2n0c9dJUaUN88PSTjvgwCgQPWKTkERXITgS6JJRAnljtg==",
     835                        "version": "3.8.0",
     836                        "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.8.0.tgz",
     837                        "integrity": "sha512-fRjhg3NeouotRoIV0L1FdchA6CK7ZD+lyINyMoz19SyV+ROpC4noS1xItWHFtwZdlqfMfVPJEyEGdfri2bD1pA==",
    852838                        "dev": true
    853839                },
    … …  
    889875                },
    890876                "debug": {
    891                         "version": "4.2.0",
    892                         "resolved": "https://registry.npmjs.org/debug/-/debug-4.2.0.tgz",
    893                         "integrity": "sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==",
     877                        "version": "4.3.1",
     878                        "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
     879                        "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
    894880                        "dev": true,
    895881                        "requires": {
    … …  
    1010996                },
    1011997                "electron-to-chromium": {
    1012                         "version": "1.3.593",
    1013                         "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.593.tgz",
    1014                         "integrity": "sha512-GvO7G1ZxvffnMvPCr4A7+iQPVuvpyqMrx2VWSERAjG+pHK6tmO9XqYdBfMIq9corRyi4bNImSDEiDvIoDb8HrA==",
     998                        "version": "1.3.612",
     999                        "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.612.tgz",
     1000                        "integrity": "sha512-CdrdX1B6mQqxfw+51MPWB5qA6TKWjza9f5voBtUlRfEZEwZiFaxJLrhFI8zHE9SBAuGt4h84rQU6Ho9Bauo1LA==",
    10151001                        "dev": true
    10161002                },
    … …  
    10461032                },
    10471033                "es-abstract": {
    1048                         "version": "1.17.7",
    1049                         "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.7.tgz",
    1050                         "integrity": "sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g==",
     1034                        "version": "1.18.0-next.1",
     1035                        "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.1.tgz",
     1036                        "integrity": "sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==",
    10511037                        "dev": true,
    10521038                        "requires": {
    … …  
    10561042                                "has-symbols": "^1.0.1",
    10571043                                "is-callable": "^1.2.2",
     1044                                "is-negative-zero": "^2.0.0",
    10581045                                "is-regex": "^1.1.1",
    10591046                                "object-inspect": "^1.8.0",
    … …  
    10881075                },
    10891076                "eslint": {
    1090                         "version": "7.13.0",
    1091                         "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.13.0.tgz",
    1092                         "integrity": "sha512-uCORMuOO8tUzJmsdRtrvcGq5qposf7Rw0LwkTJkoDbOycVQtQjmnhZSuLQnozLE4TmAzlMVV45eCHmQ1OpDKUQ==",
     1077                        "version": "7.14.0",
     1078                        "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.14.0.tgz",
     1079                        "integrity": "sha512-5YubdnPXrlrYAFCKybPuHIAH++PINe1pmKNc5wQRB9HSbqIK1ywAnntE3Wwua4giKu0bjligf1gLF6qxMGOYRA==",
    10931080                        "dev": true,
    10941081                        "requires": {
    … …  
    12321219                },
    12331220                "eslint-plugin-jsdoc": {
    1234                         "version": "30.7.7",
    1235                         "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-30.7.7.tgz",
    1236                         "integrity": "sha512-DmVMJC2AbpYX7X1KhnVT1a9ex1AUvG+q9G8i6hzjp3cpjW8vmKQTUmZnRS0//W+7HvMqeb+eXPANdCOzGVVZBQ==",
     1221                        "version": "30.7.8",
     1222                        "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-30.7.8.tgz",
     1223                        "integrity": "sha512-OWm2AYvXjCl7nRbpcw5xisfSVkpVAyp4lGqL9T+DeK4kaPm6ecnmTc/G5s1PtcRrwbaI8bIWGzwScqv5CdGyxA==",
    12371224                        "dev": true,
    12381225                        "requires": {
    … …  
    18211808                                "has": "^1.0.3",
    18221809                                "side-channel": "^1.0.2"
     1810                        },
     1811                        "dependencies": {
     1812                                "es-abstract": {
     1813                                        "version": "1.17.7",
     1814                                        "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.7.tgz",
     1815                                        "integrity": "sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g==",
     1816                                        "dev": true,
     1817                                        "requires": {
     1818                                                "es-to-primitive": "^1.2.1",
     1819                                                "function-bind": "^1.1.1",
     1820                                                "has": "^1.0.3",
     1821                                                "has-symbols": "^1.0.1",
     1822                                                "is-callable": "^1.2.2",
     1823                                                "is-regex": "^1.1.1",
     1824                                                "object-inspect": "^1.8.0",
     1825                                                "object-keys": "^1.1.1",
     1826                                                "object.assign": "^4.1.1",
     1827                                                "string.prototype.trimend": "^1.0.1",
     1828                                                "string.prototype.trimstart": "^1.0.1"
     1829                                        }
     1830                                }
    18231831                        }
    18241832                },
    … …  
    18291837                        "dev": true
    18301838                },
    1831                 "is-alphanumeric": {
    1832                         "version": "1.0.0",
    1833                         "resolved": "https://registry.npmjs.org/is-alphanumeric/-/is-alphanumeric-1.0.0.tgz",
    1834                         "integrity": "sha1-Spzvcdr0wAHB2B1j0UDPU/1oifQ=",
    1835                         "dev": true
    1836                 },
    18371839                "is-alphanumerical": {
    18381840                        "version": "1.0.4",
    … …  
    18731875                },
    18741876                "is-core-module": {
    1875                         "version": "2.1.0",
    1876                         "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.1.0.tgz",
    1877                         "integrity": "sha512-YcV7BgVMRFRua2FqQzKtTDMz8iCuLEyGKjr70q8Zm1yy2qKcurbFEd79PAdHV77oL3NrAaOVQIbMmiHQCHB7ZA==",
     1877                        "version": "2.2.0",
     1878                        "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
     1879                        "integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==",
    18781880                        "dev": true,
    18791881                        "requires": {
    … …  
    19781980                        "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
    19791981                        "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
    1980                         "dev": true
    1981                 },
    1982                 "is-whitespace-character": {
    1983                         "version": "1.0.4",
    1984                         "resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz",
    1985                         "integrity": "sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w==",
    1986                         "dev": true
    1987                 },
    1988                 "is-word-character": {
    1989                         "version": "1.0.4",
    1990                         "resolved": "https://registry.npmjs.org/is-word-character/-/is-word-character-1.0.4.tgz",
    1991                         "integrity": "sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA==",
    19921982                        "dev": true
    19931983                },
    … …  
    20942084                },
    20952085                "known-css-properties": {
    2096                         "version": "0.19.0",
    2097                         "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.19.0.tgz",
    2098                         "integrity": "sha512-eYboRV94Vco725nKMlpkn3nV2+96p9c3gKXRsYqAJSswSENvBhN7n5L+uDhY58xQa0UukWsDMTGELzmD8Q+wTA==",
     2086                        "version": "0.20.0",
     2087                        "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.20.0.tgz",
     2088                        "integrity": "sha512-URvsjaA9ypfreqJ2/ylDr5MUERhJZ+DhguoWRr2xgS5C7aGCalXo+ewL+GixgKBfhT2vuL02nbIgNGqVWgTOYw==",
    20992089                        "dev": true
    21002090                },
    … …  
    22062196                        }
    22072197                },
     2198                "lru-cache": {
     2199                        "version": "6.0.0",
     2200                        "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
     2201                        "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
     2202                        "dev": true,
     2203                        "requires": {
     2204                                "yallist": "^4.0.0"
     2205                        }
     2206                },
    22082207                "map-obj": {
    22092208                        "version": "4.1.0",
    … …  
    22122211                        "dev": true
    22132212                },
    2214                 "markdown-escapes": {
    2215                         "version": "1.0.4",
    2216                         "resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.4.tgz",
    2217                         "integrity": "sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==",
    2218                         "dev": true
    2219                 },
    2220                 "markdown-table": {
    2221                         "version": "2.0.0",
    2222                         "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-2.0.0.tgz",
    2223                         "integrity": "sha512-Ezda85ToJUBhM6WGaG6veasyym+Tbs3cMAw/ZhOPqXiYsr0jgocBV3j3nx+4lk47plLlIqjwuTm/ywVI+zjJ/A==",
    2224                         "dev": true,
    2225                         "requires": {
    2226                                 "repeat-string": "^1.0.0"
    2227                         }
    2228                 },
    22292213                "mathml-tag-names": {
    22302214                        "version": "2.1.3",
    … …  
    22332217                        "dev": true
    22342218                },
    2235                 "mdast-util-compact": {
    2236                         "version": "2.0.1",
    2237                         "resolved": "https://registry.npmjs.org/mdast-util-compact/-/mdast-util-compact-2.0.1.tgz",
    2238                         "integrity": "sha512-7GlnT24gEwDrdAwEHrU4Vv5lLWrEer4KOkAiKT9nYstsTad7Oc1TwqT2zIMKRdZF7cTuaf+GA1E4Kv7jJh8mPA==",
    2239                         "dev": true,
    2240                         "requires": {
    2241                                 "unist-util-visit": "^2.0.0"
    2242                         }
     2219                "mdast-util-from-markdown": {
     2220                        "version": "0.8.1",
     2221                        "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.1.tgz",
     2222                        "integrity": "sha512-qJXNcFcuCSPqUF0Tb0uYcFDIq67qwB3sxo9RPdf9vG8T90ViKnksFqdB/Coq2a7sTnxL/Ify2y7aIQXDkQFH0w==",
     2223                        "dev": true,
     2224                        "requires": {
     2225                                "@types/mdast": "^3.0.0",
     2226                                "mdast-util-to-string": "^1.0.0",
     2227                                "micromark": "~2.10.0",
     2228                                "parse-entities": "^2.0.0"
     2229                        }
     2230                },
     2231                "mdast-util-to-markdown": {
     2232                        "version": "0.5.4",
     2233                        "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-0.5.4.tgz",
     2234                        "integrity": "sha512-0jQTkbWYx0HdEA/h++7faebJWr5JyBoBeiRf0u3F4F3QtnyyGaWIsOwo749kRb1ttKrLLr+wRtOkfou9yB0p6A==",
     2235                        "dev": true,
     2236                        "requires": {
     2237                                "@types/unist": "^2.0.0",
     2238                                "longest-streak": "^2.0.0",
     2239                                "mdast-util-to-string": "^2.0.0",
     2240                                "parse-entities": "^2.0.0",
     2241                                "repeat-string": "^1.0.0",
     2242                                "zwitch": "^1.0.0"
     2243                        },
     2244                        "dependencies": {
     2245                                "mdast-util-to-string": {
     2246                                        "version": "2.0.0",
     2247                                        "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz",
     2248                                        "integrity": "sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==",
     2249                                        "dev": true
     2250                                }
     2251                        }
     2252                },
     2253                "mdast-util-to-string": {
     2254                        "version": "1.1.0",
     2255                        "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz",
     2256                        "integrity": "sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A==",
     2257                        "dev": true
    22432258                },
    22442259                "memorystream": {
    … …  
    22492264                },
    22502265                "meow": {
    2251                         "version": "7.1.1",
    2252                         "resolved": "https://registry.npmjs.org/meow/-/meow-7.1.1.tgz",
    2253                         "integrity": "sha512-GWHvA5QOcS412WCo8vwKDlTelGLsCGBVevQB5Kva961rmNfun0PCbv5+xta2kUMFJyR8/oWnn7ddeKdosbAPbA==",
     2266                        "version": "8.0.0",
     2267                        "resolved": "https://registry.npmjs.org/meow/-/meow-8.0.0.tgz",
     2268                        "integrity": "sha512-nbsTRz2fwniJBFgUkcdISq8y/q9n9VbiHYbfwklFh5V4V2uAcxtKQkDc0yCLPM/kP0d+inZBewn3zJqewHE7kg==",
    22542269                        "dev": true,
    22552270                        "requires": {
    … …  
    22592274                                "hard-rejection": "^2.1.0",
    22602275                                "minimist-options": "4.1.0",
    2261                                 "normalize-package-data": "^2.5.0",
     2276                                "normalize-package-data": "^3.0.0",
    22622277                                "read-pkg-up": "^7.0.1",
    22632278                                "redent": "^3.0.0",
    22642279                                "trim-newlines": "^3.0.0",
    2265                                 "type-fest": "^0.13.1",
    2266                                 "yargs-parser": "^18.1.3"
     2280                                "type-fest": "^0.18.0",
     2281                                "yargs-parser": "^20.2.3"
    22672282                        },
    22682283                        "dependencies": {
     2284                                "hosted-git-info": {
     2285                                        "version": "3.0.7",
     2286                                        "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.7.tgz",
     2287                                        "integrity": "sha512-fWqc0IcuXs+BmE9orLDyVykAG9GJtGLGuZAAqgcckPgv5xad4AcXGIv8galtQvlwutxSlaMcdw7BUtq2EIvqCQ==",
     2288                                        "dev": true,
     2289                                        "requires": {
     2290                                                "lru-cache": "^6.0.0"
     2291                                        }
     2292                                },
     2293                                "normalize-package-data": {
     2294                                        "version": "3.0.0",
     2295                                        "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.0.tgz",
     2296                                        "integrity": "sha512-6lUjEI0d3v6kFrtgA/lOx4zHCWULXsFNIjHolnZCKCTLA6m/G625cdn3O7eNmT0iD3jfo6HZ9cdImGZwf21prw==",
     2297                                        "dev": true,
     2298                                        "requires": {
     2299                                                "hosted-git-info": "^3.0.6",
     2300                                                "resolve": "^1.17.0",
     2301                                                "semver": "^7.3.2",
     2302                                                "validate-npm-package-license": "^3.0.1"
     2303                                        }
     2304                                },
    22692305                                "type-fest": {
    2270                                         "version": "0.13.1",
    2271                                         "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
    2272                                         "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
     2306                                        "version": "0.18.1",
     2307                                        "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz",
     2308                                        "integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==",
    22732309                                        "dev": true
    22742310                                },
    22752311                                "yargs-parser": {
    2276                                         "version": "18.1.3",
    2277                                         "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
    2278                                         "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
    2279                                         "dev": true,
    2280                                         "requires": {
    2281                                                 "camelcase": "^5.0.0",
    2282                                                 "decamelize": "^1.2.0"
    2283                                         }
     2312                                        "version": "20.2.4",
     2313                                        "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.4.tgz",
     2314                                        "integrity": "sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==",
     2315                                        "dev": true
    22842316                                }
    22852317                        }
    … …  
    22902322                        "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
    22912323                        "dev": true
     2324                },
     2325                "micromark": {
     2326                        "version": "2.10.1",
     2327                        "resolved": "https://registry.npmjs.org/micromark/-/micromark-2.10.1.tgz",
     2328                        "integrity": "sha512-fUuVF8sC1X7wsCS29SYQ2ZfIZYbTymp0EYr6sab3idFjigFFjGa5UwoniPlV9tAgntjuapW1t9U+S0yDYeGKHQ==",
     2329                        "dev": true,
     2330                        "requires": {
     2331                                "debug": "^4.0.0",
     2332                                "parse-entities": "^2.0.0"
     2333                        }
    22922334                },
    22932335                "micromatch": {
    … …  
    23692411                },
    23702412                "node-releases": {
    2371                         "version": "1.1.66",
    2372                         "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.66.tgz",
    2373                         "integrity": "sha512-JHEQ1iWPGK+38VLB2H9ef2otU4l8s3yAMt9Xf934r6+ojCYDMHPMqvCc9TnzfeFSP1QEOeU6YZEd3+De0LTCgg==",
     2413                        "version": "1.1.67",
     2414                        "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.67.tgz",
     2415                        "integrity": "sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg==",
    23742416                        "dev": true
    23752417                },
    … …  
    24932535                },
    24942536                "object-inspect": {
    2495                         "version": "1.8.0",
    2496                         "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.8.0.tgz",
    2497                         "integrity": "sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==",
     2537                        "version": "1.9.0",
     2538                        "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.9.0.tgz",
     2539                        "integrity": "sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==",
    24982540                        "dev": true
    24992541                },
    … …  
    25172559                },
    25182560                "object.entries": {
     2561                        "version": "1.1.3",
     2562                        "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.3.tgz",
     2563                        "integrity": "sha512-ym7h7OZebNS96hn5IJeyUmaWhaSM4SVtAPPfNLQEI2MYWCO2egsITb9nab2+i/Pwibx+R0mtn+ltKJXRSeTMGg==",
     2564                        "dev": true,
     2565                        "requires": {
     2566                                "call-bind": "^1.0.0",
     2567                                "define-properties": "^1.1.3",
     2568                                "es-abstract": "^1.18.0-next.1",
     2569                                "has": "^1.0.3"
     2570                        }
     2571                },
     2572                "object.fromentries": {
     2573                        "version": "2.0.3",
     2574                        "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.3.tgz",
     2575                        "integrity": "sha512-IDUSMXs6LOSJBWE++L0lzIbSqHl9KDCfff2x/JSEIDtEUavUnyMYC2ZGay/04Zq4UT8lvd4xNhU4/YHKibAOlw==",
     2576                        "dev": true,
     2577                        "requires": {
     2578                                "call-bind": "^1.0.0",
     2579                                "define-properties": "^1.1.3",
     2580                                "es-abstract": "^1.18.0-next.1",
     2581                                "has": "^1.0.3"
     2582                        }
     2583                },
     2584                "object.values": {
    25192585                        "version": "1.1.2",
    2520                         "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.2.tgz",
    2521                         "integrity": "sha512-BQdB9qKmb/HyNdMNWVr7O3+z5MUIx3aiegEIJqjMBbBf0YT9RRxTJSim4mzFqtyr7PDAHigq0N9dO0m0tRakQA==",
    2522                         "dev": true,
    2523                         "requires": {
     2586                        "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.2.tgz",
     2587                        "integrity": "sha512-MYC0jvJopr8EK6dPBiO8Nb9mvjdypOachO5REGk6MXzujbBrAisKo3HmdEI6kZDL6fC31Mwee/5YbtMebixeag==",
     2588                        "dev": true,
     2589                        "requires": {
     2590                                "call-bind": "^1.0.0",
    25242591                                "define-properties": "^1.1.3",
    2525                                 "es-abstract": "^1.17.5",
    2526                                 "has": "^1.0.3"
    2527                         }
    2528                 },
    2529                 "object.fromentries": {
    2530                         "version": "2.0.2",
    2531                         "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.2.tgz",
    2532                         "integrity": "sha512-r3ZiBH7MQppDJVLx6fhD618GKNG40CZYH9wgwdhKxBDDbQgjeWGGd4AtkZad84d291YxvWe7bJGuE65Anh0dxQ==",
    2533                         "dev": true,
    2534                         "requires": {
    2535                                 "define-properties": "^1.1.3",
    2536                                 "es-abstract": "^1.17.0-next.1",
    2537                                 "function-bind": "^1.1.1",
    2538                                 "has": "^1.0.3"
    2539                         }
    2540                 },
    2541                 "object.values": {
    2542                         "version": "1.1.1",
    2543                         "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.1.tgz",
    2544                         "integrity": "sha512-WTa54g2K8iu0kmS/us18jEmdv1a4Wi//BZ/DTVYEcH0XhLM5NYdpDHja3gt57VrZLcNAO2WGA+KpWsDBaHt6eA==",
    2545                         "dev": true,
    2546                         "requires": {
    2547                                 "define-properties": "^1.1.3",
    2548                                 "es-abstract": "^1.17.0-next.1",
    2549                                 "function-bind": "^1.1.1",
     2592                                "es-abstract": "^1.18.0-next.1",
    25502593                                "has": "^1.0.3"
    25512594                        }
    … …  
    31293172                        "dev": true
    31303173                },
     3174                "prettier": {
     3175                        "version": "npm:wp-prettier@2.0.5",
     3176                        "resolved": "https://registry.npmjs.org/wp-prettier/-/wp-prettier-2.0.5.tgz",
     3177                        "integrity": "sha512-5GCgdeevIXwR3cW4Qj5XWC5MO1iSCz8+IPn0mMw6awAt/PBiey8yyO7MhePRsaMqghJAhg6Q3QLYWSnUHWkG6A==",
     3178                        "dev": true
     3179                },
    31313180                "prettier-linter-helpers": {
    31323181                        "version": "1.0.0",
    … …  
    33293378                                "define-properties": "^1.1.3",
    33303379                                "es-abstract": "^1.17.0-next.1"
     3380                        },
     3381                        "dependencies": {
     3382                                "es-abstract": {
     3383                                        "version": "1.17.7",
     3384                                        "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.7.tgz",
     3385                                        "integrity": "sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g==",
     3386                                        "dev": true,
     3387                                        "requires": {
     3388                                                "es-to-primitive": "^1.2.1",
     3389                                                "function-bind": "^1.1.1",
     3390                                                "has": "^1.0.3",
     3391                                                "has-symbols": "^1.0.1",
     3392                                                "is-callable": "^1.2.2",
     3393                                                "is-regex": "^1.1.1",
     3394                                                "object-inspect": "^1.8.0",
     3395                                                "object-keys": "^1.1.1",
     3396                                                "object.assign": "^4.1.1",
     3397                                                "string.prototype.trimend": "^1.0.1",
     3398                                                "string.prototype.trimstart": "^1.0.1"
     3399                                        }
     3400                                }
    33313401                        }
    33323402                },
    … …  
    33443414                },
    33453415                "remark": {
    3346                         "version": "12.0.1",
    3347                         "resolved": "https://registry.npmjs.org/remark/-/remark-12.0.1.tgz",
    3348                         "integrity": "sha512-gS7HDonkdIaHmmP/+shCPejCEEW+liMp/t/QwmF0Xt47Rpuhl32lLtDV1uKWvGoq+kxr5jSgg5oAIpGuyULjUw==",
    3349                         "dev": true,
    3350                         "requires": {
    3351                                 "remark-parse": "^8.0.0",
    3352                                 "remark-stringify": "^8.0.0",
    3353                                 "unified": "^9.0.0"
     3416                        "version": "13.0.0",
     3417                        "resolved": "https://registry.npmjs.org/remark/-/remark-13.0.0.tgz",
     3418                        "integrity": "sha512-HDz1+IKGtOyWN+QgBiAT0kn+2s6ovOxHyPAFGKVE81VSzJ+mq7RwHFledEvB5F1p4iJvOah/LOKdFuzvRnNLCA==",
     3419                        "dev": true,
     3420                        "requires": {
     3421                                "remark-parse": "^9.0.0",
     3422                                "remark-stringify": "^9.0.0",
     3423                                "unified": "^9.1.0"
    33543424                        }
    33553425                },
    33563426                "remark-parse": {
    3357                         "version": "8.0.3",
    3358                         "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-8.0.3.tgz",
    3359                         "integrity": "sha512-E1K9+QLGgggHxCQtLt++uXltxEprmWzNfg+MxpfHsZlrddKzZ/hZyWHDbK3/Ap8HJQqYJRXP+jHczdL6q6i85Q==",
    3360                         "dev": true,
    3361                         "requires": {
    3362                                 "ccount": "^1.0.0",
    3363                                 "collapse-white-space": "^1.0.2",
    3364                                 "is-alphabetical": "^1.0.0",
    3365                                 "is-decimal": "^1.0.0",
    3366                                 "is-whitespace-character": "^1.0.0",
    3367                                 "is-word-character": "^1.0.0",
    3368                                 "markdown-escapes": "^1.0.0",
    3369                                 "parse-entities": "^2.0.0",
    3370                                 "repeat-string": "^1.5.4",
    3371                                 "state-toggle": "^1.0.0",
    3372                                 "trim": "0.0.1",
    3373                                 "trim-trailing-lines": "^1.0.0",
    3374                                 "unherit": "^1.0.4",
    3375                                 "unist-util-remove-position": "^2.0.0",
    3376                                 "vfile-location": "^3.0.0",
    3377                                 "xtend": "^4.0.1"
     3427                        "version": "9.0.0",
     3428                        "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-9.0.0.tgz",
     3429                        "integrity": "sha512-geKatMwSzEXKHuzBNU1z676sGcDcFoChMK38TgdHJNAYfFtsfHDQG7MoJAjs6sgYMqyLduCYWDIWZIxiPeafEw==",
     3430                        "dev": true,
     3431                        "requires": {
     3432                                "mdast-util-from-markdown": "^0.8.0"
    33783433                        }
    33793434                },
    33803435                "remark-stringify": {
    3381                         "version": "8.1.1",
    3382                         "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-8.1.1.tgz",
    3383                         "integrity": "sha512-q4EyPZT3PcA3Eq7vPpT6bIdokXzFGp9i85igjmhRyXWmPs0Y6/d2FYwUNotKAWyLch7g0ASZJn/KHHcHZQ163A==",
    3384                         "dev": true,
    3385                         "requires": {
    3386                                 "ccount": "^1.0.0",
    3387                                 "is-alphanumeric": "^1.0.0",
    3388                                 "is-decimal": "^1.0.0",
    3389                                 "is-whitespace-character": "^1.0.0",
    3390                                 "longest-streak": "^2.0.1",
    3391                                 "markdown-escapes": "^1.0.0",
    3392                                 "markdown-table": "^2.0.0",
    3393                                 "mdast-util-compact": "^2.0.0",
    3394                                 "parse-entities": "^2.0.0",
    3395                                 "repeat-string": "^1.5.4",
    3396                                 "state-toggle": "^1.0.0",
    3397                                 "stringify-entities": "^3.0.0",
    3398                                 "unherit": "^1.0.4",
    3399                                 "xtend": "^4.0.1"
     3436                        "version": "9.0.0",
     3437                        "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-9.0.0.tgz",
     3438                        "integrity": "sha512-8x29DpTbVzEc6Dwb90qhxCtbZ6hmj3BxWWDpMhA+1WM4dOEGH5U5/GFe3Be5Hns5MvPSFAr1e2KSVtKZkK5nUw==",
     3439                        "dev": true,
     3440                        "requires": {
     3441                                "mdast-util-to-markdown": "^0.5.0"
    34003442                        }
    34013443                },
    … …  
    34623504                },
    34633505                "rtlcss": {
    3464                         "version": "2.6.1",
    3465                         "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-2.6.1.tgz",
    3466                         "integrity": "sha512-WoKAYLxT123Gh/9dAPeMY0YWBx6D7IjORJhTbmmq8UJI4zaSxsA0uqPWsXEqGgZT2HEGtxWkhkIZ6g1IvOQ+eg==",
     3506                        "version": "2.6.2",
     3507                        "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-2.6.2.tgz",
     3508                        "integrity": "sha512-06LFAr+GAPo+BvaynsXRfoYTJvSaWRyOhURCQ7aeI1MKph9meM222F+Zkt3bDamyHHJuGi3VPtiRkpyswmQbGA==",
    34673509                        "dev": true,
    34683510                        "requires": {
    … …  
    35613603                                "es-abstract": "^1.18.0-next.0",
    35623604                                "object-inspect": "^1.8.0"
    3563                         },
    3564                         "dependencies": {
    3565                                 "es-abstract": {
    3566                                         "version": "1.18.0-next.1",
    3567                                         "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.1.tgz",
    3568                                         "integrity": "sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==",
    3569                                         "dev": true,
    3570                                         "requires": {
    3571                                                 "es-to-primitive": "^1.2.1",
    3572                                                 "function-bind": "^1.1.1",
    3573                                                 "has": "^1.0.3",
    3574                                                 "has-symbols": "^1.0.1",
    3575                                                 "is-callable": "^1.2.2",
    3576                                                 "is-negative-zero": "^2.0.0",
    3577                                                 "is-regex": "^1.1.1",
    3578                                                 "object-inspect": "^1.8.0",
    3579                                                 "object-keys": "^1.1.1",
    3580                                                 "object.assign": "^4.1.1",
    3581                                                 "string.prototype.trimend": "^1.0.1",
    3582                                                 "string.prototype.trimstart": "^1.0.1"
    3583                                         }
    3584                                 }
    35853605                        }
    35863606                },
    … …  
    36413661                },
    36423662                "spdx-license-ids": {
    3643                         "version": "3.0.6",
    3644                         "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.6.tgz",
    3645                         "integrity": "sha512-+orQK83kyMva3WyPf59k1+Y525csj5JejicWut55zeTWANuN17qSiSLUXWtzHeNWORSvT7GLDJ/E/XiIWoXBTw==",
     3663                        "version": "3.0.7",
     3664                        "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.7.tgz",
     3665                        "integrity": "sha512-U+MTEOO0AiDzxwFvoa4JVnMV6mZlJKk2sBLt90s7G0Gd0Mlknc7kxEn3nuDPNZRta7O2uy8oLcZLVT+4sqNZHQ==",
    36463666                        "dev": true
    36473667                },
    … …  
    36563676                        "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
    36573677                        "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
    3658                         "dev": true
    3659                 },
    3660                 "state-toggle": {
    3661                         "version": "1.0.3",
    3662                         "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz",
    3663                         "integrity": "sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ==",
    36643678                        "dev": true
    36653679                },
    … …  
    36843698                },
    36853699                "string.prototype.matchall": {
    3686                         "version": "4.0.2",
    3687                         "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.2.tgz",
    3688                         "integrity": "sha512-N/jp6O5fMf9os0JU3E72Qhf590RSRZU/ungsL/qJUYVTNv7hTG0P/dbPjxINVN9jpscu3nzYwKESU3P3RY5tOg==",
    3689                         "dev": true,
    3690                         "requires": {
     3700                        "version": "4.0.3",
     3701                        "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.3.tgz",
     3702                        "integrity": "sha512-OBxYDA2ifZQ2e13cP82dWFMaCV9CGF8GzmN4fljBVw5O5wep0lu4gacm1OL6MjROoUnB8VbkWRThqkV2YFLNxw==",
     3703                        "dev": true,
     3704                        "requires": {
     3705                                "call-bind": "^1.0.0",
    36913706                                "define-properties": "^1.1.3",
    3692                                 "es-abstract": "^1.17.0",
     3707                                "es-abstract": "^1.18.0-next.1",
    36933708                                "has-symbols": "^1.0.1",
    36943709                                "internal-slot": "^1.0.2",
    36953710                                "regexp.prototype.flags": "^1.3.0",
    3696                                 "side-channel": "^1.0.2"
     3711                                "side-channel": "^1.0.3"
    36973712                        }
    36983713                },
    36993714                "string.prototype.padend": {
    3700                         "version": "3.1.0",
    3701                         "resolved": "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.0.tgz",
    3702                         "integrity": "sha512-3aIv8Ffdp8EZj8iLwREGpQaUZiPyrWrpzMBHvkiSW/bK/EGve9np07Vwy7IJ5waydpGXzQZu/F8Oze2/IWkBaA==",
    3703                         "dev": true,
    3704                         "requires": {
    3705                                 "define-properties": "^1.1.3",
    3706                                 "es-abstract": "^1.17.0-next.1"
    3707                         }
    3708                 },
    3709                 "string.prototype.trimend": {
    3710                         "version": "1.0.2",
    3711                         "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.2.tgz",
    3712                         "integrity": "sha512-8oAG/hi14Z4nOVP0z6mdiVZ/wqjDtWSLygMigTzAb+7aPEDTleeFf+WrF+alzecxIRkckkJVn+dTlwzJXORATw==",
    3713                         "dev": true,
    3714                         "requires": {
     3715                        "version": "3.1.1",
     3716                        "resolved": "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.1.tgz",
     3717                        "integrity": "sha512-eCzTASPnoCr5Ht+Vn1YXgm8SB015hHKgEIMu9Nr9bQmLhRBxKRfmzSj/IQsxDFc8JInJDDFA0qXwK+xxI7wDkg==",
     3718                        "dev": true,
     3719                        "requires": {
     3720                                "call-bind": "^1.0.0",
    37153721                                "define-properties": "^1.1.3",
    37163722                                "es-abstract": "^1.18.0-next.1"
    3717                         },
    3718                         "dependencies": {
    3719                                 "es-abstract": {
    3720                                         "version": "1.18.0-next.1",
    3721                                         "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.1.tgz",
    3722                                         "integrity": "sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==",
    3723                                         "dev": true,
    3724                                         "requires": {
    3725                                                 "es-to-primitive": "^1.2.1",
    3726                                                 "function-bind": "^1.1.1",
    3727                                                 "has": "^1.0.3",
    3728                                                 "has-symbols": "^1.0.1",
    3729                                                 "is-callable": "^1.2.2",
    3730                                                 "is-negative-zero": "^2.0.0",
    3731                                                 "is-regex": "^1.1.1",
    3732                                                 "object-inspect": "^1.8.0",
    3733                                                 "object-keys": "^1.1.1",
    3734                                                 "object.assign": "^4.1.1",
    3735                                                 "string.prototype.trimend": "^1.0.1",
    3736                                                 "string.prototype.trimstart": "^1.0.1"
    3737                                         }
    3738                                 }
     3723                        }
     3724                },
     3725                "string.prototype.trimend": {
     3726                        "version": "1.0.3",
     3727                        "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.3.tgz",
     3728                        "integrity": "sha512-ayH0pB+uf0U28CtjlLvL7NaohvR1amUvVZk+y3DYb0Ey2PUV5zPkkKy9+U1ndVEIXO8hNg18eIv9Jntbii+dKw==",
     3729                        "dev": true,
     3730                        "requires": {
     3731                                "call-bind": "^1.0.0",
     3732                                "define-properties": "^1.1.3"
    37393733                        }
    37403734                },
    37413735                "string.prototype.trimstart": {
    3742                         "version": "1.0.2",
    3743                         "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.2.tgz",
    3744                         "integrity": "sha512-7F6CdBTl5zyu30BJFdzSTlSlLPwODC23Od+iLoVH8X6+3fvDPPuBVVj9iaB1GOsSTSIgVfsfm27R2FGrAPznWg==",
    3745                         "dev": true,
    3746                         "requires": {
    3747                                 "define-properties": "^1.1.3",
    3748                                 "es-abstract": "^1.18.0-next.1"
    3749                         },
    3750                         "dependencies": {
    3751                                 "es-abstract": {
    3752                                         "version": "1.18.0-next.1",
    3753                                         "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.1.tgz",
    3754                                         "integrity": "sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==",
    3755                                         "dev": true,
    3756                                         "requires": {
    3757                                                 "es-to-primitive": "^1.2.1",
    3758                                                 "function-bind": "^1.1.1",
    3759                                                 "has": "^1.0.3",
    3760                                                 "has-symbols": "^1.0.1",
    3761                                                 "is-callable": "^1.2.2",
    3762                                                 "is-negative-zero": "^2.0.0",
    3763                                                 "is-regex": "^1.1.1",
    3764                                                 "object-inspect": "^1.8.0",
    3765                                                 "object-keys": "^1.1.1",
    3766                                                 "object.assign": "^4.1.1",
    3767                                                 "string.prototype.trimend": "^1.0.1",
    3768                                                 "string.prototype.trimstart": "^1.0.1"
    3769                                         }
    3770                                 }
     3736                        "version": "1.0.3",
     3737                        "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.3.tgz",
     3738                        "integrity": "sha512-oBIBUy5lea5tt0ovtOFiEQaBkoBBkyJhZXzJYrSmDo5IUUqbOPvVezuRs/agBIdZ2p2Eo1FD6bD9USyBLfl3xg==",
     3739                        "dev": true,
     3740                        "requires": {
     3741                                "call-bind": "^1.0.0",
     3742                                "define-properties": "^1.1.3"
    37713743                        }
    37723744                },
    … …  
    37883760                        }
    37893761                },
    3790                 "stringify-entities": {
    3791                         "version": "3.1.0",
    3792                         "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-3.1.0.tgz",
    3793                         "integrity": "sha512-3FP+jGMmMV/ffZs86MoghGqAoqXAdxLrJP4GUdrDN1aIScYih5tuIO3eF4To5AJZ79KDZ8Fpdy7QJnK8SsL1Vg==",
    3794                         "dev": true,
    3795                         "requires": {
    3796                                 "character-entities-html4": "^1.0.0",
    3797                                 "character-entities-legacy": "^1.0.0",
    3798                                 "xtend": "^4.0.0"
    3799                         }
    3800                 },
    38013762                "strip-ansi": {
    38023763                        "version": "5.2.0",
    … …  
    38363797                },
    38373798                "stylelint": {
    3838                         "version": "13.7.2",
    3839                         "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-13.7.2.tgz",
    3840                         "integrity": "sha512-mmieorkfmO+ZA6CNDu1ic9qpt4tFvH2QUB7vqXgrMVHe5ENU69q7YDq0YUg/UHLuCsZOWhUAvcMcLzLDIERzSg==",
     3799                        "version": "13.8.0",
     3800                        "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-13.8.0.tgz",
     3801                        "integrity": "sha512-iHH3dv3UI23SLDrH4zMQDjLT9/dDIz/IpoFeuNxZmEx86KtfpjDOscxLTFioQyv+2vQjPlRZnK0UoJtfxLICXQ==",
    38413802                        "dev": true,
    38423803                        "requires": {
    38433804                                "@stylelint/postcss-css-in-js": "^0.37.2",
    3844                                 "@stylelint/postcss-markdown": "^0.36.1",
     3805                                "@stylelint/postcss-markdown": "^0.36.2",
    38453806                                "autoprefixer": "^9.8.6",
    38463807                                "balanced-match": "^1.0.0",
    38473808                                "chalk": "^4.1.0",
    38483809                                "cosmiconfig": "^7.0.0",
    3849                                 "debug": "^4.1.1",
     3810                                "debug": "^4.2.0",
    38503811                                "execall": "^2.0.0",
    38513812                                "fast-glob": "^3.2.4",
    38523813                                "fastest-levenshtein": "^1.0.12",
    3853                                 "file-entry-cache": "^5.0.1",
     3814                                "file-entry-cache": "^6.0.0",
    38543815                                "get-stdin": "^8.0.0",
    38553816                                "global-modules": "^2.0.0",
    … …  
    38603821                                "import-lazy": "^4.0.0",
    38613822                                "imurmurhash": "^0.1.4",
    3862                                 "known-css-properties": "^0.19.0",
     3823                                "known-css-properties": "^0.20.0",
    38633824                                "lodash": "^4.17.20",
    38643825                                "log-symbols": "^4.0.0",
    38653826                                "mathml-tag-names": "^2.1.3",
    3866                                 "meow": "^7.1.1",
     3827                                "meow": "^8.0.0",
    38673828                                "micromatch": "^4.0.2",
    38683829                                "normalize-selector": "^0.2.0",
    3869                                 "postcss": "^7.0.32",
     3830                                "postcss": "^7.0.35",
    38703831                                "postcss-html": "^0.36.0",
    38713832                                "postcss-less": "^3.1.4",
    … …  
    38753836                                "postcss-sass": "^0.4.4",
    38763837                                "postcss-scss": "^2.1.1",
    3877                                 "postcss-selector-parser": "^6.0.2",
     3838                                "postcss-selector-parser": "^6.0.4",
    38783839                                "postcss-syntax": "^0.36.2",
    38793840                                "postcss-value-parser": "^4.1.0",
    … …  
    38863847                                "sugarss": "^2.0.0",
    38873848                                "svg-tags": "^1.0.0",
    3888                                 "table": "^6.0.1",
    3889                                 "v8-compile-cache": "^2.1.1",
     3849                                "table": "^6.0.3",
     3850                                "v8-compile-cache": "^2.2.0",
    38903851                                "write-file-atomic": "^3.0.3"
    38913852                        },
    … …  
    39433904                                        "dev": true
    39443905                                },
     3906                                "file-entry-cache": {
     3907                                        "version": "6.0.0",
     3908                                        "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.0.tgz",
     3909                                        "integrity": "sha512-fqoO76jZ3ZnYrXLDRxBR1YvOvc0k844kcOg40bgsPrE25LAb/PDqTY+ho64Xh2c8ZXgIKldchCFHczG2UVRcWA==",
     3910                                        "dev": true,
     3911                                        "requires": {
     3912                                                "flat-cache": "^3.0.4"
     3913                                        }
     3914                                },
     3915                                "flat-cache": {
     3916                                        "version": "3.0.4",
     3917                                        "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
     3918                                        "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
     3919                                        "dev": true,
     3920                                        "requires": {
     3921                                                "flatted": "^3.1.0",
     3922                                                "rimraf": "^3.0.2"
     3923                                        }
     3924                                },
     3925                                "flatted": {
     3926                                        "version": "3.1.0",
     3927                                        "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.1.0.tgz",
     3928                                        "integrity": "sha512-tW+UkmtNg/jv9CSofAKvgVcO7c2URjhTdW1ZTkcAritblu8tajiYy7YisnIflEwtKssCtOxpnBRoCB7iap0/TA==",
     3929                                        "dev": true
     3930                                },
    39453931                                "get-stdin": {
    39463932                                        "version": "8.0.0",
    … …  
    39823968                                        "dev": true
    39833969                                },
     3970                                "rimraf": {
     3971                                        "version": "3.0.2",
     3972                                        "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
     3973                                        "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
     3974                                        "dev": true,
     3975                                        "requires": {
     3976                                                "glob": "^7.1.3"
     3977                                        }
     3978                                },
    39843979                                "slice-ansi": {
    39853980                                        "version": "4.0.0",
    … …  
    40234018                                },
    40244019                                "table": {
    4025                                         "version": "6.0.3",
    4026                                         "resolved": "https://registry.npmjs.org/table/-/table-6.0.3.tgz",
    4027                                         "integrity": "sha512-8321ZMcf1B9HvVX/btKv8mMZahCjn2aYrDlpqHaBFCfnox64edeH9kEid0vTLTRR8gWR2A20aDgeuTTea4sVtw==",
     4020                                        "version": "6.0.4",
     4021                                        "resolved": "https://registry.npmjs.org/table/-/table-6.0.4.tgz",
     4022                                        "integrity": "sha512-sBT4xRLdALd+NFBvwOz8bw4b15htyythha+q+DVZqy2RS08PPC8O2sZFgJYEY7bJvbCFKccs+WIZ/cd+xxTWCw==",
    40284023                                        "dev": true,
    40294024                                        "requires": {
    … …  
    41324127                        }
    41334128                },
    4134                 "trim": {
    4135                         "version": "0.0.1",
    4136                         "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
    4137                         "integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0=",
    4138                         "dev": true
    4139                 },
    41404129                "trim-newlines": {
    41414130                        "version": "3.0.0",
    … …  
    41444133                        "dev": true
    41454134                },
    4146                 "trim-trailing-lines": {
    4147                         "version": "1.1.4",
    4148                         "resolved": "https://registry.npmjs.org/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz",
    4149                         "integrity": "sha512-rjUWSqnfTNrjbB9NQWfPMH/xRK1deHeGsHoVfpxJ++XeYXE0d6B1En37AHfw3jtfTU7dzMzZL2jjpe8Qb5gLIQ==",
    4150                         "dev": true
    4151                 },
    41524135                "trough": {
    41534136                        "version": "1.0.5",
    … …  
    41934176                        "requires": {
    41944177                                "is-typedarray": "^1.0.0"
    4195                         }
    4196                 },
    4197                 "unherit": {
    4198                         "version": "1.1.3",
    4199                         "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.3.tgz",
    4200                         "integrity": "sha512-Ft16BJcnapDKp0+J/rqFC3Rrk6Y/Ng4nzsC028k2jdDII/rdZ7Wd3pPT/6+vIIxRagwRc9K0IUX0Ra4fKvw+WQ==",
    4201                         "dev": true,
    4202                         "requires": {
    4203                                 "inherits": "^2.0.0",
    4204                                 "xtend": "^4.0.0"
    42054178                        }
    42064179                },
    … …  
    42354208                },
    42364209                "unist-util-is": {
    4237                         "version": "4.0.3",
    4238                         "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.0.3.tgz",
    4239                         "integrity": "sha512-bTofCFVx0iQM8Jqb1TBDVRIQW03YkD3p66JOd/aCWuqzlLyUtx1ZAGw/u+Zw+SttKvSVcvTiKYbfrtLoLefykw==",
    4240                         "dev": true
    4241                 },
    4242                 "unist-util-remove-position": {
    4243                         "version": "2.0.1",
    4244                         "resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-2.0.1.tgz",
    4245                         "integrity": "sha512-fDZsLYIe2uT+oGFnuZmy73K6ZxOPG/Qcm+w7jbEjaFcJgbQ6cqjs/eSPzXhsmGpAsWPkqZM9pYjww5QTn3LHMA==",
    4246                         "dev": true,
    4247                         "requires": {
    4248                                 "unist-util-visit": "^2.0.0"
    4249                         }
     4210                        "version": "4.0.4",
     4211                        "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.0.4.tgz",
     4212                        "integrity": "sha512-3dF39j/u423v4BBQrk1AQ2Ve1FxY5W3JKwXxVFzBODQ6WEvccguhgp802qQLKSnxPODE6WuRZtV+ohlUg4meBA==",
     4213                        "dev": true
    42504214                },
    42514215                "unist-util-stringify-position": {
    … …  
    42564220                        "requires": {
    42574221                                "@types/unist": "^2.0.2"
    4258                         }
    4259                 },
    4260                 "unist-util-visit": {
    4261                         "version": "2.0.3",
    4262                         "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz",
    4263                         "integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==",
    4264                         "dev": true,
    4265                         "requires": {
    4266                                 "@types/unist": "^2.0.0",
    4267                                 "unist-util-is": "^4.0.0",
    4268                                 "unist-util-visit-parents": "^3.0.0"
    4269                         }
    4270                 },
    4271                 "unist-util-visit-parents": {
    4272                         "version": "3.1.1",
    4273                         "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz",
    4274                         "integrity": "sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==",
    4275                         "dev": true,
    4276                         "requires": {
    4277                                 "@types/unist": "^2.0.0",
    4278                                 "unist-util-is": "^4.0.0"
    42794222                        }
    42804223                },
    … …  
    43294272                        }
    43304273                },
    4331                 "vfile-location": {
    4332                         "version": "3.2.0",
    4333                         "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-3.2.0.tgz",
    4334                         "integrity": "sha512-aLEIZKv/oxuCDZ8lkJGhuhztf/BW4M+iHdCwglA/eWc+vtuRFJj8EtgceYFX4LRjOhCAAiNHsKGssC6onJ+jbA==",
    4335                         "dev": true
    4336                 },
    43374274                "vfile-message": {
    43384275                        "version": "2.0.4",
    … …  
    44044341                        }
    44054342                },
    4406                 "xtend": {
    4407                         "version": "4.0.2",
    4408                         "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
    4409                         "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
    4410                         "dev": true
    4411                 },
    44124343                "y18n": {
     4344                        "version": "4.0.1",
     4345                        "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.1.tgz",
     4346                        "integrity": "sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ==",
     4347                        "dev": true
     4348                },
     4349                "yallist": {
    44134350                        "version": "4.0.0",
    4414                         "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
    4415                         "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==",
     4351                        "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
     4352                        "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
    44164353                        "dev": true
    44174354                },
    … …  
    44494386                                "decamelize": "^1.2.0"
    44504387                        }
     4388                },
     4389                "zwitch": {
     4390                        "version": "1.0.5",
     4391                        "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz",
     4392                        "integrity": "sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==",
     4393                        "dev": true
    44514394                }
    44524395        }

  • branches/5.6/src/wp-content/themes/twentytwentyone/package.json

    r49574 r49728  
    1010        ],
    1111        "bugs": {
    12                 "url": "https://github.com/wordpress/twentytwentyone"
     12                "url": "https://core.trac.wordpress.org/"
    1313        },
    14         "homepage": "https://github.com/wordpress/twentytwentyone",
     14        "homepage": "https://wordpress.org/themes/twentytwentyone/",
    1515        "devDependencies": {
    1616                "@wordpress/browserslist-config": "^2.2.2",

  • branches/5.6/src/wp-content/themes/twentytwentyone/style-rtl.css

    r49574 r49728  
    11751175        font-size: var(--quote--font-size);
    11761176        line-height: var(--quote--line-height);
     1177        position: absolute;
     1178        right: calc(-0.5 * var(--global--spacing-horizontal));
    11771179}
    11781180
    … …  
    14491451                -webkit-appearance: none;
    14501452                border: 3px solid var(--form--color-ranged);
    1451                 height: 25px;
    1452                 width: 25px;
     1453                height: 44px;
     1454                width: 44px;
    14531455                border-radius: 50%;
    14541456                background: var(--global--color-background);
    … …  
    14581460        input[type=range]::-moz-range-thumb {
    14591461                border: 3px solid var(--form--color-ranged);
    1460                 height: 25px;
    1461                 width: 25px;
     1462                height: 44px;
     1463                width: 44px;
    14621464                border-radius: 50%;
    14631465                background: var(--global--color-background);
    14641466                cursor: pointer;
     1467                box-sizing: border-box;
    14651468        }
    14661469}
    … …  
    14891492input[type=range]::-ms-thumb {
    14901493        border: 3px solid var(--form--color-ranged);
    1491         height: 25px;
    1492         width: 25px;
     1494        height: 44px;
     1495        width: 44px;
    14931496        border-radius: 50%;
    14941497        background: var(--global--color-background);
    … …  
    15821585figcaption,
    15831586.wp-caption,
    1584 .wp-caption-text {
     1587.wp-caption-text,
     1588.wp-block-embed figcaption {
    15851589        color: currentColor;
    15861590        font-size: var(--global--font-size-xs);
    … …  
    15961600.alignright .wp-caption,
    15971601.alignleft .wp-caption-text,
    1598 .alignright .wp-caption-text {
     1602.alignright .wp-caption-text,
     1603.alignleft .wp-block-embed figcaption,
     1604.alignright .wp-block-embed figcaption {
    15991605        margin-bottom: 0;
    16001606}
    … …  
    16451651}
    16461652
    1647 .site a:focus {
     1653.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
    16481654
    16491655        /* Only visible in Windows High Contrast mode */
    16501656        outline: 2px solid transparent;
     1657        text-decoration: underline 1px dotted currentColor;
     1658        text-decoration-skip-ink: none;
    16511659        background: rgba(255, 255, 255, 0.9);
    16521660}
    16531661
    1654 .is-dark-theme .site a:focus,
    1655 .is-dark-theme .site a:focus .meta-nav {
     1662.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),
     1663.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
    16561664        color: var(--wp--style--color--link, var(--global--color-background));
    16571665}
    16581666
    1659 .has-background-white .site a:focus {
     1667.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
    16601668        background: rgba(0, 0, 0, 0.9);
    16611669        color: var(--wp--style--color--link, var(--global--color-white));
    16621670}
    16631671
    1664 .has-background-white .site a:focus .meta-nav {
     1672.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
    16651673        color: var(--wp--style--color--link, var(--global--color-white));
    16661674}
    16671675
    1668 .site a:focus.skip-link {
     1676.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link {
    16691677
    16701678        /* Only visible in Windows High Contrast mode */
    … …  
    16731681}
    16741682
    1675 .site a:focus.skip-link:focus {
     1683.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link:focus {
    16761684        color: #21759b;
    16771685        background-color: #f1f1f1;
    16781686}
    16791687
    1680 .site a:focus img {
     1688.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img {
    16811689        outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary));
    16821690}
    16831691
    1684 .has-background:not(.has-background-background-color) .has-link-color a,
    1685 .has-background:not(.has-background-background-color).has-link-color a {
     1692.has-background .has-link-color a,
     1693.has-background.has-link-color a {
    16861694        color: var(--wp--style--color--link, var(--global--color-primary));
    16871695}
    … …  
    17141722}
    17151723
    1716 .site .button:before,
    1717 .site .button:after,
    1718 input[type=submit]:before,
    1719 input[type=submit]:after,
    1720 input[type=reset]:before,
    1721 input[type=reset]:after,
    1722 .wp-block-search__button:before,
    1723 .wp-block-search__button:after,
    1724 .wp-block-button .wp-block-button__link:before,
    1725 .wp-block-button .wp-block-button__link:after {
    1726         content: "";
    1727         display: block;
    1728         height: 0;
    1729         width: 0;
    1730 }
    1731 
    1732 .site .button:before,
    1733 input[type=submit]:before,
    1734 input[type=reset]:before,
    1735 .wp-block-search__button:before,
    1736 .wp-block-button .wp-block-button__link:before {
    1737         margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
    1738 }
    1739 
    1740 .site .button:after,
    1741 input[type=submit]:after,
    1742 input[type=reset]:after,
    1743 .wp-block-search__button:after,
    1744 .wp-block-button .wp-block-button__link:after {
    1745         margin-top: -calc(.5em * var(--button--line-height) + -.39);
    1746 }
    1747 
    17481724.site .button:focus,
    17491725input[type=submit]:focus,
    … …  
    20272003}
    20282004
    2029 .wp-block-cover .wp-block-cover__inner-container a,
    2030 .wp-block-cover .wp-block-cover-image-text a,
    2031 .wp-block-cover .wp-block-cover-text a,
    2032 .wp-block-cover-image .wp-block-cover__inner-container a,
    2033 .wp-block-cover-image .wp-block-cover-image-text a,
    2034 .wp-block-cover-image .wp-block-cover-text a {
     2005.wp-block-cover .wp-block-cover__inner-container a:not(.wp-block-button__link):not(.wp-block-file__button),
     2006.wp-block-cover .wp-block-cover-image-text a:not(.wp-block-button__link):not(.wp-block-file__button),
     2007.wp-block-cover .wp-block-cover-text a:not(.wp-block-button__link):not(.wp-block-file__button),
     2008.wp-block-cover-image .wp-block-cover__inner-container a:not(.wp-block-button__link):not(.wp-block-file__button),
     2009.wp-block-cover-image .wp-block-cover-image-text a:not(.wp-block-button__link):not(.wp-block-file__button),
     2010.wp-block-cover-image .wp-block-cover-text a:not(.wp-block-button__link):not(.wp-block-file__button) {
    20352011        color: currentColor;
    20362012}
    … …  
    21662142        padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    21672143        display: inline-block;
    2168 }
    2169 
    2170 .wp-block-file .wp-block-file__button:before,
    2171 .wp-block-file .wp-block-file__button:after {
    2172         content: "";
    2173         display: block;
    2174         height: 0;
    2175         width: 0;
    2176 }
    2177 
    2178 .wp-block-file .wp-block-file__button:before {
    2179         margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
    2180 }
    2181 
    2182 .wp-block-file .wp-block-file__button:after {
    2183         margin-top: -calc(.5em * var(--button--line-height) + -.39);
    21842144}
    21852145
    … …  
    29212881        border-bottom-style: solid;
    29222882        border-top-style: solid;
     2883        color: currentColor;
     2884        border-color: currentColor;
    29232885        position: relative;
    29242886
    … …  
    29322894        content: "“";
    29332895        display: block;
     2896        position: relative;
     2897        right: 0;
    29342898        font-size: 3rem;
    29352899        font-weight: 500;
    … …  
    29652929}
    29662930
    2967 .wp-block-pullquote.alignleft blockquote:before,
    2968 .wp-block-pullquote.alignleft cite {
     2931.wp-block-pullquote.alignleft:not(.is-style-solid-color) blockquote:before,
     2932.wp-block-pullquote.alignleft:not(.is-style-solid-color) cite {
    29692933        text-align: center;
    29702934}
    … …  
    29992963
    30002964.wp-block-pullquote.is-style-solid-color blockquote {
     2965        margin: 0;
    30012966        max-width: inherit;
    30022967}
    … …  
    30122977}
    30132978
     2979.wp-block-pullquote.is-style-solid-color.alignleft,
     2980.wp-block-pullquote.is-style-solid-color.alignright {
     2981        padding: var(--global--spacing-unit);
     2982}
     2983
     2984.wp-block-pullquote.is-style-solid-color.alignleft blockquote,
     2985.wp-block-pullquote.is-style-solid-color.alignright blockquote {
     2986        max-width: initial;
     2987}
     2988
    30142989.wp-block-quote {
     2990        border-right: none;
    30152991
    30162992        /**
    … …  
    30192995}
    30202996
    3021 .has-background:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
    3022 [class*=background-color]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
     2997.wp-block-quote:before {
     2998        content: "“";
     2999        font-size: var(--quote--font-size);
     3000        line-height: var(--quote--line-height);
     3001        right: 8px;
     3002}
     3003
     3004.has-background .wp-block-quote .wp-block-quote__citation,
     3005[class*=background-color] .wp-block-quote .wp-block-quote__citation,
    30233006[style*=background-color] .wp-block-quote .wp-block-quote__citation,
    30243007.wp-block-cover[style*=background-image] .wp-block-quote .wp-block-quote__citation,
    3025 .has-background:not(.has-background-background-color) .wp-block-quote cite,
    3026 [class*=background-color]:not(.has-background-background-color) .wp-block-quote cite,
     3008.has-background .wp-block-quote cite,
     3009[class*=background-color] .wp-block-quote cite,
    30273010[style*=background-color] .wp-block-quote cite,
    30283011.wp-block-cover[style*=background-image] .wp-block-quote cite,
    3029 .has-background:not(.has-background-background-color) .wp-block-quote footer,
    3030 [class*=background-color]:not(.has-background-background-color) .wp-block-quote footer,
     3012.has-background .wp-block-quote footer,
     3013[class*=background-color] .wp-block-quote footer,
    30313014[style*=background-color] .wp-block-quote footer,
    30323015.wp-block-cover[style*=background-image] .wp-block-quote footer {
    … …  
    30413024
    30423025.wp-block-quote.has-text-align-right:before {
     3026        display: none;
     3027}
     3028
     3029.wp-block-quote.has-text-align-right p:before {
    30433030        content: "”";
    3044         right: initial;
    3045         left: calc(-0.5 * var(--global--spacing-horizontal));
     3031        font-size: var(--quote--font-size);
     3032        font-weight: normal;
     3033        line-height: var(--quote--line-height);
     3034        margin-left: 5px;
    30463035}
    30473036
    … …  
    30803069.wp-block-quote.is-large.has-text-align-right:before,
    30813070.wp-block-quote.is-style-large.has-text-align-right:before {
    3082         right: initial;
    3083         left: calc(-1 * var(--global--spacing-horizontal));
     3071        display: none;
     3072}
     3073
     3074.wp-block-quote.is-large.has-text-align-right p:before,
     3075.wp-block-quote.is-style-large.has-text-align-right p:before {
     3076        content: "”";
     3077        font-size: var(--quote--font-size-large);
     3078        font-weight: normal;
     3079        line-height: var(--quote--line-height-large);
     3080        margin-left: 10px;
    30843081}
    30853082
    … …  
    32433240}
    32443241
    3245 .wp-block-search__button-inside .wp-block-search__inside-wrapper {
    3246         background-color: var(--global--color-white);
    3247 }
    3248 
    32493242.wp-block-search__button-only.aligncenter .wp-block-search__inside-wrapper {
    32503243        justify-content: center;
    … …  
    32723265}
    32733266
    3274 .has-background:not(.has-background-background-color) .wp-block-search .wp-block-search__input,
    3275 [class*=background-color]:not(.has-background-background-color) .wp-block-search .wp-block-search__input,
     3267.has-background .wp-block-search .wp-block-search__input,
     3268[class*=background-color] .wp-block-search .wp-block-search__input,
    32763269[style*=background-color] .wp-block-search .wp-block-search__input,
    32773270.wp-block-cover[style*=background-image] .wp-block-search .wp-block-search__input {
    … …  
    33633356}
    33643357
     3358.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
     3359        background-color: var(--global--color-white);
     3360        border: var(--form--border-width) solid var(--form--border-color);
     3361        border-radius: var(--form--border-radius);
     3362}
     3363
     3364.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
     3365        margin-left: 0;
     3366}
     3367
     3368.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
     3369        outline: 2px dotted var(--form--border-color);
     3370        outline-offset: -5px;
     3371}
     3372
     3373.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
     3374        outline-color: currentColor;
     3375}
     3376
    33653377.wp-block-search.wp-block-search__button-inside.wp-block-search__text-button button.wp-block-search__button {
    33663378        padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    … …  
    34183430hr.wp-block-separator {
    34193431        border-bottom: var(--separator--height) solid var(--separator--border-color);
     3432        opacity: 1;
    34203433
    34213434        /**
    … …  
    34283441}
    34293442
    3430 hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull {
     3443hr.wp-block-separator:not(.is-style-dots).alignwide {
     3444        max-width: var(--responsive--alignwide-width);
     3445}
     3446
     3447hr.wp-block-separator:not(.is-style-dots).alignfull {
    34313448        max-width: var(--responsive--alignfull-width);
    34323449}
    … …  
    34533470}
    34543471
    3455 .has-background:not(.has-background-background-color) hr.wp-block-separator,
    3456 [class*=background-color]:not(.has-background-background-color) hr.wp-block-separator,
     3472.has-background hr.wp-block-separator,
     3473[class*=background-color] hr.wp-block-separator,
    34573474[style*=background-color] hr.wp-block-separator,
    34583475.wp-block-cover[style*=background-image] hr.wp-block-separator {
    34593476        border-color: currentColor;
     3477}
     3478
     3479.wp-block-social-links a:focus {
     3480        color: var(--global--color-primary);
    34603481}
    34613482
    … …  
    38533874}
    38543875
     3876.has-background-white a.custom-logo-link:focus,
     3877.is-dark-theme a.custom-logo-link:focus {
     3878        background: none;
     3879}
     3880
    38553881.site-title > a {
    38563882        text-decoration-color: var(--global--color-secondary);
    … …  
    39593985        margin-top: calc(6 * var(--global--spacing-vertical));
    39603986}
     3987@media only screen and (max-width: 481px) {
     3988
     3989        .no-widgets .site-footer {
     3990                margin-top: calc(3 * var(--global--spacing-vertical));
     3991        }
     3992}
    39613993
    39623994.site-footer > .site-info {
    … …  
    40104042.is-dark-theme .site-footer > .site-info a:focus {
    40114043        color: var(--wp--style--color--link, var(--global--color-background));
     4044}
     4045
     4046.has-background-white .site-footer > .site-info a:focus {
     4047        color: var(--wp--style--color--link, var(--global--color-white));
    40124048}
    40134049
    … …  
    49364972
    49374973        .primary-navigation .primary-menu-container > ul > .menu-item > a + .sub-menu-toggle {
    4938                 margin-right: calc(0px - var(--primary-nav--padding));
     4974                margin-right: calc(5px - var(--primary-nav--padding));
    49394975        }
    49404976}
    … …  
    49775013        z-index: 99999;
    49785014        outline-offset: 0;
     5015        text-decoration-thickness: 2px;
    49795016}
    49805017
    … …  
    51195156}
    51205157
     5158.has-background-white .footer-navigation-wrapper li a:focus .svg-icon {
     5159        fill: var(--wp--style--color--link, var(--global--color-white));
     5160}
     5161
    51215162.footer-navigation-wrapper li .svg-icon {
    51225163        vertical-align: middle;
    … …  
    51465187        color: var(--global--color-primary-hover);
    51475188        text-decoration: underline;
     5189        text-decoration-style: dotted;
    51485190}
    51495191
    … …  
    52615303}
    52625304
    5263 .post-navigation .nav-next:hover .post-title,
    5264 .post-navigation .nav-previous:hover .post-title {
    5265         text-decoration: underline;
    5266         text-decoration-thickness: 1px;
    5267 }
    5268 
    52695305.pagination,
    52705306.comments-pagination {
    … …  
    52895325.comments-pagination .nav-links a:hover {
    52905326        color: var(--pagination--color-link-hover);
     5327}
     5328
     5329.is-dark-theme .pagination .nav-links a:active,
     5330.is-dark-theme .pagination .nav-links a:hover:active,
     5331.is-dark-theme .pagination .nav-links a:hover:focus,
     5332.is-dark-theme .comments-pagination .nav-links a:active,
     5333.is-dark-theme .comments-pagination .nav-links a:hover:active,
     5334.is-dark-theme .comments-pagination .nav-links a:hover:focus {
     5335        color: var(--global--color-background);
     5336}
     5337
     5338.has-background-white .pagination .nav-links a:active,
     5339.has-background-white .pagination .nav-links a:hover:active,
     5340.has-background-white .pagination .nav-links a:hover:focus,
     5341.has-background-white .comments-pagination .nav-links a:active,
     5342.has-background-white .comments-pagination .nav-links a:hover:active,
     5343.has-background-white .comments-pagination .nav-links a:hover:focus {
     5344        color: var(--global--color-white);
    52915345}
    52925346
    … …  
    53045358.pagination .nav-links > *.current,
    53055359.comments-pagination .nav-links > *.current {
    5306         border-bottom: 1px solid var(--pagination--color-text);
     5360        text-decoration: underline;
     5361}
     5362
     5363.pagination .nav-links > *:not(.dots):not(.current):hover,
     5364.comments-pagination .nav-links > *:not(.dots):not(.current):hover {
     5365        text-decoration-style: dotted;
    53075366}
    53085367
    … …  
    53895448        .widget-area {
    53905449                grid-template-columns: repeat(3, 1fr);
     5450        }
     5451}
     5452@media only screen and (max-width: 481px) {
     5453
     5454        .widget-area {
     5455                margin-top: calc(3 * var(--global--spacing-vertical));
    53915456        }
    53925457}
    … …  
    55865651}
    55875652
    5588 .has-background:not(.has-background-background-color) a:not(.wp-block-button__link),
     5653.has-background a,
    55895654.has-background p,
    55905655.has-background h1,

  • branches/5.6/src/wp-content/themes/twentytwentyone/style.css

    r49574 r49728  
    11831183        font-size: var(--quote--font-size);
    11841184        line-height: var(--quote--line-height);
     1185        position: absolute;
     1186        left: calc(-0.5 * var(--global--spacing-horizontal));
    11851187}
    11861188
    … …  
    14591461                -webkit-appearance: none;
    14601462                border: 3px solid var(--form--color-ranged);
    1461                 height: 25px;
    1462                 width: 25px;
     1463                height: 44px;
     1464                width: 44px;
    14631465                border-radius: 50%;
    14641466                background: var(--global--color-background);
    … …  
    14681470        input[type=range]::-moz-range-thumb {
    14691471                border: 3px solid var(--form--color-ranged);
    1470                 height: 25px;
    1471                 width: 25px;
     1472                height: 44px;
     1473                width: 44px;
    14721474                border-radius: 50%;
    14731475                background: var(--global--color-background);
    14741476                cursor: pointer;
     1477                box-sizing: border-box;
    14751478        }
    14761479}
    … …  
    14991502input[type=range]::-ms-thumb {
    15001503        border: 3px solid var(--form--color-ranged);
    1501         height: 25px;
    1502         width: 25px;
     1504        height: 44px;
     1505        width: 44px;
    15031506        border-radius: 50%;
    15041507        background: var(--global--color-background);
    … …  
    15921595figcaption,
    15931596.wp-caption,
    1594 .wp-caption-text {
     1597.wp-caption-text,
     1598.wp-block-embed figcaption {
    15951599        color: currentColor;
    15961600        font-size: var(--global--font-size-xs);
    … …  
    16061610.alignright .wp-caption,
    16071611.alignleft .wp-caption-text,
    1608 .alignright .wp-caption-text {
     1612.alignright .wp-caption-text,
     1613.alignleft .wp-block-embed figcaption,
     1614.alignright .wp-block-embed figcaption {
    16091615        margin-bottom: 0;
    16101616}
    … …  
    16551661}
    16561662
    1657 .site a:focus {
     1663.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
    16581664
    16591665        /* Only visible in Windows High Contrast mode */
    16601666        outline: 2px solid transparent;
     1667        text-decoration: underline 1px dotted currentColor;
     1668        text-decoration-skip-ink: none;
    16611669        background: rgba(255, 255, 255, 0.9);
    16621670}
    16631671
    1664 .is-dark-theme .site a:focus,
    1665 .is-dark-theme .site a:focus .meta-nav {
     1672.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),
     1673.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
    16661674        color: var(--wp--style--color--link, var(--global--color-background));
    16671675}
    16681676
    1669 .has-background-white .site a:focus {
     1677.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
    16701678        background: rgba(0, 0, 0, 0.9);
    16711679        color: var(--wp--style--color--link, var(--global--color-white));
    16721680}
    16731681
    1674 .has-background-white .site a:focus .meta-nav {
     1682.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
    16751683        color: var(--wp--style--color--link, var(--global--color-white));
    16761684}
    16771685
    1678 .site a:focus.skip-link {
     1686.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link {
    16791687
    16801688        /* Only visible in Windows High Contrast mode */
    … …  
    16831691}
    16841692
    1685 .site a:focus.skip-link:focus {
     1693.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link:focus {
    16861694        color: #21759b;
    16871695        background-color: #f1f1f1;
    16881696}
    16891697
    1690 .site a:focus img {
     1698.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img {
    16911699        outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary));
    16921700}
    16931701
    1694 .has-background:not(.has-background-background-color) .has-link-color a,
    1695 .has-background:not(.has-background-background-color).has-link-color a {
     1702.has-background .has-link-color a,
     1703.has-background.has-link-color a {
    16961704        color: var(--wp--style--color--link, var(--global--color-primary));
    16971705}
    … …  
    17241732}
    17251733
    1726 .site .button:before,
    1727 .site .button:after,
    1728 input[type=submit]:before,
    1729 input[type=submit]:after,
    1730 input[type=reset]:before,
    1731 input[type=reset]:after,
    1732 .wp-block-search__button:before,
    1733 .wp-block-search__button:after,
    1734 .wp-block-button .wp-block-button__link:before,
    1735 .wp-block-button .wp-block-button__link:after {
    1736         content: "";
    1737         display: block;
    1738         height: 0;
    1739         width: 0;
    1740 }
    1741 
    1742 .site .button:before,
    1743 input[type=submit]:before,
    1744 input[type=reset]:before,
    1745 .wp-block-search__button:before,
    1746 .wp-block-button .wp-block-button__link:before {
    1747         margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
    1748 }
    1749 
    1750 .site .button:after,
    1751 input[type=submit]:after,
    1752 input[type=reset]:after,
    1753 .wp-block-search__button:after,
    1754 .wp-block-button .wp-block-button__link:after {
    1755         margin-top: -calc(.5em * var(--button--line-height) + -.39);
    1756 }
    1757 
    17581734.site .button:focus,
    17591735input[type=submit]:focus,
    … …  
    20372013}
    20382014
    2039 .wp-block-cover .wp-block-cover__inner-container a,
    2040 .wp-block-cover .wp-block-cover-image-text a,
    2041 .wp-block-cover .wp-block-cover-text a,
    2042 .wp-block-cover-image .wp-block-cover__inner-container a,
    2043 .wp-block-cover-image .wp-block-cover-image-text a,
    2044 .wp-block-cover-image .wp-block-cover-text a {
     2015.wp-block-cover .wp-block-cover__inner-container a:not(.wp-block-button__link):not(.wp-block-file__button),
     2016.wp-block-cover .wp-block-cover-image-text a:not(.wp-block-button__link):not(.wp-block-file__button),
     2017.wp-block-cover .wp-block-cover-text a:not(.wp-block-button__link):not(.wp-block-file__button),
     2018.wp-block-cover-image .wp-block-cover__inner-container a:not(.wp-block-button__link):not(.wp-block-file__button),
     2019.wp-block-cover-image .wp-block-cover-image-text a:not(.wp-block-button__link):not(.wp-block-file__button),
     2020.wp-block-cover-image .wp-block-cover-text a:not(.wp-block-button__link):not(.wp-block-file__button) {
    20452021        color: currentColor;
    20462022}
    … …  
    21762152        padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    21772153        display: inline-block;
    2178 }
    2179 
    2180 .wp-block-file .wp-block-file__button:before,
    2181 .wp-block-file .wp-block-file__button:after {
    2182         content: "";
    2183         display: block;
    2184         height: 0;
    2185         width: 0;
    2186 }
    2187 
    2188 .wp-block-file .wp-block-file__button:before {
    2189         margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
    2190 }
    2191 
    2192 .wp-block-file .wp-block-file__button:after {
    2193         margin-top: -calc(.5em * var(--button--line-height) + -.39);
    21942154}
    21952155
    … …  
    29312891        border-bottom-style: solid;
    29322892        border-top-style: solid;
     2893        color: currentColor;
     2894        border-color: currentColor;
    29332895        position: relative;
    29342896
    … …  
    29422904        content: "“";
    29432905        display: block;
     2906        position: relative;
     2907        left: 0;
    29442908        font-size: 3rem;
    29452909        font-weight: 500;
    … …  
    29752939}
    29762940
    2977 .wp-block-pullquote.alignleft blockquote:before,
    2978 .wp-block-pullquote.alignleft cite {
     2941.wp-block-pullquote.alignleft:not(.is-style-solid-color) blockquote:before,
     2942.wp-block-pullquote.alignleft:not(.is-style-solid-color) cite {
    29792943        text-align: center;
    29802944}
    … …  
    30092973
    30102974.wp-block-pullquote.is-style-solid-color blockquote {
     2975        margin: 0;
    30112976        max-width: inherit;
    30122977}
    … …  
    30222987}
    30232988
     2989.wp-block-pullquote.is-style-solid-color.alignleft,
     2990.wp-block-pullquote.is-style-solid-color.alignright {
     2991        padding: var(--global--spacing-unit);
     2992}
     2993
     2994.wp-block-pullquote.is-style-solid-color.alignleft blockquote,
     2995.wp-block-pullquote.is-style-solid-color.alignright blockquote {
     2996        max-width: initial;
     2997}
     2998
    30242999.wp-block-quote {
     3000        border-left: none;
    30253001
    30263002        /**
    … …  
    30293005}
    30303006
    3031 .has-background:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
    3032 [class*=background-color]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
     3007.wp-block-quote:before {
     3008        content: "“";
     3009        font-size: var(--quote--font-size);
     3010        line-height: var(--quote--line-height);
     3011        left: 8px;
     3012}
     3013
     3014.has-background .wp-block-quote .wp-block-quote__citation,
     3015[class*=background-color] .wp-block-quote .wp-block-quote__citation,
    30333016[style*=background-color] .wp-block-quote .wp-block-quote__citation,
    30343017.wp-block-cover[style*=background-image] .wp-block-quote .wp-block-quote__citation,
    3035 .has-background:not(.has-background-background-color) .wp-block-quote cite,
    3036 [class*=background-color]:not(.has-background-background-color) .wp-block-quote cite,
     3018.has-background .wp-block-quote cite,
     3019[class*=background-color] .wp-block-quote cite,
    30373020[style*=background-color] .wp-block-quote cite,
    30383021.wp-block-cover[style*=background-image] .wp-block-quote cite,
    3039 .has-background:not(.has-background-background-color) .wp-block-quote footer,
    3040 [class*=background-color]:not(.has-background-background-color) .wp-block-quote footer,
     3022.has-background .wp-block-quote footer,
     3023[class*=background-color] .wp-block-quote footer,
    30413024[style*=background-color] .wp-block-quote footer,
    30423025.wp-block-cover[style*=background-image] .wp-block-quote footer {
    … …  
    30513034
    30523035.wp-block-quote.has-text-align-right:before {
     3036        display: none;
     3037}
     3038
     3039.wp-block-quote.has-text-align-right p:before {
    30533040        content: "”";
    3054         left: initial;
    3055         right: calc(-0.5 * var(--global--spacing-horizontal));
     3041        font-size: var(--quote--font-size);
     3042        font-weight: normal;
     3043        line-height: var(--quote--line-height);
     3044        margin-right: 5px;
    30563045}
    30573046
    … …  
    30903079.wp-block-quote.is-large.has-text-align-right:before,
    30913080.wp-block-quote.is-style-large.has-text-align-right:before {
    3092         left: initial;
    3093         right: calc(-1 * var(--global--spacing-horizontal));
     3081        display: none;
     3082}
     3083
     3084.wp-block-quote.is-large.has-text-align-right p:before,
     3085.wp-block-quote.is-style-large.has-text-align-right p:before {
     3086        content: "”";
     3087        font-size: var(--quote--font-size-large);
     3088        font-weight: normal;
     3089        line-height: var(--quote--line-height-large);
     3090        margin-right: 10px;
    30943091}
    30953092
    … …  
    32533250}
    32543251
    3255 .wp-block-search__button-inside .wp-block-search__inside-wrapper {
    3256         background-color: var(--global--color-white);
    3257 }
    3258 
    32593252.wp-block-search__button-only.aligncenter .wp-block-search__inside-wrapper {
    32603253        justify-content: center;
    … …  
    32823275}
    32833276
    3284 .has-background:not(.has-background-background-color) .wp-block-search .wp-block-search__input,
    3285 [class*=background-color]:not(.has-background-background-color) .wp-block-search .wp-block-search__input,
     3277.has-background .wp-block-search .wp-block-search__input,
     3278[class*=background-color] .wp-block-search .wp-block-search__input,
    32863279[style*=background-color] .wp-block-search .wp-block-search__input,
    32873280.wp-block-cover[style*=background-image] .wp-block-search .wp-block-search__input {
    … …  
    33733366}
    33743367
     3368.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
     3369        background-color: var(--global--color-white);
     3370        border: var(--form--border-width) solid var(--form--border-color);
     3371        border-radius: var(--form--border-radius);
     3372}
     3373
     3374.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
     3375        margin-right: 0;
     3376}
     3377
     3378.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
     3379        outline: 2px dotted var(--form--border-color);
     3380        outline-offset: -5px;
     3381}
     3382
     3383.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
     3384        outline-color: currentColor;
     3385}
     3386
    33753387.wp-block-search.wp-block-search__button-inside.wp-block-search__text-button button.wp-block-search__button {
    33763388        padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    … …  
    34283440hr.wp-block-separator {
    34293441        border-bottom: var(--separator--height) solid var(--separator--border-color);
     3442        opacity: 1;
    34303443
    34313444        /**
    … …  
    34383451}
    34393452
    3440 hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull {
     3453hr.wp-block-separator:not(.is-style-dots).alignwide {
     3454        max-width: var(--responsive--alignwide-width);
     3455}
     3456
     3457hr.wp-block-separator:not(.is-style-dots).alignfull {
    34413458        max-width: var(--responsive--alignfull-width);
    34423459}
    … …  
    34633480}
    34643481
    3465 .has-background:not(.has-background-background-color) hr.wp-block-separator,
    3466 [class*=background-color]:not(.has-background-background-color) hr.wp-block-separator,
     3482.has-background hr.wp-block-separator,
     3483[class*=background-color] hr.wp-block-separator,
    34673484[style*=background-color] hr.wp-block-separator,
    34683485.wp-block-cover[style*=background-image] hr.wp-block-separator {
    34693486        border-color: currentColor;
     3487}
     3488
     3489.wp-block-social-links a:focus {
     3490        color: var(--global--color-primary);
    34703491}
    34713492
    … …  
    38733894}
    38743895
     3896.has-background-white a.custom-logo-link:focus,
     3897.is-dark-theme a.custom-logo-link:focus {
     3898        background: none;
     3899}
     3900
    38753901.site-title > a {
    38763902        text-decoration-color: var(--global--color-secondary);
    … …  
    39794005        margin-top: calc(6 * var(--global--spacing-vertical));
    39804006}
     4007@media only screen and (max-width: 481px) {
     4008
     4009        .no-widgets .site-footer {
     4010                margin-top: calc(3 * var(--global--spacing-vertical));
     4011        }
     4012}
    39814013
    39824014.site-footer > .site-info {
    … …  
    40304062.is-dark-theme .site-footer > .site-info a:focus {
    40314063        color: var(--wp--style--color--link, var(--global--color-background));
     4064}
     4065
     4066.has-background-white .site-footer > .site-info a:focus {
     4067        color: var(--wp--style--color--link, var(--global--color-white));
    40324068}
    40334069
    … …  
    49725008
    49735009        .primary-navigation .primary-menu-container > ul > .menu-item > a + .sub-menu-toggle {
    4974                 margin-left: calc(0px - var(--primary-nav--padding));
     5010                margin-left: calc(5px - var(--primary-nav--padding));
    49755011        }
    49765012}
    … …  
    50135049        z-index: 99999;
    50145050        outline-offset: 0;
     5051        text-decoration-thickness: 2px;
    50155052}
    50165053
    … …  
    51555192}
    51565193
     5194.has-background-white .footer-navigation-wrapper li a:focus .svg-icon {
     5195        fill: var(--wp--style--color--link, var(--global--color-white));
     5196}
     5197
    51575198.footer-navigation-wrapper li .svg-icon {
    51585199        vertical-align: middle;
    … …  
    51825223        color: var(--global--color-primary-hover);
    51835224        text-decoration: underline;
     5225        text-decoration-style: dotted;
    51845226}
    51855227
    … …  
    52975339}
    52985340
    5299 .post-navigation .nav-next:hover .post-title,
    5300 .post-navigation .nav-previous:hover .post-title {
    5301         text-decoration: underline;
    5302         text-decoration-thickness: 1px;
    5303 }
    5304 
    53055341.pagination,
    53065342.comments-pagination {
    … …  
    53255361.comments-pagination .nav-links a:hover {
    53265362        color: var(--pagination--color-link-hover);
     5363}
     5364
     5365.is-dark-theme .pagination .nav-links a:active,
     5366.is-dark-theme .pagination .nav-links a:hover:active,
     5367.is-dark-theme .pagination .nav-links a:hover:focus,
     5368.is-dark-theme .comments-pagination .nav-links a:active,
     5369.is-dark-theme .comments-pagination .nav-links a:hover:active,
     5370.is-dark-theme .comments-pagination .nav-links a:hover:focus {
     5371        color: var(--global--color-background);
     5372}
     5373
     5374.has-background-white .pagination .nav-links a:active,
     5375.has-background-white .pagination .nav-links a:hover:active,
     5376.has-background-white .pagination .nav-links a:hover:focus,
     5377.has-background-white .comments-pagination .nav-links a:active,
     5378.has-background-white .comments-pagination .nav-links a:hover:active,
     5379.has-background-white .comments-pagination .nav-links a:hover:focus {
     5380        color: var(--global--color-white);
    53275381}
    53285382
    … …  
    53405394.pagination .nav-links > *.current,
    53415395.comments-pagination .nav-links > *.current {
    5342         border-bottom: 1px solid var(--pagination--color-text);
     5396        text-decoration: underline;
     5397}
     5398
     5399.pagination .nav-links > *:not(.dots):not(.current):hover,
     5400.comments-pagination .nav-links > *:not(.dots):not(.current):hover {
     5401        text-decoration-style: dotted;
    53435402}
    53445403
    … …  
    54255484        .widget-area {
    54265485                grid-template-columns: repeat(3, 1fr);
     5486        }
     5487}
     5488@media only screen and (max-width: 481px) {
     5489
     5490        .widget-area {
     5491                margin-top: calc(3 * var(--global--spacing-vertical));
    54275492        }
    54285493}
    … …  
    56225687}
    56235688
    5624 .has-background:not(.has-background-background-color) a:not(.wp-block-button__link),
     5689.has-background a,
    56255690.has-background p,
    56265691.has-background h1,
Note: See TracChangeset for help on using the changeset viewer.