A simpler approach to CSS styling using just one default style plus one alternative.

alt-styles.css

/* CSS Custom Properties  */

:root {
--font-family-default: 'Merriweather', serif;
--font-family-alt: 'Merriweather Sans', sans-serif;

--font-color-default: #b1a18;
--font-color-alt: #f5f5f3;

--font-link-default: #a62339;
--font-link-alt: #a62339;

--font-size-default: 1rem;
--font-size-small: .889rem;
--font-size-medium: 1.424rem;
--font-size-large: 2.027rem;

/* Major-third typographic scale 

--font-size-small: .8rem;
--font-size-medium: 1.953rem;
--font-size-large: 3.052rem;
*/

/* Perfect fourth typographic scale 

--font-size-small: .75rem;
--font-size-medium: 1.777rem;
--font-size-large: 3.157rem;
*/

/* Perfect fifth typographic scale 

--font-size-small: .667rem;
--font-size-medium: 2.25rem;
--font-size-large: 5.063rem;
*/

--font-weight-default: 400;
--font-weight-alt: 700;

--lineheight-text-default: 1.5;
--lineheight-text-alt: 1.3;

--color-brand: #a62339;
--color-accent: #1b7ca6;

--color-background-default: #fff;
--color-background-alt: #100111f;

--color-base-default: #f5f5f3;
--color-base-alt: #1b7ca6;

--color-border-default: #1b1a18;
--color-border-alt: #1b7492;

--border-radius-default: .5rem;
--border-radius-alt: 1rem;

--border-width-default: 1px;
--border-width-alt: 3px;

--duration-default: .25s;
--duration-alt: .5s;

--spacing-default: 1.5rem;
--spacing-small: .75rem;
--spacing-large: 3rem;
}

[data-theme="alt"] {
/* Alterative Custom Properties */
}

@media (prefers-color-scheme: dark) {
/* Dark mode Custom Properties */
}

/* Viewport (Critical: All) */

@-ms-viewport {
width: device-width; }

@-o-viewport {
width: device-width; }

@viewport {
width: device-width; }

/* Selection styles (Critical: All) */

::-moz-selection {
background-color: var(--color-base-default);
text-shadow: none; }

::selection {
background-color: var(--color-base-default);
text-shadow: none; }

/* Style scrollbars for iOS and Mac OS (Critical: All) */

::-webkit-scrollbar {
height: 6px;
width: 6px; }

::-webkit-scrollbar-thumb {
background-color: var(--color-brand);
border-radius: 0; }

::-webkit-scrollbar-track {
margin: var(--spacing-small) 0;
background-color: var(--color-base);
border-radius: 12px; }

/* Add space above :target elements (Critical: All) */

[id] {
scroll-margin-top: var(--spacing-large); }

/* Hide elements visually (Critical: All) */

.sr-only {
position: absolute;
margin: -1px;
padding: 0;
height: 1px; 
width: 1px;
overflow: hidden;
border: 0; 
-webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
white-space: nowrap; }

/* HTML and body (Critical: All) */

html {
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
scroll-behavior: smooth; }

@media screen and (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}

body {
margin: 0;
padding: 5px;
min-height: 100vh;
background-color: var(--color-background);
color: var(--color-text-default);
font-family: var(--font-family-default);
font-feature-settings: liga 1;
font-weight: var(--font-weight-default);
line-height: var(--lineheight-text-default); }

/* Import webfonts (Critical: All) */

@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@400;700&family=Merriweather:wght@400;700&display=swap');

/* @font-face {
font-display: fallback;
font-family: var(--font-family-default);
font-style: normal;
font-weight: var(--font-weight-default);
src:url(FONT-FILE_URL) format("woff2"),
url(FONT-FILE_URL) format("woff"); } 
*/

/* Anchors (Critical: All) */

a, a:visited {
color: var(--font-link-default);
text-decoration-color: var(--font-link-default);
text-decoration-thickness: .075em;
text-underline-offset: .09em; 
transition: all var(--duration-default) ease; }

