aping the latest gawker design for my miniflux custom CSS

screenshot of miniflux made to look like gawker.com's redesign
I’m not going to tell you you could just use browser developer tools to download these fonts from where they’re included in the Gawker source because for some reason font licensing heavily implies that’d be less-than-kosher. But I will link this tool that, as a matter of factual accuracy, can be used to turn arbitrary .woff2 files into normal .ttf ones.
A good amount of this isn’t as heavily tricked out as it could be, but I might return to it.
.item-meta-icons li:first-child span.icon-label { font-size: 150%;
}

.header li:hover a {
 color: var(--gray-8);
}
.page-header h1 a:hover,
.page-header h1 a:focus {
 color: var(--gray-6);
}

.entry-content dt {
 color: var(--gray-5);
}

.item-title {
  font-family: "Arial Black", "Arial", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  text-transform: uppercase;
  font-size: 1.3em;
  line-height: 0.95;
  font-weight: 500;
  letter-spacing: -0.018rem;
}
.icon-label {
  font-family: "Georgia",  "Arial", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 400;
  letter-spacing: 0.02rem;

}
.item-meta-icons {
  font-weight: 500;
}
:root {
  --item-title-link-font-weight: unset;
  --font-family:  "Arial", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.page-header, header h1, .item-meta-icons li:first-child span.icon-label {
  font-family: "Etna X Condensed",  "Arial", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  text-transform: uppercase;
  letter-spacing: -0.012em;
  font-weight: 300;
  font-size: 130%;
}

.item-meta-icons li:first-child span.icon-label {
  font-size: 170%;
}

.page-footer, .pagination {
  font-weight: 700;
  letter-spacing: -0.032em;
  text-transform: uppercase;
}

header {
  font-family: "Georgia",  "Arial", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 400;
  letter-spacing: 0.02rem;
}

.item-meta a {
  color: var(--gray-7);
}

:root {
 --font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

}

.entry-meta {
color: var(--gray-6);
}

@media not (prefers-color-scheme:dark) {
 :root {
 --blackest-black: #22001f;/*#000; */
   --gray-3: #25375a; /*#333;*/
   --gray-4: #21496a; /*#444;*/
   --gray-5: #246d82; /*#555;*/
   --gray-6: #337f8a; /*#666;*/
   --gray-7: #489090; /*#777;*/
   --gray-8: #629c90; /*#888;*/
   --gray-9: #7da791; /*#999;*/
   --gray-10: #98b296; /*#aaa;*/
   --gray-12: #c9c6ab; /*#ccc;*/
   --gray-13: #ded1ba; /*#ddd;*/
   --whitest-white: #fff9f7; /*#fff;*/
   --white-0: #ffece4; /*#f0f0f0;*/
   --white-12: #fff1ec; /*#fcfcfc;*/
 --body-color: var(--gray-3);
 --body-background: var(--whitest-white);
 --hr-border-color: var(--gray-12);
 --title-color: var(--gray-3);
 --link-color: #8659a8;
 --link-focus-color: purple;
 --link-hover-color: var(--gray-3);
 --header-list-border-color: var(--gray-13);
 --header-link-color: var(--gray-4);
 --header-link-focus-color: var(--gray-8);
 --header-link-hover-color: var(--gray-8);
 --header-active-link-color: var(--gray-4);
 --page-header-title-border-color: var(--gray-3);
 --logo-color: var(--blackest-black);
 --logo-hover-color-span: var(--blackest-black);
 --table-border-color: var(--gray-13);
 --table-th-background: var(--white-12);
 --table-th-color: var(--gray-3);
 --table-tr-hover-background-color:#f9f9f9;
 --table-tr-hover-color: var(--gray-3);
--button-primary-border-color: #7736a8;
--button-primary-background: #8659a8;
--button-primary-color: var(--whitest-white);
--button-primary-focus-border-color: #8f4baf;
--button-primary-focus-background: #8f59a8;
 --input-border:1px solid var(--gray-12);
 --input-background: var(--whitest-white);
 --input-color: var(--gray-3);
 --input-placeholder-color: var(--gray-13);
 --input-focus-color: var(--blackest-black);
 --input-focus-border-color:rgba(82, 168, 236, 0.8);
 --input-focus-box-shadow:0 0 8px rgba(82, 168, 236, 0.6);
 --alert-color:#c09853;
 --alert-background-color:#fcf8e3;
 --alert-border-color:#fbeed5;
 --alert-success-color:#468847;
 --alert-success-background-color:#dff0d8;
 --alert-success-border-color:#d6e9c6;
 --alert-error-color:#b94a48;
 --alert-error-background-color:#f2dede;
 --alert-error-border-color:#eed3d7;
 --alert-info-color:#3a87ad;
 --alert-info-background-color:#d9edf7;
 --alert-info-border-color:#bce8f1;
 --panel-background: var(--white-12);
 --panel-border-color: var(--gray-13);
 --panel-color: var(--gray-3);
 --modal-background: var(--white-0);
 --modal-color: var(--gray-3);
 --modal-box-shadow:2px 0 5px 0 var(--gray-12);
 --pagination-link-color: var(--gray-3);
 --pagination-border-color: var(--gray-13);
 --category-color: var(--gray-3);
--category-background-color: #ffe8e8;
--category-border-color: #fac6c6;
 --category-link-color:var(--blackest-black);
 --category-link-hover-color:var(--blackest-black);
 --item-border-color: var(--gray-13);
 --item-padding:5px;
 --item-title-link-font-weight:600;
 --item-status-read-title-link-color: var(--gray-7);
 --item-status-read-title-focus-color: var(--gray-7);
 --item-meta-focus-color: var(--gray-7);
 --item-meta-li-color: var(--gray-10);
 --current-item-border-width:3px;
 --current-item-border-color:#bce;
 --current-item-box-shadow:none;
 --entry-header-border-color: var(--gray-13);
 --entry-header-title-link-color: var(--gray-3);
 --entry-content-color: var(--gray-5);
 --entry-content-code-color: var(--gray-3);
 --entry-content-code-background: var(--white-0);
 --entry-content-code-border-color: var(--gray-13);
 --entry-content-quote-color: var(--gray-6);
 --entry-content-abbr-border-color: var(--gray-9);
 --entry-enclosure-border-color: var(--gray-3);
 --parsing-error-color: var(--gray-3);
 --feed-parsing-error-background-color:#fcf8e3;
 --keyboard-shortcuts-li-color: var(--gray-3);
 --counter-color: var(--gray-6);
 }
}