a:focus {
color: var(--font-link-alt);
outline: thin dotted; }

a:visited {
color: var(--font-link-default); }

a:hover {
color: var(--font-link-alt); }

a:hover,a:active {
outline: 0; }

a:link {
transition: color var(--duration-default) ease; }

a:not([class]) {
-webkit-text-decoration-skip: ink;
text-decoration-skip: ink; }

/* Headlines (Critical: All) */

h1, h2, h3, h4, h5, h6 {
margin: 0 0 var(--spacing-default);
font-family: var(--font-family-default);
font-style: normal;
font-weight: var(--font-weight-alt);
letter-spacing: .025em;
line-height: var(--lineheight-text-alt); }

h1 {
font-size: var(--font-size-large); }

h2, h3 {
font-size: var(--font-size-medium); }

h4, h5, h6 {
font-size: var(--font-size-default); }

/* Paragraphs (Critical: All) */

p {
margin: 0;
font-size: var(--font-size-default);
line-height: var(--lineheight-text-default);
orphans: 3; }

p + p:not([class]) {
text-indent: 2ch; }

p:last-child:only-child {
margin-bottom: 0; }

/* Dropcap paragraph (Critical: All) */

@supports not (initial-letter:1) {

.dropcap::first-letter {
float: left;
padding-top: 6px;
padding-right: 8px;
padding-left: 0;
font-family: var(--font-family-default);
font-size: 5rem;
line-height: 4.25rem;
color: var(--color-brand); }
}

@supports (initial-letter:2) {
.dropcap::first-letter {
initial-letter: 2; }
}

@media screen and (min-width:70em) {

@supports (initial-letter:3) {
.dropcap::first-letter {
initial-letter: 3; }
}
}

/* Large paragraphs (Critical: All) */

.standfirst {
font-size: var(--font-size-medium);
text-transform: uppercase; }

.lede {
font-size: var(--font-size-medium); }

/* Small paragraphs (Critical: All) */

.secondary {
font-size: var(--font-size-small); }

.tertiary {
font-size: var(--font-size-small); }

/* Block quotes (Critical: All) */

blockquote {
margin: var(--spacing-default) 0;
padding: 0; }

blockquote p {
font-family: var(--font-family-alt);
font-style: normal; }

blockquote cite {
display: block;
padding-top: var(--spacing-default);
font-size: var(--font-size-small); }

blockquote.alt p {
/* Text styles */
}

blockquote.alt cite {
text-align: right;
/* Text styles */
}

/* Lists (Critical: All) */

ol, ul {
list-style-type: none;
margin-top: var(--spacing-default);
margin-bottom: var(--spacing-default);
margin-left: 0;
padding-left: 0; 
font-size: var(--font-size-default); }

ol li {
margin-bottom: var(--spacing-default);
margin-left: -1rem;
line-height: var(--lineheight-text-default); }

ol li:before {
margin-right: var(--spacing-default);
color: var(--font-color-default); }

ul li:before {
content: "• ";
color: var(--color-brand); }

ul[class*="alt-"] li:before {
content: "";
display: none; }

/* Inline list items (Critical: All) */

.alt--inline li {
display: inline-block;
margin-bottom: var(--spacing-default); }

.alt--inline li:not(:last-child) {
margin-right: var(--spacing-default); }

/* Unstyled list items (Critical: All) */

.alt--unstyled { }

/* Text styles (Critical: All) */

abbr[title] {
border-bottom: var(--border-width-default) dotted var(--color-border-default);
cursor: help; }

[contenteditable] {
cursor: pointer;
cursor: text; }

dfn {
font-style : italic; }

b, strong {
font-weight: var(--font-weight-alt); }

i, em {
font-style: italic; }

pre {
white-space : pre;
white-space : pre-wrap;
word-wrap : break-word;
font-family: inherit; }

small {
font-size: var(--font-size-small);
font-style: normal; }

.display {
font-size: var(--font-size-large); }

.small {
font-size: var(--font-size-small); }

/* Figures (Critical: All) */

figure {
margin: var(--spacing-default) 0; }

figure img {
margin-bottom: var(--spacing-default); }

figcaption {
font-size: var(--font-size-small); }

figure.alt figcaption {
padding-right: var(--spacing-large);
/* Text styles */ 
}

/* Images (Critical: All) */

img {
border-width: 0;
content-visibility: auto;
max-width: 100%;
vertical-align: middle;
width: 100%; }

img[width], img[height] {
max-width: none; }

img.alt {
border: var(--border-width-default) solid var(--color-border-default);
/* Radius styles */
/* Shadow styles */
}

/* Forms (Critical: All) */

form {
margin: 0 0 var(--spacing-default) 0;
padding: 0; }

fieldset {
margin: 0 0 var(--spacing-default) 0;
padding: 0; 
border-width: 0; }

label {
margin: 0;
font-weight: var(--font-weight-alt);
color: var(--font-color-default); }

[type="email"],
[type="number"],
[type="password"],
[type="text"],
textarea {
-webkit-appearance: none;
appearance: none;
display: block;
margin-bottom: var(--spacing-default);
width: 100%;
background-color: var(--color-base-default);
border: var(--border-width-default) solid var(--color-border-default);
border-radius: var(--border-radius-default);
font-size: var(--font-size-default);
font-family: var(--font-family-default);
color: var(--font-color-default); }

textarea {
min-height: 12vh;
resize: vertical; }

/* Rules (Critical: All) */

hr {
border: 0;
border-bottom: var(--border-width-default) solid var(--color-border-default);
clear: both;
display: block;
height: 1px;
margin: var(--spacing-default) 0;
padding: 0; }

hr.alt {
border-bottom-width: var(--border-width-alt); }

hr.alt--spacer {
border-bottom-width: 0; }

/* Tables (Critical: All) */

table {
display: inline-block;
margin: 0 0 var(--spacing-default);
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
font-family: inherit; }

th, td {
padding: var(--spacing-small) var(--spacing-default) var(--spacing-small) 0;
font-size: var(--font-size-default);
text-align: left;
vertical-align: middle; }

th {
font-family: var(--font-family-default);
font-weight: var(--font-weight-alt);
white-space: nowrap; }

td:first-of-type {
padding-left: var(--spacing-small); }

thead th, thead td {
border-bottom: var(--border-width-alt) solid var(--color-border-default); }

tbody th, tbody td {
border-bottom: var(--border-width-default) solid var(--color-border-default); }

/* Alt tables (Condensed) (Critical: All) */

table.alt th, table.alt td {
padding-top: var(--spacing-small);
padding-bottom: var(--spacing-small);
/* Text styles */
}

/* Buttons (Critical: All) */

.btn {
-webkit-appearance: none;
appearance: none;
display: inline-block;
margin: 0;
padding: var(--spacing-small);
background-color: var(--color-brand);
border-width: 0;
border-radius: var(--border-radius-default);
color: var(--color-text-default);
cursor: pointer;
font-family: var(--font-family-default);
font-size: var(--font-size-default);
font-weight: var(--font-weight-alt);
line-height: 1;
text-decoration: none;
transition: all var(--duration-default) ease;  }

.btn.alt {
background-color: var(--color-base-default);
color: var(--color-text-default); }

.btn:hover {
/* Button styles */
}

.btn.alt:hover {
/* Button styles */
}

.btn.alt--block {
display: block;
width: 100%;
text-align: center; }

/* Cards (Critical: All) */

.card {
margin: var(--spacing-default) 0;
padding: var(--spacing-default);
border: var(--border-width-default) solid var(--color-border-default); }

/* Columns (Critical: All) */

@media (min-width:60em) {

.columns {
column-count: 2;
column-gap: var(--spacing-large);
column-rule: var(--border-width-default) solid var(--color-border-default); }

.columns div {
break-inside: avoid;
page-break-inside: avoid; }

.columns p {
font-size: var(--font-size-small); }

.columns.alt {
column-count: auto;
column-width: 12em; }
}