/*!
Theme Name: OMG! Ubuntu! 2025.04.0
Theme URI: http://omgubuntu.co.uk
Description: A theme for OMG! Ubuntu!
Author: Sam Tran
Author URI: http://www.ohso.io
Version: 2025.04.0
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align:baseline
}

article, aside, details, figcaption, figure, footer, header, menu, nav, section, summary {
    display:block
}

* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing:grayscale
}

html {
    line-height: 1;
    width: 100%;
    font-family: var(--text-primary);
    color: var(--color-grey-33);
    background: #fff;
    font-weight: 400;
    scroll-behavior:smooth
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--text-headers);
    line-height: 1.25;
    font-weight: 600;
    color:var(--ctx-content-fg)
}

h2, h3, h4, h5, h6 {
    margin-bottom:.9375rem
}

h1 {
    font-size:1.875rem
}

h2 {
    font-size:1.75rem
}

h3 {
    font-size:1.5rem
}

h4 {
    font-size:1.375rem
}

h5 {
    font-size: 1.25rem;
    color:var(--color-orange-ff)
}

h6 {
    font-size: 1rem;
    color: var(--ctx-subtitle-fg);
    line-height:1
}

sup {
    vertical-align: baseline;
    position: relative;
    top: -0.4375rem;
    font-size: .75rem;
    line-height:.75rem
}

strong {
    font-weight:700
}

em {
    font-style:italic
}

p {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ctx-content-fg);
    margin:0 0 1.8rem
}

@media screen and (max-width: 1366px) {
    p {
        font-size:1rem
    }
}

a {
    color: var(--color-orange-ff);
    text-decoration: none;
    transition:color var(--ease)
}

a:visited {
    color:#aaa
}

a:hover {
    color:var(--ctx-link-hover)
}

a img {
    border:none
}

img {
    max-width: 100%;
    height:auto
}

iframe, object {
    max-width:100%
}

ol {
    list-style-position: inside;
    color:var(--ctx-content-fg)
}

ul {
    list-style: none;
    color:var(--ctx-content-fg)
}

li {
    font-size: 1.0625rem;
    line-height:2rem
}

@media screen and (max-width: 1366px) {
    li {
        font-size:1rem
    }
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    width:100%
}

table caption {
    background: var(--color-orange-ff);
    color: #fff;
    font-weight: 700;
    padding:.5rem
}

th {
    font-weight: 800;
    padding: 1rem;
    line-height: 1.9;
    text-align: left;
    background: #333;
    color:#fff
}

td {
    border-bottom: var(--color-grey-dd);
    padding:1rem
}

tr:nth-child(odd) {
    background:#f5f5f5
}

tr, td, th {
    vertical-align:middle
}

caption, td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle;
    line-height:1.9
}

q, blockquote {
    quotes:none
}

q:before, q:after, blockquote:before, blockquote:after {
    content:none
}

blockquote {
    text-align: center;
    margin: 1.5rem 0 1.8rem;
    padding: 2rem;
    border-radius:var(--radius-l)
}

blockquote::before {
    content: "“";
    color: var(--accent-color);
    display: block;
    position: relative;
    top: .225em;
    margin-bottom: .2em;
    font-family: sans-serif;
    font-weight: 700;
    font-size: 5rem;
    line-height:1.5rem
}

blockquote p, .post-content blockquote p {
    font-size: 1.45rem;
    line-height: 1.3;
    margin: 0;
    font-weight: 700;
    color: var(--ctx-content-fg);
    font-family: var(--text-headers);
    letter-spacing:-1px
}

blockquote.wp-block-quote.is-style-large {
    font-size: 1.5rem;
    margin: 1rem 0;
    padding:1rem
}

blockquote.wp-block-quote.is-style-large p {
    line-height: 1.6;
    font-style:normal
}

blockquote.wp-block-quote.is-style-large cite {
    font-size: .875rem;
    text-align: center;
    font-style: italic;
    color:var(--date-color)
}

@media screen and (max-width: 500px) {
    .wp-block-pullquote.alignleft blockquote {
        margin-right:0
    }

    .wp-block-pullquote.alignright blockquote {
        margin-left:0
    }
}

blockquote cite {
    line-height: 1.5;
    padding-top: .5rem;
    font-size: .875rem;
    font-weight: 400;
    display: block;
    text-align: center;
    color: var(--date-color);
    font-family:var(--text-headers)
}

cite {
    text-align:right
}

hr {
    width: 50%;
    height: 1px;
    border: none;
    background: var(--ctx-home-divider-bg);
    margin:2rem auto
}

code {
    font-family: var(--text-monospace);
    background: var(--ctx-code-bg);
    padding: .125rem .5rem;
    border-radius: 2px;
    font-size: 1em;
    letter-spacing: -0.5px;
    margin:0 .2rem
}

@media screen and (max-width: 1366px) {
    code {
        font-size:1rem
    }
}

.has-background code {
    background:rgba(0, 0, 0, .25)
}

abbr[title] {
    position: relative;
    border-bottom: 1px dotted;
    border-color:var(--color-blue-05)
}

abbr:hover {
    cursor:help
}

pre {
    margin: 1.8rem 0;
    padding: 1rem;
    overflow: auto;
    font-family: var(--text-monospace);
    font-size: 1.0625rem;
    background: #333;
    color: #fff;
    line-height: 1.5;
    border-radius: var(--radius-l);
    letter-spacing: -0.5px;
    position:relative
}

@media screen and (max-width: 1366px) {
    pre {
        font-size:1rem
    }
}

pre code {
    padding: 0;
    background: none;
    margin:0
}

pre code:before {
    content: "$ ";
    font-size: 1.0625rem;
    color:#ffff3d
}

.screen-reader-text {
    display:none
}

.left {
    float:left
}

.right {
    float:right
}

.u--box {
    position: relative;
    max-width: 1230px;
    margin:auto
}

.box {
    position: relative;
    max-width: 1132px;
    margin:auto
}

.ta-left {
    text-align:left
}

.ta-center {
    text-align:center
}

.ta-right {
    text-align:right
}

.font-bold {
    font-weight:700
}

.tt-u {
    text-transform:uppercase
}

.mt-0 {
    margin-top:0 !important
}

.mb-1 {
    margin-bottom:1rem !important
}

.d-none {
    display:none !important
}

:root {
    --menu-height: 90px;
    --submenu-height: 35px;
    --nav-height: calc(var(--menu-height) + var(--submenu-height));
    --color-twitter: #1da1f2;
    --color-reddit: #9ac6f2;
    --color-telegram: #08c;
    --color-whatsapp: #43d854;
    --color-pocket: #ee4056;
    --color-web_share: #2b4656;
    --color-pinterest: #ca1f27;
    --color-facebook: #3b5998;
    --color-disqus: var(--accent-color);
    --color-red-fd: #fd1d1d;
    --color-red-f2: #f24336;
    --color-orange-d3: #d34726;
    --color-orange-ef: #ef642d;
    --color-orange-f1: #f15d22;
    --color-orange-ff: #ff9700;
    --color-orange-f7: #f78200;
    --color-yellow-f0: #f0f303;
    --color-yellow-fb: #fbc92a;
    --color-yellow-fbe: #fbe64d;
    --color-yellow-ff: #fff94f;
    --color-green-00: #00bb72;
    --color-green-3d: #3ddb84;
    --color-green-89: #89c460;
    --color-green-a2: #a2c33d;
    --color-blue-05: #0596fd;
    --color-blue-2d: #2d6bf5;
    --color-blue-42: #4285f4;
    --color-blue-4f: #4f86bf;
    --color-blue-50: #5080d8;
    --color-purple-3a: #3a1831;
    --color-purple-67: #67005f;
    --color-purple-75: #752360;
    --color-purple-7e: #7e52c0;
    --color-purple-83: #834bc4;
    --color-white: #fff;
    --color-black: #000;
    --color-grey-18: #181818;
    --color-grey-1e: #1e1e1e;
    --color-grey-26: #262626;
    --color-grey-33: #333;
    --color-grey-42: #424242;
    --color-grey-45: #454545;
    --color-grey-55: #555555;
    --color-grey-66: #666;
    --color-grey-75: #757575;
    --color-grey-88: #888;
    --color-grey-9a: #9a9a9a;
    --color-grey-ad: #adb5bd;
    --color-grey-cd: #cdcdcd;
    --color-grey-dd: #ddd;
    --color-grey-ee: #eee;
    --color-grey-f4: #f4f4f4;
    --color-grey-f5: #f5f5f5;
    --color-grey-f6: #f6f6f6;
    --accent-color: var(--color-orange-f7);
    --secondary-color: var(--color-blue-05);
    --color-grey-9d: var(--color-grey-9a);
    --gradient-disco: linear-gradient(90deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
    --gradient-disco-inverted: linear-gradient(270deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
    --gradient-text-overlay: linear-gradient(45deg, rgba(16, 0, 38, 0.82) 0%, rgba(56, 21, 60, 0.61) 30%, rgba(226, 52, 0, 0.41) 70%, rgba(0, 0, 0, 0) 100%);
    --purple-crave: linear-gradient(-90deg, #e60016, #de0062, #970075, #292564);
    --orange-crave: linear-gradient(180deg, #F77E00 2.5%, #ffc300 100%);
    --ease: 250ms ease;
    --radius-s: .25rem;
    --radius-l: .5rem;
    --shadow-interactive: 0 2px 4px 0 rgba(0, 0, 0, .2), inset 0 -2.5px 0 rgba(0, 0, 0, .2);
    --shadow-1: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    --shadow-1-bottom-only: 0 12px 8px -10px rgba(0, 0, 0, 0.16), 0 5px 5px -2px rgba(0, 0, 0, 0.26);
    --shadow-1-hover: 0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 2px 10px 0 rgba(0, 0, 0, 0.26);
    --shadow-2: 0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 8px 17px 0 rgba(0, 0, 0, 0.2);
    --shadow-3: 0 17px 50px 0 rgba(0, 0, 0, 0.19), 0 12px 15px 0 rgba(0, 0, 0, 0.24);
    --shadow-4: 0 25px 55px 0 rgba(0, 0, 0, 0.21), 0 16px 28px 0 rgba(0, 0, 0, 0.22);
    --shadow-5: 0 40px 77px 0 rgba(0, 0, 0, 0.22), 0 27px 24px 0 rgba(0, 0, 0, 0.2);
    --text-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Noto, Arial, Ubuntu, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --text-headers: "Bitter", "Ubuntu", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    --text-monospace: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
    --accent-font: League Mono, Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
    --accent-font-thin: 100 1rem var(--accent-font);
    --accent-font-extralight: 200 1rem var(--accent-font);
    --accent-font-light: 300 1rem var(--accent-font);
    --accent-font-normal: 400 1rem var(--accent-font);
    --accent-font-medium: 500 1rem var(--accent-font);
    --accent-font-semibold: 600 1rem var(--accent-font);
    --accent-font-bold: 700 1rem var(--accent-font);
    --accent-font-extrabold: 800 1rem var(--accent-font);
    --accent-font-black: 900 1rem var(--accent-font);
    --ctx-page-bg: var(--color-white);
    --ctx-content-fg: var(--color-black);
    --ctx-subtitle-fg: var(--color-grey-9a);
    --ctx-link-hover: var(--color-grey-33);
    --ctx-code-bg: var(--color-grey-f5);
    --ctx-blockquote-bg: var(--color-grey-f6);
    --ctx-home-divider-bg: var(--color-grey-ee);
    --ctx-post-meta-fg: var(-color-grey-66);
    --ctx-post-link-hover: var(--color-grey-33);
    --ctx-post-sources-fg: var(--color-grey-33);
    --ctx-post-caption-fg: var(--color-grey-ad);
    --ctx-post-table-tr-even-bg: none;
    --ctx-post-table-tr-odd-bg: var(--color-grey-f6);
    --ctx-post-socials-bg: var(--color-grey-f5);
    --ctx-post-socials-fg: var(--color-grey-33);
    --ctx-post-socials-hover: var(--color-grey-9a);
    --ctx-post-above-comments-border: var(--color-grey-ee);
    --ctx-sidebar-link-fg: var(--color-grey-88);
    --ctx-sidebar-title-fg: var(--color-grey-33);
    --ctx-sidebar-dsq-bg: var(--color-grey-f5);
    --ctx-mobile-search-bg: var(--color-black);
    --ctx-mobile-search-fg: var(--color-white);
    --ctx-mobile-fg: var(--color-grey-42);
    --ctx-mobile-bg: var(--color-white);
    --ctx-mobile-socials-bg: var(--color-grey-18);
    --ctx-mobile-socials-fg: var(--color-white);
    --ctx-header-item-fg: var(--color-black);
    --ctx-header-item-hover-fg: var(--color-white);
    --ctx-header-menu-fg: var(--color-grey-1e);
    --ctx-header-menu-bg: var(--color-white);
    --ctx-header-menu-hover: var(--color-grey-dd);
    --ctx-block-article-nav-fg: var(--color-grey-33)
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-blue-05: #05bbfd;
        --ctx-page-bg: var(--color-grey-18);
        --ctx-content-fg: var(--color-grey-f5);
        --ctx-subtitle-fg: var(--color-grey-cd);
        --ctx-link-hover: var(--color-grey-cd);
        --ctx-code-bg: var(--color-grey-55);
        --ctx-blockquote-bg: var(--color-grey-33);
        --ctx-home-divider-bg: var(--color-grey-26);
        --ctx-post-meta-fg: var(--color-grey-cd);
        --ctx-post-link-hover: var(--color-white);
        --ctx-post-sources-fg: var(--color-grey-cd);
        --ctx-post-caption-fg: var(--color-grey-cd);
        --ctx-post-table-tr-even-bg: var(--color-grey-55);
        --ctx-post-table-tr-odd-bg: var(--color-grey-33);
        --ctx-post-table-tr-fg: var(--color-white);
        --ctx-post-socials-bg: var(--color-grey-33);
        --ctx-post-socials-fg: var(--color-grey-ee);
        --ctx-post-socials-hover: var(--color-grey-cd);
        --ctx-post-above-comments-border: var(--color-grey-26);
        --ctx-sidebar-link-fg: var(--color-grey-cd);
        --ctx-sidebar-title-fg: var(--color-white);
        --ctx-sidebar-dsq-bg: var(--color-grey-1e);
        --ctx-mobile-fg: var(--color-white);
        --ctx-mobile-bg: var(--color-grey-18);
        --ctx-mobile-socials-bg: var(--color-white);
        --ctx-mobile-socials-fg: var(--color-grey-18);
        --ctx-header-menu-fg: var(--color-white);
        --ctx-header-menu-bg: var(--color-grey-33);
        --ctx-header-menu-hover: var(--color-grey-75);
        --ctx-block-article-nav-fg: var(--color-white)
    }
}

button.is-link {
    padding: 0;
    outline: none;
    border: none;
    border-radius: 0;
    background: none;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    box-shadow: none;
    cursor:pointer
}

.CookieWarning {
    display: none;
    justify-content: space-between;
    align-items: center;
    z-index: 10000;
    position: fixed;
    box-shadow: var(--shadow-2);
    border-radius: 2px;
    left: 50%;
    margin-left: -200px;
    bottom: 1rem;
    background: var(--color-grey-45);
    color: #fff;
    padding: 1rem;
    font-weight: 600;
    width: 400px;
    max-width:100%
}

.CookieWarning.is-active {
    display:flex
}

.CookieWarning p {
    font-size: .875rem;
    color: #fff;
    margin:0
}

.CookieWarning p + p {
    margin-top:.5rem
}

@media screen and (max-width: 500px) {
    .CookieWarning {
        right: 1rem;
        left: 1rem;
        margin-left: 0;
        width:auto
    }
}

.CookieWarning-learnMore, .CookieWarning-learnMore:visited {
    color: #fff;
    border-bottom:1px solid #fff
}

.CookieWarning-learnMore:hover, .CookieWarning-learnMore:visited:hover {
    color:var(--color-grey-dd)
}

.CookieWarning-learnMore:focus, .CookieWarning-learnMore:active, .CookieWarning-learnMore:visited:focus, .CookieWarning-learnMore:visited:active {
    color:#fff
}

button.CookieWarning-consent {
    font-size: .875rem;
    color: #f2b21a;
    text-transform:uppercase
}

button.CookieWarning-consent:hover {
    color:#d19917
}

.page-footer {
    position: relative;
    font-family: var(--text-primary);
    padding-bottom: 30px;
    background: var(--color-black);
    text-align: center;
    padding:1rem 0
}

.page-footer::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    content: "";
    height: 6px;
    background:var(--gradient-disco)
}

.footer-socials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin:1rem
}

.footer-socials a {
    color:var(--color-white)
}

.footer-socials a:hover {
    color:var(--accent-color)
}

.footer-socials svg {
    width: 1.25rem;
    height:1.25rem
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin:1rem
}

.footer-links a {
    color: var(--color-white);
    font-size: .925rem;
    font-weight: 600;
    text-transform: uppercase;
    font-family: var(--text-headers);
    letter-spacing:-0.25px
}

.footer-links a:hover {
    color:var(--accent-color)
}

.footer-links li + li::before {
    content: "/";
    color: #fff;
    font-wieght: 600;
    margin:0 .75rem
}

.copyright {
    text-align: center;
    color: #fff;
    margin: 1rem;
    font-size:.875rem
}

:root {
    --header-background: var(--orange-crave)
}

.header {
    position: relative;
    background: var(--header-background);
    margin: auto;
    z-index:2
}

.post--hero .header {
    box-shadow: none;
    background: none;
    border-bottom: 1px solid rgba(255, 255, 255, .102);
    --ctx-header-item-fg: var(--color-white);
    --ctx-header-item-hover-fg: var(--accent-color)
}

.post--with-banner .header {
    background:none
}

.post--with-banner .header::before {
    content: "";
    position: absolute;
    top: 0;
    height: 125px;
    left: 0;
    right: 0;
    background: var(--header-background);
    z-index:-2
}

@media screen and (max-width: 800px) {
    .post--with-banner .header::before {
        height:90px
    }
}

.header__content {
    height: var(--menu-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow:hidden
}

.header__content.header--loaded {
    overflow:unset
}

@media screen and (max-width: 1280px) {
    .header__content {
        padding:0 30px
    }
}

@media screen and (max-width: 800px) {
    .header__content {
        padding:0 1rem
    }
}

.header__link {
    flex:0 0 245px
}

@media screen and (max-width: 500px) {
    .header__link {
        flex: 1 1;
        min-width:50vw
    }
}

.header__logo {
    display: block;
    max-height: 75px;
    width: 245px;
    transition:350ms ease-in-out
}

.header__logo:hover {
    transform: rotate(-1deg) scale(1.09);
    opacity:.5
}

a.skip-link {
    display: block;
    position: fixed;
    top: 0;
    left: -100vw;
    z-index: 1000;
    font-weight: 600;
    font-size: 1.5rem;
    text-align: center;
    color: var(--color-white);
    background: var(--color-grey-18);
    font-family: var(--text-headers);
    border:2px solid var(--accent-color)
}

a.skip-link:focus {
    left: 0;
    width: 100%;
    height: 75px;
    line-height:75px
}

button.header__nav-toggle {
    display: block;
    color: var(--color-black);
    flex: 0 0 30px;
    padding: .5rem;
    animation: opacity-in var(--ease);
    background: none;
    border: none;
    cursor:pointer
}

button.header__nav-toggle .icon {
    width: 1.25rem;
    height: 1.25rem;
    vertical-align:middle
}

.menu-item.has-text .icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-left:.5rem
}

.header__socials--mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap:wrap
}

.header__socials--mobile .icon {
    width: 2.25rem;
    height: 2.25rem;
    padding: .5rem;
    display: block;
    color:var(--ctx-mobile-socials-fg)
}

.header__socials--mobile li {
    margin:0 0 1rem
}

.header__socials--mobile a {
    display: inline-block;
    background: var(--ctx-mobile-socials-bg);
    color: var(--ctx-mobile-socials-fg);
    border-radius: 50%;
    margin: 0 .25rem;
    position:relative
}

.header__socials--mobile a:hover::before {
    opacity: 1;
    animation:opacity-in var(--ease)
}

.header__socials--mobile a::before {
    opacity: 0;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: var(--shadow-2);
    border-radius:100%
}

.submenu-indicator {
    transition: 150ms ease-in transform;
    transform:rotate(180deg)
}

.hide-submenu .sub-menu {
    display:none
}

.hide-submenu .submenu-indicator {
    transform:rotate(0)
}

.header__nav {
    font-family: var(--text-headers);
    flex: 1 0;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 100ms ease-in;
    height: 100%;
    justify-content:flex-end
}

.header--loaded .header__nav {
    opacity:1
}

.header__nav--left {
    justify-content:flex-start
}

.header__menu {
    display: none;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    padding: 0;
    z-index: 1001;
    height: 100%;
    overflow: hidden;
    gap: .875rem;
    position: absolute;
    left:100vw
}

.header--loaded .header__menu {
    position: unset;
    left: unset;
    flex-wrap:wrap
}

.header__menu:hover, .header__menu:active {
    overflow:unset
}

.header__menu a, .header__menu a:visited {
    color: var(--color-black);
    line-height: 1;
    display: flex;
    align-items: center;
    position:relative
}

.header__menu a:hover {
    color:#fff
}

.header__menu li {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: -0.5px;
    -webkit-font-smoothing: antialiased;
    position: relative;
    white-space: nowrap;
    height:100%
}

.header__menu li.has-accent a {
    color: var(--color-white);
    background: #e09100;
    padding: .5rem .45rem;
    margin: 0 .5rem;
    transition: var(--ease);
    border-radius:var(--radius-s)
}

.header__menu li.has-accent a::before {
    content:none
}

.header__menu li.has-accent a:hover {
    box-shadow:var(--shadow-1)
}

@media screen and (min-width: 801px) {
    .header__menu {
        display:flex
    }
}

.header__socials {
    gap:0
}

.header__socials .icon {
    width: 1.25rem;
    height:1.25rem
}

.header__socials a {
    padding:.5rem
}

.header__socials a::before {
    left: 0;
    right:0
}

:is(.header__menu, .header__subnav) .menu-item-has-children:hover .sub-menu {
    display:block
}

:is(.header__menu, .header__subnav) .menu-item-has-children .submenu-indicator {
    transform: none;
    margin-left: 4px;
    height: 9px;
    width:9px
}

:is(.header__menu, .header__subnav) .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    box-shadow: var(--shadow-2);
    background: var(--ctx-header-menu-bg);
    padding: .5rem 0;
    z-index: 1;
    max-width: 200px;
    min-width: 100%;
    overflow: hidden;
    animation: opacity-in 200ms ease-in;
    margin-top: -1rem;
    margin-left: -2rem;
    border-radius: 4px;
    padding:.5rem .5rem 0 .5rem
}

:is(.header__menu, .header__subnav) .sub-menu .menu-item {
    white-space: nowrap;
    margin: 0;
    padding:0 .5rem
}

:is(.header__menu, .header__subnav) .sub-menu .menu-item:hover a {
    color:var(--accent-color)
}

:is(.header__menu, .header__subnav) .sub-menu a {
    width: 100%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 3;
    color:var(--ctx-header-menu-fg)
}

.header__subnav {
    height: var(--submenu-height);
    display: none;
    justify-content: center;
    background: var(--color-black);
    padding: .25rem 1rem;
    text-transform: uppercase;
    gap: 1rem;
    font-weight:500
}

.header__subnav a {
    line-height: 1;
    position: relative;
    top: -4px;
    font-family: var(--text-headers);
    font-size: .875rem;
    color:#fff
}

.header__subnav a:hover {
    color:var(--accent-color)
}

.post--hero .header__subnav a:hover {
    color:var(--color-grey-1e)
}

.header__subnav li {
    position:relative
}

.header__subnav .sub-menu {
    margin-top:0
}

@media screen and (min-width: 801px) {
    .header__subnav {
        display:flex
    }
}

.post--hero .header__subnav {
    background: none;
    border-top:1px solid rgba(255, 255, 255, .1)
}

.header__subnav .has-accent a {
    color: var(--color-white);
    background: #e09100;
    padding: .25rem .45rem;
    border-radius:var(--radius-s)
}

.header__subnav .has-accent a::before {
    content:none
}

.header__nav--left .header__menu {
    justify-content: flex-start;
    margin-left:.5rem
}

.header__search .header__search-input {
    box-shadow:var(--shadow-2)
}

button.header__search-button {
    display: block;
    color: var(--ctx-header-item-fg);
    transition: .2s ease-in-out;
    flex: 0 0 1.5rem;
    padding: .5rem;
    height: 100%;
    position: relative;
    background: none;
    border: none;
    cursor:pointer
}

button.header__search-button .icon {
    width: 1.25rem;
    height: 1.25rem;
    display:block
}

button.header__search-button .icon:active {
    opacity:.29
}

.header__search-input {
    display: block;
    background: var(--color-white);
    color: var(--color-grey-45);
    border: none;
    border-radius: 4px;
    padding: .875rem;
    width: 300px;
    font-size: .875rem;
    margin-top:-1.5rem
}

.header__search-input::-moz-placeholder {
    color: #424242;
    font-style: italic;
    font-family:var(--text-primary)
}

.header__search-input::placeholder {
    color: #424242;
    font-style: italic;
    font-family:var(--text-primary)
}

.header__search-input:focus {
    outline:none
}

.header__search-input--mobile {
    width: 100%;
    margin-left: .25rem;
    padding-left: .5rem;
    font-size: 1rem;
    background: unset;
    margin-top: 0;
    color:var(--ctx-mobile-search-fg)
}

.header__search-input--mobile::-moz-placeholder {
    color: var(--ctx-mobile-search-fg);
    font-weight: 700;
    font-style: normal;
    font-family: var(--text-headers);
    text-transform: uppercase;
    letter-spacing: -0.25px;
    opacity:.5
}

.header__search-input--mobile::placeholder {
    color: var(--ctx-mobile-search-fg);
    font-weight: 700;
    font-style: normal;
    font-family: var(--text-headers);
    text-transform: uppercase;
    letter-spacing: -0.25px;
    opacity:.5
}

.header__search-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 10001;
    animation:opacity-in 150ms ease-in
}

.header__search--active .header__search-menu {
    display:block
}

button.header__search-button, button.header__nav-toggle, .header__menu a, .header__menu a:visited {
    color: var(--ctx-header-item-fg);
    transition:.2s ease-in-out
}

button.header__search-button:hover, button.header__nav-toggle:hover, .header__menu a:hover, .header__menu a:visited:hover {
    color: var(--ctx-header-item-hover-fg);
    transition:.2s ease-in-out
}

.header__mobile {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    width: 340px;
    max-width: 100vw;
    animation: mobile-nav-fly-in 200ms ease-in-out;
    opacity: 0;
    background: var(--ctx-mobile-bg);
    overflow: auto;
    box-shadow:var(--shadow-2)
}

.header__mobile hr {
    width: calc(100% - 2rem);
    margin:1rem
}

.header__mobile--active {
    display: block;
    opacity:1
}

.header__mobile--active + .header__mobile-background {
    display:block
}

.header__mobile-content {
    overflow: auto;
    height:calc(100% - 75px)
}

.header__mobile-header {
    position: relative;
    height: var(--menu-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    overflow:hidden
}

.header__mobile-header::before {
    content: "";
    position: absolute;
    left: -1rem;
    top: 0;
    bottom: 0;
    width: calc(100vw + 1rem);
    z-index: -1;
    background:var(--header-background)
}

.header__mobile-close {
    color:var(--color-grey-26)
}

.header__mobile-search {
    display: flex;
    align-items: center;
    padding: .5rem 1rem;
    background: var(--ctx-mobile-search-bg);
    height:var(--submenu-height)
}

.header__mobile-menu {
    padding: .5rem 0;
    font-family:var(--text-headers)
}

.header__mobile-menu a {
    display: block;
    font-weight: 600;
    text-transform: uppercase;
    padding: .5rem 1rem;
    color: var(--ctx-content-fg);
    font-size: 1rem;
    letter-spacing: -0.5px
}

.header__mobile-menu a:not([href="#"]):hover {
    color:var(--accent-color)
}

.header__mobile-menu .sub-menu a {
    padding-left:2.5rem
}

.header__mobile-menu li.current-menu-item {
    border-left:.25rem solid #333
}

.header__mobile-menu li.current-menu-item a {
    padding-left:.75rem
}

.header__mobile-menu .menu-item-has-children > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right:1rem
}

.header__mobile-background {
    display: none;
    background: rgba(0, 0, 0, .35);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    animation:opacity-in var(--ease)
}

.omg-menu-sash span {
    color: #fff;
    background: var(--accent-color);
    font-size: .7rem;
    padding: .225rem .325rem .225rem .325rem;
    border-radius: var(--radius-s);
    margin-left: 5px;
    font-family: var(--text-headers);
    font-weight:bold
}

@keyframes opacity-in {
    from {
        opacity:0
    }

    to {
        opacity:1
    }
}

@keyframes mobile-nav-fly-in {
    from {
        transform: translateX(-100%);
        opacity:0
    }

    to {
        transform: translateX(0);
        opacity:1
    }
}

.icon, .Icon {
    width: 2rem;
    height: 2rem;
    fill:currentColor
}

.icon--facebook {
    --brand-color: #3b5998;
    color:#3b5998
}

.icon--youtube {
    --brand-color: #e52d27;
    color:#e52d27
}

.icon--instagram {
    --brand-color: var(--color-grey-45);
    color:var(--color-grey-45)
}

.icon--feed {
    --brand-color: #ff6600;
    color:#f60
}

.icon--steam {
    --brand-color: #171a21;
    color:#171a21
}

.icon--mastodon {
    --brand-color: #2b90d9;
    color:#2b90d9
}

.icon--hamburger use {
    fill:blue
}

.icon--hamburger use .top {
    transform:rotate(-45deg)
}

#Icon--chromeWebStore {
    fill:#eee
}

#Icon--chromeWebStore .chrome-circle {
    transform: scale(0.75) translateY(75%);
    margin-left:4px
}

#Icon--chromeWebStore .red {
    fill:#db4437
}

#Icon--chromeWebStore .green {
    fill:#43964e
}

#Icon--chromeWebStore .yellow {
    fill:#fc0
}

#Icon--chromeWebStore .outer {
    fill:#fff
}

#Icon--chromeWebStore .inner {
    fill:#5080d8
}

html, body {
    background:var(--ctx-page-bg)
}

.content-container, .primary-container {
    display: flex;
    max-width: 1290px;
    padding:0 30px
}

@media screen and (max-width: 1000px) {
    .content-container, .primary-container {
        padding:0 15px
    }
}

@media screen and (max-width: 800px) {
    .content-container, .primary-container {
        padding:unset
    }
}

.primary-container {
    max-width:1260px
}

body:not(.post--hero):not(.post--with-banner) .primary-container {
    margin-top:0
}

@media screen and (min-width: 1281px) {
    body:not(.post--hero):not(.post--with-banner) .primary-container {
        border-radius: var(--radius-l);
        margin-top:.5rem
    }
}

.primary {
    flex: 0 1 840px;
    padding: 0 45px;
    margin: 30px 30px 30px 0;
    max-width:calc(100% - 360px)
}

.post-template-page_one-column .primary {
    margin-right: 0;
    width: 840px;
    max-width:100%
}

.post-template-page_one-column .primary-container {
    justify-content:center
}

.loop {
    flex: 0 1 840px;
    margin: 30px 30px 30px 0;
    max-width:calc(100% - 390px)
}

.loop--fw {
    flex: 0 1 1230px;
    max-width: 100%;
    margin:0
}

.sidebar {
    flex: 0 0 330px;
    width: 330px;
    padding:30px 30px 30px 0
}

.loop + .sidebar {
    margin-left: auto;
    padding:30px 0 30px 30px
}

.sidebar .widget {
    padding-bottom:20px
}

.sidebar a {
    color:var(--ctx-sidebar-link-fg)
}

.sidebar a:hover {
    color:var(--ctx-post-link-hover)
}

.sidebar .widget-title, .sidebar .wp-block-heading {
    font-size: 1.5rem;
    color: var(--ctx-sidebar-title-fg);
    margin-bottom:1.5rem
}

:is(.archive, .paged) .sidebar :is(.widget-title, .wp-block-heading) {
    margin-bottom:.5rem
}

.sidebar .widget.widget_block {
    margin-bottom:5px
}

.above-comments .widget {
    padding:20px 0
}

@media only screen and (max-width: 1000px) {
    .primary, .loop {
        padding: 0 1rem;
        margin:30px 30px 30px 0
    }
}

@media only screen and (max-width: 800px) {
    .primary, .loop {
        flex: 1 0 100%;
        max-width: 100%;
        min-height: 100vh;
        margin:1rem 0 0
    }

    .loop--fw {
        flex: 1 0 100%;
        padding:0 1rem
    }

    .sidebar, .loop + .sidebar {
        flex: 1 0 100%;
        width: 100%;
        padding:30px 1rem
    }

    .content-container, .primary-container {
        flex-wrap:wrap
    }
}

@keyframes splide-loading {
    0% {
        transform:rotate(0)
    }

    to {
        transform:rotate(1turn)
    }
}

.splide__track--draggable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select:none
}

.splide__track--fade > .splide__list {
    display:block
}

.splide__track--fade > .splide__list > .splide__slide {
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    z-index:0
}

.splide__track--fade > .splide__list > .splide__slide.is-active {
    opacity: 1;
    position: relative;
    z-index:1
}

.splide--rtl {
    direction:rtl
}

.splide__track--ttb > .splide__list {
    display:block
}

.splide__container {
    box-sizing: border-box;
    position:relative
}

.splide__list {
    backface-visibility: hidden;
    display: flex;
    height: 100%;
    margin: 0 !important;
    padding:0 !important
}

.splide.is-initialized:not(.is-active) .splide__list {
    display:block
}

.splide__pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    pointer-events:none
}

.splide__pagination li {
    display: inline-block;
    line-height: 1;
    list-style-type: none;
    margin: 0;
    pointer-events:auto
}

.splide__progress__bar {
    width:0
}

.splide {
    position: relative;
    visibility:hidden
}

.splide.is-initialized, .splide.is-rendered {
    visibility:visible
}

.splide__slide {
    backface-visibility: hidden;
    box-sizing: border-box;
    flex-shrink: 0;
    list-style-type: none !important;
    margin: 0;
    position:relative
}

.splide__slide img {
    vertical-align:bottom
}

.splide__spinner {
    animation: splide-loading 1s linear infinite;
    border: 2px solid #999;
    border-left-color: rgba(0, 0, 0, 0);
    border-radius: 50%;
    bottom: 0;
    contain: strict;
    display: inline-block;
    height: 20px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width:20px
}

.splide__sr {
    clip: rect(0 0 0 0);
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width:1px
}

.splide__toggle.is-active .splide__toggle__play, .splide__toggle__pause {
    display:none
}

.splide__toggle.is-active .splide__toggle__pause {
    display:inline
}

.splide__track {
    overflow: hidden;
    position: relative;
    z-index:0
}

.splide__arrow {
    align-items: center;
    background: #ccc;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    height: 2em;
    justify-content: center;
    opacity: .7;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2em;
    z-index:1
}

.splide__arrow svg {
    fill: #000;
    height: 1.2em;
    width:1.2em
}

.splide__arrow:hover:not(:disabled) {
    opacity:.9
}

.splide__arrow:disabled {
    opacity:.3
}

.splide__arrow:focus-visible {
    outline: 3px solid #0bf;
    outline-offset:3px
}

.splide__arrow--prev {
    left:1em
}

.splide__arrow--prev svg {
    transform:scaleX(-1)
}

.splide__arrow--next {
    right:1em
}

.splide.is-focus-in .splide__arrow:focus {
    outline: 3px solid #0bf;
    outline-offset:3px
}

.splide__pagination {
    left: 0;
    padding: 0 1em;
    position: absolute;
    z-index: 1;
    bottom: 1.5em;
    right: 2rem;
    justify-content:flex-end
}

.splide__pagination__page {
    background: #ccc;
    border: 0;
    border-radius: 50%;
    display: inline-block;
    height: 8px;
    margin: 3px;
    opacity: .7;
    padding: 0;
    position: relative;
    transition: transform .2s linear;
    width:8px
}

.splide__pagination__page.is-active {
    background: #fff;
    transform: scale(1.4);
    z-index:1
}

.splide__pagination__page:hover {
    cursor: pointer;
    opacity:.9
}

.splide__pagination__page:focus-visible {
    outline: 3px solid #0bf;
    outline-offset:3px
}

.splide.is-focus-in .splide__pagination__page:focus {
    outline: 3px solid #0bf;
    outline-offset:3px
}

.splide__arrow {
    cursor: pointer;
    transition: transform 100ms ease-in;
    opacity: 1;
    background: #fff;
    font-size: 17px;
    box-shadow:var(--shadow-1-bottom-only)
}

.splide__arrow:disabled {
    display:none
}

.splide__arrow svg {
    width: 1rem;
    height:1rem
}

.splide:not(:hover) .splide__arrow--next {
    transform:translateX(100px)
}

.splide:not(:hover) .splide__arrow--prev {
    transform:translateX(-100px)
}

.chart-widget {
    position: relative;
    display: flex;
    z-index: 0;
    flex-direction: column;
    overflow: hidden;
    border-radius:var(--radius-l)
}

.chart-widget__background {
    filter: blur(4px);
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: -4px;
    right:-4px
}

.chart-widget__background img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit:cover
}

.chart-widget__content {
    z-index:1
}

.chart-widget__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin:1.125rem 0
}

.chart-widget__row {
    counter-increment: li;
    background: rgba(51, 51, 51, .66);
    font-size: 1rem;
    margin-bottom: .5rem;
    padding-left: .5rem;
    transition: background 150ms ease-in;
    border-top-right-radius: .25rem;
    border-bottom-right-radius:.25rem
}

.chart-widget__row:hover {
    background:rgba(51, 51, 51, .85)
}

.chart-widget__row::before {
    color: var(--color-orange-ff);
    font-weight: 600;
    content: counter(li) "."
}

.chart-widget__row[data-number]::before {
    content: attr(data-number) "."
}

.chart-widget__row--red::before {
    color:#db0000
}

a.chart-widget__link {
    color: #fff;
    padding-right: 30px;
    transition:padding-right 150ms ease-in
}

a.chart-widget__link::after {
    content: "›";
    color: var(--color-yellow-ff);
    margin-left:5px
}

a.chart-widget__link:hover {
    color: #fff;
    padding-right:50px
}

.chart-widget__title {
    background: var(--ctx-sidebar-dsq-bg);
    margin: 18px 32px;
    border-radius:var(--radius-s)
}

.chart-widget__title h3 {
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
    padding: .5rem 1.875rem;
    font-size: 1.125rem;
    margin:0
}

.disqus-widget {
    margin-bottom:.5rem
}

.disqus-widget__comment {
    display:flex
}

.disqus-widget__comment + .disqus-widget__comment {
    margin-top:1rem
}

.disqus-widget__content {
    flex: 1 0;
    width: 3.875rem;
    position: relative;
    margin-left: 1rem;
    padding: .5rem;
    border-radius: var(--radius-l);
    background:var(--ctx-sidebar-dsq-bg)
}

.disqus-widget__content:after {
    content: "";
    position: absolute;
    top: .5rem;
    left: -13px;
    border-top: 13px solid rgba(0, 0, 0, 0);
    border-bottom: 13px solid rgba(0, 0, 0, 0);
    border-right:13px solid var(--ctx-sidebar-dsq-bg)
}

.disqus-widget__text {
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.75;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-word;
    color:var(--ctx-content-fg)
}

.disqus-widget__link {
    display: block;
    font-size: .675rem;
    text-align: right;
    line-height: 1.25;
    margin-top:.25rem
}

a.disqus-widget__user {
    color: var(--accent-color);
    font-weight:700
}

.disqus-widget__avatar {
    flex: 0 0 2rem;
    margin-right: .875rem;
    margin-top: .25rem;
    width: 2rem;
    height: 2rem;
    position: relative;
    border: 1px solid var(--color-grey-9a);
    border-radius: 1rem;
    overflow:hidden
}

.sidebar .jetpack-display-remote-posts {
    margin: 1.5rem 0;
    display: grid;
    grid-template-columns: 145px auto;
    grid-gap: 1.5rem .75rem;
    grid-auto-flow:dense
}

.sidebar .jetpack-display-remote-posts h4 {
    margin: 0;
    grid-column: 2;
    display: inline-block;
    line-height: 1.3125rem;
    max-width: 180px;
    color: var(--color-grey-33);
    font-weight: 500;
    font-size: 15px;
    font-family:var(--text-headers)
}

.sidebar .jetpack-display-remote-posts h4 a {
    color:var(--ctx-sidebar-title-fg)
}

.sidebar .jetpack-display-remote-posts > a {
    grid-column: 1;
    width: 100%;
    display: block;
    overflow:hidden
}

.sidebar .jetpack-display-remote-posts > a img {
    width: 145px;
    border-radius: var(--radius-s);
    height: 82.8571428571px;
    -o-object-fit: cover;
    object-fit: cover;
    transition: transform .2s ease-in;
    transform:translate3d(0, 0, 0)
}

.sidebar .jetpack-display-remote-posts h4:not(:first-child), .sidebar .jetpack-display-remote-posts > a:not(:nth-child(2)) {
    margin-top:0
}

.sidebar .jetpack-display-remote-posts p {
    grid-column: span 2;
    font-size: .875rem;
    line-height:1.3125rem
}

.sidebar .jetpack-display-remote-posts > a:hover img, .sidebar .jetpack-display-remote-posts h4:hover + a img {
    transform:scale(1.05)
}

.sidebar .widget_jetpack_display_posts_widget .widget-title {
    margin-bottom: 2px;
    font-weight:bold
}

.MostPopular-item {
    position: relative;
    margin-bottom: .5rem;
    transition: background .2s ease-out;
    word-break:normal
}

.MostPopular-item:last-child {
    margin-bottom:-0.5rem
}

.MostPopular-link {
    color: var(--ctx-sidebar-link-fg);
    display: flex;
    align-items: flex-start;
    font-size: 15px;
    line-height:19px
}

.MostPopular-caption {
    display: block;
    font-weight: 600;
    font-family: var(--text-headers);
    color: var(--color-blue-05);
    margin-bottom: .1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis
}

.MostPopular-text {
    display: block;
    color: var(--ctx-sidebar-title-fg);
    font-weight: 500;
    font-family:var(--text-headers)
}

.MostPopular-title {
    width: 147px;
    margin-left: 8px;
    flex: 1;
    display:inline-block
}

.most-popular__thumbnail-container {
    flex: 0 0 144px;
    width: 144px;
    height: 100px;
    overflow: hidden;
    border-radius:var(--radius-s)
}

.most-popular-thumbnail {
    width: 140px;
    height: 100px;
    background: no-repeat center;
    background-size: cover;
    border-radius: var(--radius-s);
    transition: transform .2s ease-in;
    transform:translate3d(0, 0, 0)
}

.MostPopular-item:hover .most-popular-thumbnail {
    transform:scale(1.05)
}

.most-popular-thumbnail img {
    border-radius:var(--radius-s)
}

.portholes-widget .portholes-layout__title {
    font-size: 1.2rem;
    padding:0
}

.portholes-widget .portholes-layout__subtitle {
    font-size: 1rem;
    letter-spacing:-0.5px
}

.portholes-widget .layout__image-container.portholes-layout__image {
    --porthole-size: 75px
}

.portholes-widget.homepage-layout--dark-mode {
    --grid-basis: 260px
}

a.QuotesWidget-link {
    display: block;
    font-family: var(--text-headers);
    background: var(--color-grey-f4);
    color: var(--color-grey-45);
    border-radius: 3px;
    font-weight: 600;
    padding: 1rem;
    line-height: 1.25;
    text-transform: uppercase;
    font-style: italic;
    transition:box-shadow 150ms ease-in
}

a.QuotesWidget-link:hover {
    box-shadow:var(--shadow-2)
}

.QuotesWidget-source {
    text-align: right;
    font-size: .875rem;
    font-style: italic;
    margin: .25rem 0 1rem;
    color:var(--color-grey-66)
}

.related-post {
    --bg-color: var(--color-grey-1e);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: var(--radius-l);
    overflow: hidden;
    height: 130px;
    transition:all var(--ease)
}

.related-post:hover {
    transform:translateY(-3px)
}

@media (prefers-color-scheme: light) {
    .related-post {
        box-shadow:var(--shadow-2)
    }
}

.related-post__background {
    flex: 0 0 200px;
    position: relative;
    transition:box-shadow var(--ease)
}

.related-post__background img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit:cover
}

.related-post__background:after {
    content: "";
    display: block;
    padding-top:130px
}

.related-post__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin: 0 2rem;
    flex:1
}

a.related-post__link {
    color: var(--link-color);
    display: flex;
    white-space: nowrap;
    align-items: center;
    font-size: .875rem;
    margin-right:.5rem
}

a.related-post__link svg {
    width: 1.25rem;
    height:1.25rem
}

@media screen and (max-width: 1000px) {
    .related-post__background {
        flex:0 0 130px
    }

    .related-post__content {
        margin:0 1rem
    }

    a.related-post__link {
        display:none
    }
}

a.related-post__title {
    font-weight: 800;
    line-height: 1.2;
    font-family: var(--text-primary);
    color: var(--color-grey-33);
    flex: 1 0;
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient:vertical
}

.above-comments a.related-post__title {
    color:#fff
}

a.related-post__title:hover {
    color:var(--color-orange-ff)
}

@media screen and (min-width: 1001px) {
    a.related-post__title {
        font-size: 1.25rem;
        -webkit-line-clamp:3
    }
}

.related-post__coverline {
    display: block;
    margin-bottom: .25rem;
    color: var(--color-orange-ff);
    font-size: .875rem;
    font-weight: 700;
    line-height:1
}

.omg-social-proof {
    display: flex;
    justify-content: space-between;
    background: var(--ctx-sidebar-dsq-bg);
    padding: .75rem;
    border-radius:var(--radius-l)
}

a.omg-social-proof__network {
    font-size: 1rem;
    font-weight: 500;
    font-family: var(--text-headers);
    display: flex;
    align-items: center;
    transition: color ease-in 150ms;
    color:var(--ctx-content-fg)
}

a.omg-social-proof__network .icon {
    color: var(--ctx-content-fg);
    transform: translateZ(0);
    transition: filter ease-in 150ms;
    width: 1rem;
    height: 1rem;
    margin-right:.25rem
}

a.omg-social-proof__network:hover {
    color:var(--color-orange-ff)
}

a.omg-social-proof__network:hover .icon {
    filter:none
}

.VideoWidget-row {
    display: block;
    background: var(--color-red-f2);
    padding: 1rem;
    transition: all var(--ease);
    border-radius: var(--radius-l);
    margin-bottom:.5rem
}

.VideoWidget-row:hover {
    box-shadow: var(--shadow-2);
    background:var(--color-red-f2)
}

.VideoWidget-row + .VideoWidget-row {
    margin-top:1rem
}

.VideoWidget-image {
    position:relative
}

.VideoWidget-thumbnail {
    width: 100%;
    height:auto
}

.VideoWidget-thumbnail img {
    display: block;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius:var(--radius-l)
}

.VideoWidget-caption {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(50, 49, 54, .85);
    color: #fff;
    max-width: 100%;
    overflow:hidden
}

.VideoWidget-captionText {
    padding: 0 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis
}

.VideoWidget-icon {
    width: 48px;
    height: 34px;
    flex: 0 0 48px;
    padding: 8px 12px;
    background:var(--color-red-f2)
}

.VideoWidget-title {
    font-family: var(--text-headers);
    color: #fff;
    font-weight: 600;
    font-size: 1.5rem;
    text-align: center;
    margin-top: 1rem;
    line-height:1.125
}

.above-comments .widget_text {
    text-align:center
}

.above-comments .widget_text .textwidget {
    display: inline-block;
    max-width:100%
}

.pds-box {
    border-radius: 3px !important;
    border-width:1px !important
}

.pds-vote-button {
    border-radius: 3px !important;
    background:var(--color-grey-f6) !important
}

#disqus_thread {
    clear: both;
    padding:12px 0
}

.disqus_button {
    font-size: 1.4rem;
    background: var(--accent-color);
    font-family: var(--text-headers);
    color: #fff;
    padding: .5rem 1rem;
    border-radius: var(--radius-s);
    border: none;
    box-shadow: none;
    transition:var(--ease)
}

.disqus_button:hover {
    opacity:.7
}

:root {
    --title-color: var(--color-black);
    --description-color: var(--color-grey-9a);
    --date-color: var(--description-color);
    --link-color: var(--color-orange-f7);
    --link-color-hover: var(--color-grey-1e)
}

@media (prefers-color-scheme: dark) {
    :root {
        --title-color: var(--color-white);
        --description-color: var(--color-grey-cd);
        --date-color: var(--description-color);
        --link-color: var(--color-orange-f7);
        --link-color-hover: var(--color-grey-1e)
    }
}

.homepage-layout__bg-container {
    position:relative
}

.homepage-layout__bg-container.has-background {
    padding:2rem 0
}

.homepage-layout__bg-container.layout__header-container {
    padding-bottom:0
}

#after-header + .homepage-layout__bg-container:not(:is(.has-background, .homepage-layout--full-width[data-layout=mosaic], [data-layout=image_slideshow])) {
    margin-top:2rem
}

.homepage-layout__bg-container::before {
    content: "";
    background: var(--bg-color);
    position: absolute;
    top: 0;
    left: 50%;
    right: 0;
    bottom: 0;
    width: 100%;
    transform: translateX(-50%);
    z-index:0
}

.homepage-layout__bg-container .content-container {
    background:none
}

.homepage-layout--full-width[data-layout=mosaic] + .homepage-layout__bg-container:not(.has-background), .homepage-layout__bg-container:not(:is(.homepage-layout--full-width[data-layout=mosaic], .has-background)) + .has-background, .has-background + .homepage-layout__bg-container:not(.has-background), .layout__header-container + .homepage-layout__bg-container:not(.has-background), .homepage-layout__bg-container:not(.has-background) + .homepage-layout__bg-container:not(.has-background) {
    margin-top:2.75rem
}

:not(.layout__header-container).homepage-layout--light-mode + .homepage-layout--light-mode, :not(.layout__header-container).homepage-layout--dark-mode + .homepage-layout--dark-mode {
    padding-top:0
}

.homepage-layout--dark-mode {
    --title-color: var(--color-white);
    --description-color: var(--color-white);
    --date-color: var(--description-color);
    --link-color: var(--color-white);
    --link-color-hover: var(--color-grey-ad);
    --bg-color: var(--color-black);
    --ctx-home-divider-bg: var(--color-grey-26);
    padding:1.5rem
}

.homepage-layout--light-mode {
    --title-color: var(--color-grey-f5);
    --description-color: var(--color-grey-f5);
    --date-color: var(--description-color);
    --link-color: var(--color-grey-1e);
    --link-color-hover: var(--color-grey-1e);
    --bg-color: var(--purple-crave);
    --ctx-content-fg: var(--color-grey-42);
    padding: 1.5rem;
    border-radius:var(--radius-l)
}

@media (prefers-color-scheme: dark) {
    .homepage-layout--light-mode {
        --title-color: var(--color-white);
        --description-color: var(--color-white);
        --date-color: var(--description-color);
        --link-color: var(--color-white);
        --link-color-hover: var(--color-grey-ad);
        --bg-color: var(--color-grey-33)
    }
}

.layout__title {
    margin-bottom:0
}

.layout__title-link, .layout__title-link:visited {
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: -1px;
    color: var(--title-color);
    display:block
}

.layout__title-link:hover, .layout__title-link:visited:hover {
    color:var(--accent-color)
}

.layout__image-container img {
    contain: paint;
    transition:opacity var(--ease)
}

.layout__description {
    color: var(--description-color);
    font-size: .875rem;
    line-height: 1.5;
    margin:0 0 1rem
}

.layout__meta {
    display: flex;
    font-size: .75rem;
    align-items: center;
    margin-top: 1.25rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing:-0.5px
}

.homepage-layout--dark-mode .layout__meta {
    font-weight:400
}

.layout__date {
    color:var(--date-color)
}

.layout__date + .layout__comments::before {
    content: "·";
    margin: 0 3px 0 5px;
    color: var(--date-color);
    font-weight:500
}

.layout__comments a {
    color:var(--date-color)
}

.layout__comments a:hover {
    color:var(--date-color)
}

.layout__caption {
    display: block;
    font-weight: 700;
    font-size: .875rem;
    min-height: 1.25em;
    font-family: var(--text-headers);
    color: var(--secondary-color);
    margin-top: 1.25rem;
    margin-bottom: .75rem;
    text-transform: uppercase;
    letter-spacing:-0.5px
}

.homepage-layout--dark-mode .layout__caption {
    color:var(--accent-color)
}

@media screen and (max-width: 700px) {
    .layout__title {
        margin-bottom:.25rem
    }
}

.layout__header {
    align-items: center;
    display:flex
}

.layout__header h2, .layout__header h3 {
    margin: 0;
    font-weight: normal;
    font-size: 2rem;
    letter-spacing: -1px;
    color:var(--title-color)
}

.layout__header.with-divider:not(.has-subtitle)::after {
    content: "";
    background: var(--ctx-home-divider-bg);
    height: 1px;
    flex: 1;
    margin:.75rem 0
}

.layout__header.with-divider.has-title::after {
    margin:0 0 0 1rem
}

.homepage-layout--light-mode .layout__header.with-divider:not(.has-subtitle)::after {
    background:rgba(255, 255, 255, .13)
}

@media screen and (max-width: 1366px) {
    .layout__header h2, .layout__header h3 {
        font-size:1.5rem
    }
}

.layout__subtitle {
    font-size: 1rem;
    color: var(--color-grey-ad);
    align-items: center;
    display: flex;
    font-family:var(--accent-font)
}

.loop--fw .layout__subtitle {
    line-height:1.5
}

.layout__header.has-subtitle + .layout__subtitle::after {
    content: "";
    background: var(--ctx-home-divider-bg);
    height: 1px;
    flex: 1;
    margin:.75rem 0 .5rem 1rem
}

:is(.paged, .archive) .layout__header {
    margin-bottom:1rem
}

.big-pod-layout {
    display: grid;
    grid-gap: 2.25rem 1.75rem;
    grid-auto-flow: dense;
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    align-items: stretch;
    --last-column: 3;
    --pod-bg: var(--color-grey-f5);
    --inner-radius: var(--radius-l)
}

.big-pod-layout .layout__title-link {
    border-radius: var(--inner-radius);
    background: var(--pod-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding:0 4rem
}

.big-pod-layout .layout__caption {
    font-size: .925rem;
    letter-spacing:0
}

.big-pod-layout.text-right .layout__title-link {
    grid-column:var(--last-column)
}

.big-pod-layout img {
    border-radius: var(--inner-radius);
    grid-column: span 2;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit:cover
}

.big-pod-layout h3 {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -1.75px;
    line-height: 1.1;
    color: var(--color-black);
    transition:ease-in-out 250ms
}

.big-pod-layout .cta {
    margin: .75rem 0 1.25rem;
    font-size:1rem
}

.big-pod-layout .cta--button {
    color: #fff;
    border-radius: 2rem;
    line-height: 1;
    background: var(--color-black);
    padding: .5rem 1rem;
    letter-spacing: 0;
    font-weight: normal;
    font-size: 1rem;
    margin-top: 1.5rem;
    transition:ease-in-out 250ms
}

.big-pod-layout .cta--button:hover {
    background:var(--accent-color)
}

.big-pod-layout .cta--custom {
    font-size: 1rem;
    color: var(--date-color);
    font-weight: normal;
    font-family: var(--text-headers);
    margin-top: 1.25rem;
    letter-spacing:-0.25px
}

.homepage-layout--dark-mode .big-pod-layout {
    --pod-bg: var(--orange-crave)
}

.homepage-layout--light-mode .big-pod-layout {
    --pod-bg: var(--color-black);
    --inner-radius: var(--radius-l)
}

.homepage-layout--light-mode .big-pod-layout .cta--button {
    color: #000;
    background:#fff
}

.homepage-layout--light-mode .big-pod-layout h3 {
    color:var(--color-white)
}

.homepage-layout--dark-mode .big-pod-layout .layout__caption {
    color:#fff
}

.big-pod-layout h3:hover {
    color:var(--accent-color)
}

@media screen and (max-width: 1200px) {
    .big-pod-layout h3 {
        font-size:2.2rem
    }

    .big-pod-layout .cta {
        margin-top:1rem
    }
}

@media screen and (max-width: 1024px) {
    .big-pod-layout .layout__title-link {
        padding:1rem 2rem
    }
}

@media (max-width: 1000px) {
    .big-pod-layout {
        grid-gap: 0;
        --inner-radius: 0;
        --last-column: 2;
        border-radius: var(--radius-l);
        overflow: hidden;
        grid-template-columns:repeat(2, 1fr)
    }

    .big-pod-layout img {
        grid-column:span 1
    }
}

@media screen and (max-width: 800px) {
    .big-pod-layout h3 {
        font-size:1.75rem
    }

    .big-pod-layout .cta {
        font-size: .825rem;
        margin-top:1rem
    }

    .big-pod-layout .layout__caption {
        font-size: .825rem;
        margin-bottom:.5rem
    }
}

@media (max-width: 600px) {
    .big-pod-layout {
        grid-template-columns: 1fr;
        --last-column: 1
    }

    .big-pod-layout .layout__title-link {
        padding:1rem 2rem
    }

    .big-pod-layout .layout__caption {
        margin-top:1rem
    }

    .big-pod-layout .cta {
        margin-bottom: 1rem;
        margin-top:1rem
    }

    .big-pod-layout h3 {
        font-size: 1.45rem;
        letter-spacing:-1px
    }

    .big-pod-layout img {
        grid-row:1
    }
}

.highlights-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 2rem 1rem;
    align-items: flex-start;
    justify-content: center;
    margin-bottom:.5rem
}

.highlight-post {
    display: flex;
    justify-content: flex-start;
    align-items:flex-start
}

.highlight-post__background {
    flex: 0 0 115px;
    position: relative;
    transition:box-shadow var(--ease)
}

.highlight-post__background img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius:var(--radius-l)
}

.highlight-post__background:after {
    content: "";
    display: block;
    padding-top:115px
}

.highlight-post__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-left: 1rem;
    max-width:220px
}

a.highlight-post__title {
    font-size: 1.3rem;
    letter-spacing: -1px;
    font-weight: 700;
    line-height: 1.2;
    font-family: var(--text-headers);
    color: var(--title-color);
    flex:1 0
}

.above-comments a.highlight-post__title {
    color: #fff;
    font-size:1rem
}

a.highlight-post__title:hover {
    color:var(--color-orange-ff)
}

.highlight-post__coverline {
    display: block;
    font-family: var(--text-headers);
    letter-spacing: -0.5px;
    color: var(--color-blue-05);
    margin-bottom: .25rem;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1;
    text-transform:uppercase
}

.highlight-post__date {
    line-height: 1;
    font-size: .75rem;
    margin-top: .5rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: -0.5px;
    color:var(--date-color)
}

.html-layout {
    width: 100%;
    overflow: hidden;
    margin-bottom:2rem
}

.list-layout {
    display: flex;
    margin-bottom:2rem
}

@media screen and (max-width: 850px) {
    .list-layout {
        display:block
    }
}

.list-layout .slider-layout__slide-content {
    padding-bottom:1rem
}

.list-layout__item {
    display: flex;
    align-items: flex-start;
    margin-bottom:.5rem
}

.list-layout__item .layout__title-link {
    font-size: 1.1rem;
    margin-left: 1rem;
    position:relative
}

.list-layout__item .layout__title-link::before {
    position: absolute;
    top: -0.125rem;
    left: -1rem;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24"><path fill="currentColor" d="M8.809,23.588l-1.617-1.176L14.764,12L7.191,1.588l1.617-1.176l8,11c0.255,0.351,0.255,0.825,0,1.176 L8.809,23.588z"></path></svg>');
    display: inline-block;
    height:8px
}

.mosaic-layout__container {
    --hero-width: 66%;
    --aspect-ratio: 56%;
    --gradient: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 60%);
    --link-size: 3rem;
    font-weight: 700;
    position:relative
}

.mosaic-layout__container .splide:not(.is-active) {
    visibility:visible
}

.mosaic-layout__container .splide:not(.is-active) .splide__list {
    display: grid;
    grid-template-areas: "hero stack" "hero stack";
    grid-template-columns: var(--hero-width) calc(100% - var(--hero-width) - 1.5rem);
    grid-gap:12px 1.5rem
}

.mosaic-layout__container .splide__track {
    filter: none;
    transform:translateZ(0)
}

.mosaic-tile {
    grid-area: stack;
    grid-row: auto;
    grid-column: auto;
    position: relative;
    overflow:hidden
}

.mosaic-tile:first-child {
    grid-area:hero
}

.mosaic-tile--stacked {
    --link-size: 1.75rem
}

.mosaic-tile--stacked .mosaic-layout__content {
    padding:0 1.75rem .5rem
}

.homepage-layout__bg-container:not(:is(.has-background, .homepage-layout--full-width[data-layout=mosaic])) .mosaic-tile--stacked {
    --link-size: 1.5rem
}

.mosaic-tile--hero .mosaic-layout__content {
    padding:0 2.75rem .5rem
}

.mosaic-tile__container {
    height: 100%;
    z-index:0
}

.mosaic-layout__image-container {
    height: 100%;
    position: relative;
    padding-top: var(--aspect-ratio);
    overflow: hidden;
    z-index: -1;
    border-radius: 1rem;
    background:#000
}

.mosaic-layout__image-container img {
    opacity: .9;
    transition: transform .6s cubic-bezier(0.165, 0.85, 0.45, 1);
    position: absolute;
    top: 0;
    height: 100%;
    left: 0;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top center;
    object-position: top center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    will-change:transform
}

.mosaic-tile:hover .mosaic-layout__image-container img {
    transform:scale(1.01)
}

.mosaic-layout__link-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index:1
}

.mosaic-layout__content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0 2rem .5rem;
    position: absolute;
    bottom: 0;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    font-weight: 400;
    width: 100%;
    z-index: 2;
    background:linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0))
}

a.mosaic-layout__category {
    background: var(--color-orange-ff);
    color: #fff;
    font-size: .725rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1;
    padding: .25rem .375rem;
    margin-bottom: .5rem;
    transition: background 150ms ease-in;
    z-index: 2;
    border-radius:var(--radius-s)
}

a.mosaic-layout__category:hover {
    background:var(--color-grey-33)
}

a.mosaic-layout__link {
    display: block;
    color: #fff;
    font-family: var(--text-headers);
    font-size: var(--link-size);
    line-height: 1.1;
    text-shadow: 0 0 4px rgba(0, 0, 0, .25);
    font-weight: 700;
    letter-spacing: -0.5px;
    flex:1 0
}

a.mosaic-layout__link .post-title--coverline {
    font-weight:700
}

@media screen and (max-width: 1024px) {
    a.mosaic-layout__link {
        padding-bottom:.5rem
    }
}

.loop__atf a.mosaic-layout__link {
    font-size:1.125rem
}

.mosaic-layout__meta {
    font-size: .75rem;
    z-index: 1;
    color: var(--color-grey-dd);
    padding-bottom: 1rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--color-white);
    opacity:.7
}

.mosaic-layout__meta .post-meta__divider {
    margin:0 .25rem
}

.mosaic-layout__meta a, .mosaic-layout__meta a.post-author {
    color:var(--color-white)
}

@media screen and (min-width: 801px) {
    .homepage-layout--full-width[data-layout=mosaic] {
        padding:0
    }

    .homepage-layout--full-width[data-layout=mosaic] .mosaic-layout__container .splide:not(.is-active) .splide__list {
        grid-template-columns: var(--hero-width) calc(100% - var(--hero-width));
        grid-gap:0
    }

    .homepage-layout--full-width[data-layout=mosaic] .mosaic-layout__container .mosaic-layout__image-container {
        border-radius:0
    }
}

@media screen and (min-width: 801px) {
    .homepage-layout__bg-container:not(.homepage-layout--full-width) .mosaic-layout__content {
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius:1rem
    }
}

@media screen and (min-width: 1025px) {
    .mosaic-tile:first-child a.mosaic-layout__link {
        letter-spacing:-1.5px
    }
}

@media screen and (max-width: 1280px) {
    .mosaic-tile--hero {
        --link-size: 2.5rem
    }

    .mosaic-tile--stacked {
        --link-size: 1.5rem
    }
}

@media screen and (max-width: 1024px) {
    .mosaic-tile--hero {
        --link-size: 1.5rem
    }

    .mosaic-layout__container .splide:not(.is-active) .splide__list {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: "hero stack stack";
        grid-gap:1rem
    }

    .mosaic-layout__image-container {
        padding-top:130%
    }

    .homepage-layout--full-width[data-layout=mosaic] .mosaic-layout__container .splide:not(.is-active) .splide__list {
        grid-template-columns:1fr 1fr 1fr
    }
}

@media screen and (max-width: 800px) {
    .mosaic-layout__container .splide:not(.is-active) .mosaic-tile:not(:first-child) {
        display:none
    }

    :is(.homepage-layout--full-width[data-layout=mosaic] .mosaic-layout__container, .mosaic-layout__container) .splide:not(.is-active) .splide__list {
        grid-template-columns: 1fr;
        grid-template-areas: "hero" "stack" "stack";
        grid-gap:0
    }

    :not(.homepage-layout--full-width) > .mosaic-layout__container {
        margin-left: -1rem;
        margin-right:-1rem
    }

    .mosaic-layout__image-container {
        border-radius: 0;
        padding-top:var(--aspect-ratio)
    }
}

@media (min-width: 1920px) {
    .mosaic-tile--hero .mosaic-layout__content {
        padding:0 4.75rem
    }
}

.portholes-layout {
    --grid-basis: 300px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--grid-basis), 1fr));
    grid-gap:1.5rem 3.75rem
}

.layout__title-link.portholes-layout__item {
    display: flex;
    align-items: center;
    justify-content:space-between
}

.layout__title-link.portholes-layout__item:hover .layout__title {
    transform:translateX(-0.25rem)
}

.layout__title-link.portholes-layout__item .layout__title {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    margin: 0;
    transition:transform var(--ease)
}

.portholes-layout.homepage-layout--light-mode .layout__title-link:hover {
    color:var(--color-grey-88)
}

.portholes-layout__title {
    font-family: var(--text-headers);
    color: var(--title-color);
    display: inline-block;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.2;
    padding: 2px 6px;
    margin: -2px -6px .25rem;
    border-radius: var(--radius-s);
    text-align:end
}

.portholes-layout__subtitle {
    font-family: var(--text-primary);
    font-size: 1rem;
    line-height: 1;
    letter-spacing: -0.25px;
    font-weight: normal;
    color: var(--description-color);
    text-align:end
}

.layout__image-container.portholes-layout__image {
    --porthole-size: 100px;
    flex: 0 0 var(--porthole-size);
    margin-right: 1.125rem;
    width: var(--porthole-size);
    height: var(--porthole-size);
    border-radius: 50px;
    overflow: hidden;
    will-change:transform
}

.layout__image-container.portholes-layout__image img {
    transition: transform 200ms ease-in-out;
    width: var(--porthole-size);
    height: var(--porthole-size);
    -o-object-fit: cover;
    object-fit:cover
}

.sbs-layout__content {
    flex:1 1
}

.sbs-layout__item {
    display: flex;
    align-items: flex-start;
    margin-bottom:2rem
}

@media screen and (max-width: 900px) {
    .sbs-layout__item {
        display:block
    }
}

@media screen and (max-width: 800px) {
    .sbs-layout__item {
        display:flex
    }
}

@media screen and (max-width: 600px) {
    .sbs-layout__item {
        display: block;
        margin-bottom:2rem
    }
}

.sbs-layout__item:not(:last-child) {
    padding-bottom: 2rem;
    border-bottom:1px solid var(--ctx-home-divider-bg)
}

.sbs-layout__item:last-child {
    margin-bottom:2rem
}

.sbs-layout__item.has-background {
    padding:1.25rem
}

.sbs-layout__image {
    margin-right: 1.5rem;
    flex: 0 0 350px;
    width: 350px;
    position:relative
}

.sbs-layout__image:after {
    content: "";
    display: block;
    padding-top:57.1428571429%
}

.sbs-layout__image--expanded {
    flex-basis: 450px;
    width:450px
}

.sbs-layout__image a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right:0
}

.sbs-layout__image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius:var(--radius-l)
}

@media screen and (max-width: 1200px) {
    .sbs-layout__image--expanded {
        flex-basis: 350px;
        width:350px
    }
}

@media screen and (max-width: 1080px) {
    .sbs-layout__image {
        flex: 0 0 50%;
        width:50%
    }
}

@media screen and (max-width: 900px) {
    .sbs-layout__image {
        width: 100%;
        margin-bottom:.5rem
    }
}

@media screen and (max-width: 600px) {
    .sbs-layout__image {
        width: 100%;
        margin-bottom:1rem
    }
}

.slideshow-layout {
    position: relative;
    overflow: hidden;
    --aspect-ratio: 14 / 5;
    aspect-ratio:var(--aspect-ratio)
}

.homepage-layout__bg-container:not(.has-background) + .slideshow-layout {
    margin-top:2rem
}

.slideshow-layout .splide {
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right:0
}

.splide.is-active + .slideshow-layout__placeholder {
    display:none
}

.slideshow-layout__slide, .slideshow-layout__placeholder {
    aspect-ratio:var(--aspect-ratio)
}

.slideshow-layout__slide a, .slideshow-layout__placeholder a {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right:0
}

.slideshow-layout__slide img, .slideshow-layout__placeholder img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit:cover
}

.slideshow-layout__content {
    position: absolute;
    top: 0;
    bottom: 2rem;
    left: 0;
    right: 0;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    flex-wrap:nowrap
}

.slideshow-layout__content .layout__title {
    width: 50%;
    font-size: 3rem;
    letter-spacing: -1.25px;
    font-family: var(--text-headers);
    font-weight: 700;
    line-height: 1.2;
    position: relative;
    z-index: 0;
    margin-bottom:.25rem
}

.slideshow-layout__content .layout__title span {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: .45rem 1rem;
    border-radius:.5rem
}

.slideshow-layout__content .layout__title-background {
    z-index: -1;
    position: absolute;
    top: 0;
    left:0
}

.slideshow-layout__content .layout__title-background span {
    background: var(--color-black);
    color:rgba(0, 0, 0, 0)
}

.slideshow-layout__content .layout__comments {
    margin-top: .5rem;
    background: var(--color-black);
    padding: .25rem;
    font-size: 1rem;
    line-height: 1;
    border-radius:var(--radius-s)
}

@media (max-width: 1000px) {
    .slideshow-layout__content .layout__title {
        width:75%
    }
}

@media (max-width: 800px) {
    .slideshow-layout__content {
        padding: 1rem;
        bottom:0
    }

    .slideshow-layout__content .layout__title {
        width: 100%;
        font-size:2.5rem
    }
}

@media (max-width: 600px) {
    .slideshow-layout {
        --aspect-ratio: 5 / 4
    }

    .slideshow-layout__content .layout__title {
        font-size:2rem
    }
}

.tile-layout {
    --tile-3x-minimum: 200px;
    --tile-4x-minimum: 175px;
    display: grid;
    justify-content: space-between;
    counter-reset:tile-item
}

.tile-layout .layout__title-link {
    font-size: 1.45rem;
    font-weight: 700;
    line-height:1.3
}

.tile-layout.tile-layout--no-images .layout__caption {
    margin-top:0
}

.tile-layout, .tile-layout--3x {
    grid-template-columns: repeat(3, minmax(var(--tile-3x-minimum), 1fr));
    grid-gap: 2.25rem 1.75rem;
    --tabloid-tiling: var(--tile-3x-minimum)
}

.tile-layout .tile-layout__content, .tile-layout--3x .tile-layout__content {
    padding:1rem 10px 0 5px
}

.tile-layout--4x {
    grid-template-columns: repeat(4, minmax(var(--tile-4x-minimum), 1fr));
    grid-gap: 1.5rem;
    --tabloid-tiling: var(--tile-4x-minimum)
}

.tile-layout--4x .layout__title-link {
    font-size:1.25rem
}

.tile-layout--4x .tile-layout__content {
    padding: .5rem 0;
    font-size:2rem
}

.tile-layout--4x .layout__meta {
    font-size:.75rem
}

.tile-layout--4x .layout__caption {
    margin: -0.25rem 0 .5rem
}

.tile-layout[data-style=""][data-layout="4x"] .tile-layout__image::after {
    content: "";
    display: block;
    padding-top: 100%
}

.tile-layout[data-style=""][data-layout="4x"] .layout__title-link {
    font-size: 1.3rem;
    letter-spacing: -0.5px;
    text-align: center
}

.tile-layout[data-style=""][data-layout="4x"] .layout__meta {
    justify-content:center
}

.tile-layout--tabloid {
    grid-gap: 0;
    --tile-3x-minimum: 216px;
    --tile-4x-minimum: 190px;
    grid-template-columns:repeat(auto-fit, minmax(var(--tabloid-tiling), 1fr))
}

.tile-layout--tabloid .layout__title {
    margin-bottom:0
}

.tile-layout--tabloid .tile-layout__image img {
    border-radius:0
}

.tile-layout--tabloid .layout__title-link {
    margin-top: .2rem;
    font-size: 1.2rem;
    line-height:1.2
}

.tile-layout--tabloid .tile-layout__content {
    margin-right: .75rem;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding:0
}

.tile-layout--tabloid .tile-layout__content::before {
    color: var(--accent-color);
    content: counter(tile-item);
    font-family: var(--text-headers);
    font-size: 3.1rem;
    font-weight: 600;
    margin-right:.5rem
}

.tile-layout--tabloid-no-images {
    grid-gap: 1.5rem;
    margin-bottom:0
}

.tile-layout--tabloid-no-images .tile-layout__content {
    padding: unset;
    margin: unset;
    display: block;
    padding-left: 60px;
    position:relative
}

.tile-layout--tabloid-no-images .tile-layout__content::before {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--color-grey-dd);
    content: counter(tile-item, decimal-leading-zero);
    font-size: 2.25rem;
    font-style: italic;
    font-weight: 500;
    margin-right:.25rem
}

.tile-layout--tabloid-no-images .layout__title-link {
    font-size: 1.25rem;
    line-height: 1.3;
    margin-top: -4px;
    text-transform: capitalize;
    letter-spacing:-0.25px
}

.tile-layout--pods {
    grid-gap:2rem
}

.tile-layout--pods .layout__title-link {
    font-size: 1.3rem;
    letter-spacing: -0.5px;
    font-weight: 700;
    text-align: center;
    color:var(--ctx-mobile-search-bg)
}

.tile-layout--pods .layout__meta {
    justify-content:center
}

.tile-layout--pods .layout__date {
    color:var(--date-color)
}

.tile-layout--pods .layout__title-link:hover {
    color: var(--accent-color);
    transition:ease-in-out 250ms
}

.tile-layout--pods .tile-layout__item {
    background: var(--color-grey-f5);
    border-radius:var(--radius-l)
}

.tile-layout--pods .tile-layout__content {
    padding:1rem 1.5rem 2.25rem 1.5rem
}

.tile-layout--pods .tile-layout__image img {
    border-radius:.5rem .5rem 0 0
}

.tile-layout--pods .tile-layout__image:after {
    padding-top:170px
}

.tile-layout--pods .layout__caption {
    margin: 0 0 .5rem;
    letter-spacing:-0.25px
}

.tile-layout--pods .layout__description {
    padding: 0 1.25rem .5rem 1.25rem;
    margin-top:-0.75rem
}

.homepage-layout--dark-mode .tile-layout--pods .tile-layout__item {
    background:var(--accent-color)
}

.homepage-layout--dark-mode .tile-layout--pods .layout__caption {
    color:#000
}

.homepage-layout--dark-mode .tile-layout--pods .layout__title-link {
    font-weight:500
}

.homepage-layout--light-mode .tile-layout--pods .tile-layout__item {
    background:#000
}

.homepage-layout--light-mode .tile-layout--pods .layout__title-link {
    color:#fafafa
}

.homepage-layout--light-mode .tile-layout--pods .layout__title-link:hover {
    color: var(--accent-color);
    transition:ease-in-out 250ms
}

.tile-layout__item {
    counter-increment:tile-item
}

.tile-layout__image {
    margin-right: 1.5rem;
    width: 100%;
    margin-bottom: .5rem;
    position:relative
}

.tile-layout__image:after {
    content: "";
    display: block;
    padding-top:57.1428571429%
}

.tile-layout__image a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right:0
}

.tile-layout__image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius:var(--radius-l)
}

@media (prefers-color-scheme: dark) {
    .tile-layout--pods .tile-layout__item {
        background:#000
    }

    .tile-layout--pods .layout__title-link {
        color:var(--ctx-mobile-search-fg)
    }
}

@media (max-width: 1024px) {
    .tile-layout--3x .layout__title-link {
        font-size:1.2rem
    }

    .tile-layout--4x .layout__title-link {
        font-size: 1rem;
        font-weight: 700;
        grid-gap:1rem
    }

    .tile-layout--4x, .tile-layout--3x {
        grid-gap:1rem
    }

    .tile-layout--3x .tile-layout__content {
        margin-bottom:15px
    }

    .tile-layout--pods .tile-layout__content {
        padding:1rem
    }

    .tile-layout--pods .layout__title-link {
        font-size: 1.175rem;
        font-weight: 500;
        letter-spacing:-0.6px
    }
}

@media (max-width: 1000px) {
    .tile-layout--4x {
        grid-template-columns:repeat(auto-fit, minmax(var(--tile-4x-minimum), 1fr))
    }
}

@media (max-width: 800px) {
    .tile-layout, .tile-layout--3x {
        grid-template-columns:repeat(auto-fit, minmax(var(--tile-3x-minimum), 1fr))
    }

    .tile-layout--pods .layout__title-link {
        font-size:1.25rem
    }
}

@media (max-width: 600px) {
    .tile-layout--tabloid .tile-layout__content {
        margin-bottom:1rem
    }

    .tile-layout--tabloid .layout__title-link {
        font-size:1.25rem
    }
}

.homepage__atf {
    z-index: 1;
    padding-top:.5rem
}

@media screen and (min-width: 1281px) {
    body:not(.category):not(.tag) .homepage__atf {
        filter: drop-shadow(0 4px 20px rgba(31, 31, 31, 0.4));
        padding-top: .5rem;
        transform:translateZ(0)
    }
}

.homepage__atf:empty {
    display:none
}

@media screen and (max-width: 800px) {
    .homepage__atf {
        padding-top:.4rem
    }
}

.loop__atf {
    padding-top:0
}

.loop > hr {
    width:100%
}

.layout__header-description p {
    line-height: 1.5em;
    font-family: var(--text-primary);
    margin-bottom: 1.5rem;
    color:var(--color-grey-9a)
}

.pagination__container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-size: 1rem;
    margin:3rem 0
}

.pagination {
    display: flex;
    align-items: center;
    flex-wrap:wrap
}

a.pagination__page, .pagination__button a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 3px;
    color: var(--color-grey-33);
    font-weight: 600;
    margin: .5rem .125rem;
    font-size: .875rem;
    font-family: var(--text-headers);
    background: var(--color-grey-f6);
    transition:all ease 100ms
}

a.pagination__page:hover, .pagination__button a:hover {
    background: var(--accent-color);
    color:#fff
}

a.pagination__page--current, .pagination__button a--current {
    background: var(--accent-color);
    color:#fff
}

.pagination__button svg {
    width: .875rem;
    height:.875rem
}

.pagination__button--previous svg {
    transform:rotate(180deg)
}

:is(.tag, .category, .paged, .search, .archive) .slideshow-layout {
    border-radius: var(--radius-l);
    transition:ease-in-out 250ms
}

:is(.tag, .category, .paged, .search, .archive) .slideshow-layout:hover {
    filter:saturate(0)
}

:is(.tag, .category, .paged, .search, .archive) .slideshow-layout__content .layout__title {
    font-size:2.75rem
}

:is(.tag, .category, .paged, .search, .archive) .slideshow-layout__content .layout__comments {
    font-size:.85rem
}

:is(.tag, .category, .paged, .search, .archive) .layout__header:has( + .tile-layout) {
    margin-bottom:2rem
}

:is(.tag, .category, .paged, .search, .archive) .homepage-layout .layout__description {
    font-size:.9rem
}

:is(.tag, .category, .paged, .search, .archive) .homepage-layout .layout__title-link {
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom:1rem
}

:is(.tag, .category, .paged, .search, .archive) .homepage-layout:last-child {
    margin-bottom:2rem
}

.banner-slideshow {
    background:none
}

.banner-slideshow:after {
    content: "";
    padding-top:16.2601626016%
}

@media screen and (min-width: 601px) {
    .banner-slideshow {
        margin-top:.75rem
    }
}

.banner-slideshow .splide, .banner-slideshow__placeholder {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 30px;
    right: 30px;
    overflow: hidden;
    border-radius: var(--radius-l);
    z-index: 1;
    filter: none;
    box-shadow:0 0 4px rgba(0, 0, 0, .25)
}

@media screen and (max-width: 800px) {
    .banner-slideshow .splide, .banner-slideshow__placeholder {
        left: 0;
        right: 0;
        border-radius: 0;
        filter:none
    }
}

.banner-slideshow__placeholder a {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right:0
}

.banner-slideshow__placeholder img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit:cover
}

.splide.is-active + .banner-slideshow__placeholder {
    display:none
}

.banner-slideshow__slide a {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right:0
}

.banner-slideshow__slide img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height:100%
}

.banner-slideshow__slide:after {
    display: block;
    content: "";
    padding-top:16.2601626016%
}

.post-title {
    font-size: 3.25rem;
    font-weight: 700;
    letter-spacing: -1.75px;
    line-height: 1.1;
    margin:1rem 0 1.5rem
}

@media screen and (max-width: 600px) {
    .post-title {
        text-align: center;
        font-size:2.5rem
    }
}

.post-summary + .post-title {
    margin:1rem 0 1.5rem
}

.post-title--coverline {
    color:var(--accent-color)
}

.post__hero {
    position: relative;
    min-height: 360px;
    display: flex;
    z-index:1
}

.post__hero::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--nav-height) - 1px);
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--purple-crave);
    z-index:-1
}

.post__hero img {
    animation:opacity-in 1s
}

@media screen and (max-width: 800px) {
    .post__hero .post-title {
        font-size:2.5rem
    }
}

@media screen and (max-width: 500px) {
    .post__hero {
        min-height:unset
    }

    .post__hero .post-title {
        font-size:2rem
    }
}

:is(.post__hero, .post__wide-width-hero) .post-title {
    font-size: 3.5rem;
    color:var(--color-white)
}

.post__hero-header-container {
    width: 100%;
    max-width:1260px
}

.post__hero-image-container {
    position: absolute;
    top: calc(-1 * var(--nav-height) - 1px);
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    overflow: hidden;
    opacity:.25
}

.post__hero-image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top;
    object-position:top
}

.post__hero-video {
    position: relative;
    padding-bottom: 56.25%;
    overflow: hidden;
    max-width: 100%;
    height: auto;
    margin-bottom:1em
}

.post__hero-video iframe, .post__hero-video object, .post__hero-video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%
}

.post__hero-video .container-lazyload {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right:0
}

.post__hero-header {
    color: #fff;
    padding: 3rem 45px;
    margin: 0 30px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    text-shadow: 0px 1px 4px rgba(0, 0, 0, .25);
    max-width: calc(100% - 360px);
    width:100%
}

.post__hero-header .post-summary {
    color: #fff;
    font-weight: 400;
    margin-bottom:.5rem
}

.post__hero-header .post-meta {
    color: #fff;
    margin-bottom: .25rem;
    text-shadow:none
}

@media screen and (max-width: 1280px) {
    .post__hero-header {
        max-width: calc(100% - 60px);
        width:840px
    }
}

@media screen and (max-width: 800px) {
    .post__hero-header {
        max-width: none;
        width: 100%;
        padding: 1rem 1rem;
        margin: 0;
        align-items: center;
        text-align:center
    }
}

.post__wide-width-header {
    margin-top:2rem
}

.post__wide-width-image-container {
    width:100%
}

.post__wide-width-image-container img {
    animation: opacity-in 1s;
    border-radius:var(--radius-l)
}

.primary .post__content-width-image-container {
    margin-top: -1rem;
    margin-bottom:1.5rem
}

.primary .post__content-width-image-container img {
    animation:opacity-in 1s
}

@media screen and (min-width: 800px) {
    .primary .post__content-width-image-container {
        margin-top:0
    }

    .primary .post__content-width-image-container img {
        border-radius:var(--radius-l)
    }
}

@media screen and (max-width: 800px) {
    .post__wide-width-header {
        margin-top:0
    }

    .post__wide-width-header img {
        border-radius:0
    }
}

.post-template-page_one-column .post__hero-header {
    max-width: 100%;
    width: 890px;
    text-align: center;
    align-items: center;
    margin:0 auto
}

.post__wide-width-hero {
    position: relative;
    margin-top: 2rem;
    z-index: 0;
    display: grid;
    grid-template-areas: "hero"
}

.post__wide-width-hero .post-summary {
    text-align: left;
    margin-bottom: .25rem;
    text-shadow:0px 0px 4px rgba(0, 0, 0, .45)
}

.post__wide-width-hero-image-container {
    grid-area: hero;
    z-index:-1
}

.post__wide-width-hero .post__hero-image {
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: var(--radius-l);
    aspect-ratio:1.75
}

.post__wide-width-hero-header-container {
    grid-area: hero;
    margin-top: auto;
    border-radius: var(--radius-l);
    overflow:hidden
}

.post__wide-width-hero-header-container .post__hero-header {
    width: 100%;
    max-width: unset;
    margin: 0;
    text-align: left;
    align-items: flex-start;
    background:linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0))
}

@media screen and (max-width: 1000px) {
    .post__wide-width-hero-header-container .post-title {
        margin-top:.5rem
    }
}

@media screen and (max-width: 800px) {
    .post__wide-width-hero-header-container .post-title {
        font-size:2.5rem
    }

    .post__wide-width-hero {
        margin-top: 15px;
        margin-inline:15px
    }
}

@media (max-width: 600px) {
    .post__wide-width-hero-header-container .post-title {
        text-align: left;
        font-size: 2rem;
        margin:.5rem 0 1rem
    }

    .post__wide-width-hero .post-meta {
        justify-content:start
    }

    .post-header {
        text-align:center
    }
}

.post-meta {
    position: relative;
    display: flex;
    white-space: nowrap;
    flex-wrap: wrap;
    align-items: center;
    font-size: .8rem;
    line-height: 1.5;
    margin-bottom: 2rem;
    color: var(--ctx-content-fg);
    font-weight: 700;
    font-family: var(--text-headers);
    text-transform: uppercase;
    letter-spacing:-0.25px
}

@media screen and (max-width: 600px) {
    .post-meta {
        justify-content:center
    }

    .post-meta .post-updated {
        flex:unset
    }
}

.post-meta__divider {
    margin:0 .5rem
}

a.post-author {
    color:var(--ctx-post-meta-fg)
}

.post-by {
    color: var(--date-color);
    text-transform: lowercase;
    font-weight:500
}

.post-updated, .post-meta__divider {
    color:var(--date-color)
}

.post__hero-header :is(.post-author, .post-by, .post-updated, .post-meta__divider, .omg-track-comment-count) {
    color:#f7f7f7
}

.post-author__avatar {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 100%;
    margin-right:.5rem
}

.feature .image, .feature .excerpt {
    max-width: 50%;
    width:372px
}

@counter-style omg {
    system: extends numeric;
    suffix: ""
}

.post-content ::-moz-selection {
    color: #fff !important;
    background:var(--accent-color)
}

.post-content ::selection {
    color: #fff !important;
    background:var(--accent-color)
}

.post-content img {
    display:block
}

.post-content h2 {
    margin: 1.5rem 0;
    font-size: 2rem;
    letter-spacing:-1px
}

.post-content h3 {
    color: var(--accent-color);
    margin-bottom: 1.8rem;
    letter-spacing:-1px
}

.post-content a {
    color:var(--color-blue-05)
}

.post-content a:hover {
    color:var(--ctx-post-link-hover)
}

.post-content a img {
    display: block;
    text-align: center;
    height: auto;
    transform: translate3d(0, 0, 0);
    transition:opacity var(--ease)
}

.post-content ul, .post-content ol {
    margin: 0 0 1.8rem 0;
    padding-left:30px
}

.post-content li {
    padding-left: var(--o-li-pl, 0.5rem);
    line-height: var(--o-li-lh, 2);
    font-size:var(--o-li-f, 1.125rem)
}

.post-content ul {
    padding-left:38px
}

.post-content ol {
    --o-li-lh: 1.5;
    list-style:omg
}

.post-content ul li {
    list-style:disc
}

.post-content ol li {
    margin-bottom:1.8rem
}

.post-content li::marker {
    font-size: 1.15rem;
    font-weight: 600;
    color:var(--accent-color)
}

.post-content ol li::marker {
    font-family: sans-serif;
    line-height:1em
}

.post-content p {
    font-size: 1.125rem;
    line-height:1.5
}

.post-content p.has-drop-cap:not(:focus):first-letter {
    float: left;
    font-size: 3.5rem;
    line-height: .9;
    font-weight: 900;
    margin: .05em .1em 0 0;
    text-transform: uppercase;
    font-style:normal
}

.post-content p.has-drop-cap:after {
    content: "";
    display: table;
    clear: both;
    padding-top:13px
}

.post-content > p.has-background {
    padding: 20px 45px;
    border-radius:var(--radius-l)
}

@media screen and (max-width: 800px) {
    .post-content > p.has-background {
        padding:20px 30px
    }
}

@media screen and (min-width: 600px) {
    .post-content .wp-block-columns {
        flex-wrap:nowrap
    }
}

.post-content .wp-block-gallery a {
    background:none
}

.alignwide .img, .alignfull .img, .alignwide, .alignfull {
    margin-left: -35px !important;
    margin-right: -35px !important;
    max-width:calc(100% + 90px) !important
}

@media screen and (max-width: 1000px) {
    .alignwide .img, .alignfull .img, .alignwide, .alignfull {
        margin-left: -1rem !important;
        margin-right: -1rem !important;
        max-width:calc(100% + 2rem) !important
    }
}

.alignwide.wp-block-cover, .alignfull.wp-block-cover {
    width:calc(100% + 90px) !important
}

@media screen and (max-width: 800px) {
    .alignwide.wp-block-cover, .alignfull.wp-block-cover {
        width:calc(100% + 2rem) !important
    }
}

.post-content .wp-block-columns {
    margin-bottom:0
}

@media screen and (max-width: 800px) {
    .alignwide > .wp-block-column, .alignfull > .wp-block-column {
        margin-left: 1rem;
        margin-right:1rem
    }
}

.wp-block-column p.has-background {
    margin-left: -1rem;
    margin-right:-1rem
}

@media screen and (max-width: 600px) {
    .wp-block-column p.has-background {
        padding:20px 1rem
    }
}

.omg-post-status.omg-post-status--outdated {
    display: inline-block;
    padding: .25rem .5rem;
    text-align: center;
    font-size: .825rem;
    font-weight: 700;
    line-height: 1rem;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: .5rem;
    color: var(--color-grey-f5);
    background: var(--color-red-fd);
    letter-spacing: -0.5px;
    box-shadow:none
}

.post__hero .omg-post-status.omg-post-status--outdated {
    background: #000;
    padding: .25rem .5rem;
    color: var(--color-grey-f5);
    font-weight: bold;
    text-transform:uppercase
}

@media screen and (max-width: 800px) {
    .post__hero-header .omg-post-status.omg-post-status--outdated {
        margin: 0;
        width:calc(100% + 2rem)
    }
}

.entry-content .twitter-tweet {
    margin:10px auto !important
}

.entry-content .arconix-column-one-half {
    margin: 0;
    padding-right: 20px;
    width:50%
}

.entry-content .arconix-column-one-half.arconix-column-last {
    padding-right:0
}

.post-summary {
    color: var(--secondary-color);
    font-family: var(--text-primary);
    font-size: 1.025rem;
    font-weight: 700;
    margin-bottom:0
}

@media screen and (max-width: 600px) {
    .post-summary {
        text-align:center
    }
}

.post-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-weight: 600;
    margin:1.5rem 0
}

.post-links svg {
    width: 1.25rem;
    height: 1.25rem;
    margin-right:.25rem
}

a.post-link {
    line-height: 1;
    padding: .5rem 1rem;
    margin: .25rem .5rem .25rem 0;
    font-weight: 400;
    font-size: .825rem;
    font-family: var(--text-headers);
    transition: 300ms ease-in-out;
    border-radius: var(--radius-s);
    color: var(--color-grey-f5);
    background: var(--accent-color);
    text-transform:capitalize
}

a.post-link:hover {
    color: var(--color-grey-f6);
    background:var(--color-grey-33)
}

.alignleft, img.alignleft {
    display: inline;
    float: left;
    margin-right:1rem
}

.alignright, img.alignright {
    display: inline;
    float: right;
    margin-left:1rem
}

.aligncenter, img.aligncenter {
    clear: right;
    display: block;
    margin-left: auto;
    margin-right:auto
}

.post-content .wp-block-image figure.alignleft, .post-content .wp-block-image figure.alignright {
    margin-bottom:1em
}

.post-content .wp-block-image figure.alignright {
    margin-left: 1.75rem;
    margin-bottom:1.5rem
}

.post-content .wp-block-image.is-style-circle-mask img, .post-content .wp-block-image.is-style-rounded img {
    box-shadow: none;
    transition: none;
    border-radius:var(--radius-l)
}

.post-content .wp-block-image.is-style-circle-mask img:hover, .post-content .wp-block-image.is-style-rounded img:hover {
    transform:none
}

@media only screen and (max-width: 500px) {
    img.alignright, img.alignleft, .alignleft, .alignright {
        display: block;
        float: none;
        margin:0 auto 1rem
    }

    .wp-block-image figure.alignleft, .wp-block-image figure.alignright {
        float: none;
        margin:0 auto 1rem
    }
}

.post-content li.blocks-gallery-item:before {
    content:none
}

.gallery {
    background: #f9f9f9;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items:flex-start
}

.gallery-item {
    float: left;
    margin-top: 1rem;
    width: 33%;
    padding: 0 .625rem;
    text-align:center
}

.gallery-columns-2 .gallery-item {
    width:50%
}

.gallery-columns-4 .gallery-item {
    width:25%
}

.gallery-columns-5 .gallery-item {
    width:20%
}

.gallery-item-container {
    background: var(--color-orange-ff);
    display: inline-block;
    border: 2px solid var(--color-orange-ff);
    transition:outline var(--ease)
}

.gallery-item-container:hover {
    outline:5px solid var(--color-orange-ff)
}

.gallery-item img {
    margin:auto
}

.gallery-caption {
    text-align: center;
    padding: .5rem .5rem .375rem;
    color: #333;
    font-size: .875rem;
    line-height:1.0625rem
}

@media only screen and (max-width: 680px) {
    .gallery {
        text-align:center
    }

    .gallery-columns-2 .gallery-item {
        width:100%
    }

    .gallery-columns-3 .gallery-item {
        width:100%
    }

    .gallery-columns-4 .gallery-item {
        width:100%
    }

    .gallery-columns-5 .gallery-item {
        width:100%
    }
}

.wp-caption {
    max-width: 100%;
    text-align: center;
    margin-bottom:16px
}

.wp-caption a {
    color: #fff;
    text-decoration:underline
}

.entry-content.post-content :is(.wp-block-image, .wp-block-embed, .wp-block-gallery, .wp-block-jetpack-image-compare, .wp-block-jetpack-gif) {
    margin-bottom:1.8rem
}

.entry-content.post-content .wp-block-gallery img {
    border-radius: var(--radius-l);
    margin-bottom: 1rem;
    transition:transform 250ms cubic-bezier(0.1, 0.2, 0.3, 0.4)
}

.entry-content.post-content .wp-block-gallery img:hover {
    transform:scale(1.01)
}

.wp-caption .wp-caption-text, .entry-content.post-content :is(.wp-block-image figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-table figcaption, .wp-block-jetpack-image-compare figcaption, .wp-block-jetpack-gif .wp-block-jetpack-gif-caption) {
    margin: 0;
    padding: .5rem 0 0;
    font-size: .8rem;
    line-height: 1.25rem;
    color: var(--ctx-post-caption-fg);
    text-align: right;
    justify-content:flex-end
}

.alignleft .wp-caption .wp-caption-text, .alignleft .entry-content.post-content :is(.wp-block-image figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-table figcaption, .wp-block-jetpack-image-compare figcaption, .wp-block-jetpack-gif .wp-block-jetpack-gif-caption) {
    justify-content: flex-start;
    text-align: left;
    flex-direction:row-reverse
}

.wp-caption .wp-caption-text::after, .entry-content.post-content :is(.wp-block-image figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-table figcaption, .wp-block-jetpack-image-compare figcaption, .wp-block-jetpack-gif .wp-block-jetpack-gif-caption)::after {
    display: inline-block;
    width: .9rem;
    height: .9rem;
    content: "";
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"><g stroke-width="1.5" stroke="%23ADB5BD" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M15 8h.01M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6z"/><path d="m3 16 5-5c.928-.893 2.072-.893 3 0l5 5"/><path d="m14 14 1-1c.928-.893 2.072-.893 3 0l3 3"/></g></svg>');
    vertical-align: middle;
    margin:0 0 .125rem .25rem
}

@media screen and (max-width: 800px) {
    .wp-caption .wp-caption-text, .entry-content.post-content :is(.wp-block-image figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-table figcaption, .wp-block-jetpack-image-compare figcaption, .wp-block-jetpack-gif .wp-block-jetpack-gif-caption) {
        padding:.5rem
    }
}

.wp-block-table figcaption::after {
    content:unset !important
}

.entry-content.post-content .wp-block-gallery.has-nested-images figcaption {
    background: none;
    padding-top: 0;
    margin-top:calc(var(--gallery-block--gutter-size, 16px)/-2)
}

.entry-content.post-content .wp-block-gallery.has-nested-images img {
    margin-bottom: .5rem;
    border-radius:0
}

.entry-content.post-content :is(.blocks-gallery-grid .blocks-gallery-image figcaption, .blocks-gallery-grid .blocks-gallery-item figcaption, .wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption) {
    padding: .5rem 0;
    background:rgba(51, 51, 51, .69)
}

.post .wp-block-jetpack-tiled-gallery {
    margin:0 auto 1.8em
}

.post .wp-block-jetpack-image-compare {
    margin-bottom:1rem
}

ul.post-sources {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
    color:var(--ctx-post-sources-fg)
}

ul.post-sources li::before {
    content:none
}

ul.post-sources a {
    color:var(--color-blue-05)
}

ul.post-sources a:hover {
    color:var(--ctx-post-link-hover)
}

.post-source {
    line-height:1.5
}

.post-source + .post-source {
    margin-top:.25rem
}

.post-source--via {
    font-size:.875rem
}

.Review-stars--container {
    display: flex;
    align-items: center;
    justify-content:center
}

.Review-stars--container .icon {
    color:var(--color-orange-ff)
}

.post-content .wp-block-pullquote {
    padding:0
}

.post-content .wp-block-pullquote p, .post-content .wp-block-pullquote.alignright blockquote p, .post-content .wp-block-pullquote.alignleft blockquote p {
    color: var(--color-blue-05);
    line-height: 1.4;
    font-size:1.4rem
}

.post-content .wp-block-pullquote.alignleft, .post-content .wp-block-pullquote.alignright {
    max-width: 290px;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    margin-left:.5rem
}

.post-content .wp-block-pullquote.alignleft blockquote, .post-content .wp-block-pullquote.alignright blockquote {
    margin: 1rem 0;
    padding: 1rem;
    font-family: var(--text-headers);
    text-align: center;
    background:none
}

.post-content .wp-block-pullquote.alignleft blockquote p, .post-content .wp-block-pullquote.alignright blockquote p {
    margin: 0;
    font-weight:900
}

.post-content .wp-block-pullquote.alignleft blockquote::before, .post-content .wp-block-pullquote.alignright blockquote::before {
    content:none
}

@media screen and (max-width: 500px) {
    .post-content .wp-block-pullquote.alignleft, .post-content .wp-block-pullquote.alignright {
        margin-left: auto;
        margin-right:auto
    }
}

.post-content .wp-block-pullquote.alignleft blockquote {
    margin-right:1rem
}

.post-content .wp-block-pullquote.alignright blockquote {
    margin-left:1rem
}

.post-content .wp-block-gallery ul, .post-content .blocks-gallery-grid {
    padding: 0;
    margin:0 0 -1rem
}

.Review {
    background: #fafafa;
    margin: 1rem 0;
    border: 1px solid #efefef;
    width: 100%;
    border-radius:4px
}

.Review tr {
    background:none
}

.Review th, .Review td {
    border-bottom: 1px solid #efefef;
    font-size:1rem
}

.Review th {
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--color-grey-45);
    border-top-left-radius: 4px;
    border-top-right-radius:4px
}

.Review tbody {
    line-height:1.5
}

.Review-criteria {
    font-weight:700
}

.Review-final--score {
    text-align: center;
    padding:.375rem .75rem .75rem
}

.Review-final--numeric {
    font-size:2.25rem
}

.Review-final--description {
    font-size: 1rem;
    line-height:1.5rem
}

.above-comments .textwidget:first-of-type {
    width:100%
}

.omg-socials {
    container-type:inline-size
}

.omg-socials ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: 0;
    margin:.5rem 0 1rem
}

.post--hero .omg-socials ul {
    margin-bottom:.75rem
}

@media screen and (max-width: 896px) {
    .omg-socials ul.alignwide {
        margin:.5rem auto
    }
}

@media screen and (max-width: 800px) {
    .omg-socials ul.alignwide {
        padding:0 1rem
    }
}

.omg-socials--footer {
    border-top: 1px solid var(--ctx-post-above-comments-border);
    padding-top: 1rem;
    margin-bottom:.75rem
}

.omg-socials__cta {
    white-space: nowrap;
    margin-bottom: 0;
    font-weight: bold;
    font-size: 1.125rem;
    font-family: var(--text-headers);
    letter-spacing: -1px;
    flex:1
}

@container (max-width: 400px) {
    .omg-socials__cta {
        display:none
    }
}

.omg-socials__button--web_share {
    display:none
}

.omg-socials__button--web_share.omg-socials__button--enabled {
    display:block
}

.omg-socials__button {
    height: 32px;
    background: var(--color-grey-f5);
    padding: .25rem;
    border-radius: 2rem;
    transition:var(--ease)
}

.omg-socials__button:hover {
    background:#dbdbdb
}

.omg-socials__button a {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: var(--color-grey-33);
    font-size: .875rem;
    padding:2px 8px
}

.omg-socials__button .icon {
    width: 1rem;
    height: 1rem;
    color:var(--color-grey-33)
}

.omg-socials__button .icon + span {
    margin-left:7px
}

@media screen and (max-width: 500px) {
    .post-content li {
        font-size:1rem
    }

    pre {
        font-size:1rem
    }

    .post-meta {
        font-size:.875rem
    }

    .post-links a {
        font-size:.875rem
    }
}

.post-disclaimer-text {
    margin: 2rem 0;
    line-height: 1.5;
    color:var(--color-grey-9a)
}

.post-disclaimer-text a {
    color:var(--color-blue-05)
}

.post-disclaimer-text a:hover {
    color:var(--ctx-post-link-hover)
}

.schema-faq-section {
    background: var(--color-grey-f6);
    padding: 2rem;
    margin:1rem 0
}

.schema-faq-question {
    font-size: 1.0625rem;
    color:var(--color-orange-ff)
}

.schema-faq-answer {
    font-size: 1rem;
    padding-top:1rem
}

.wp-block-table {
    margin: 0 0 1.8rem;
    border: none;
    padding:0
}

.wp-block-table table {
    margin-bottom:.8rem
}

.wp-block-table th {
    font-family: var(--text-headers);
    line-height: 1.25;
    font-weight: 600;
    padding: 1rem;
    text-align: left;
    background: var(--color-blue-05);
    color:#fff
}

.wp-block-table td {
    padding: 1rem;
    font-family: var(--text-headers);
    border:thin solid var(--color-grey-f4)
}

.wp-block-table tr {
    color: var(--ctx-post-table-tr-fg);
    background:var(--ctx-post-table-tr-even-bg)
}

.wp-block-table tr:nth-child(odd) {
    background:var(--ctx-post-table-tr-odd-bg)
}

@media screen and (max-width: 800px) {
    .omg-socials__cta {
        flex:0
    }
}

.post-content .breadcrumbs {
    font-size: .825rem;
    color: var(--ctx-post-sources-fg);
    margin-top: 2rem;
    border-radius:var(--radius-s)
}

.breadcrumbs a {
    color: var(--color-blue-05);
    background: none;
    font-weight:700
}

.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_pagination.swiper-pagination-bullets .swiper-pagination-bullet {
    color:var(--color-orange-ff) !important
}

a.omg-track-comment-count {
    color:inherit
}

.omg-article-nav {
    --gap: 2rem;
    display: flex;
    gap: var(--gap);
    border-top: 1px solid var(--ctx-post-above-comments-border);
    border-bottom: 1px solid var(--ctx-post-above-comments-border);
    padding: 1.75rem 0;
    margin-top:-0.9rem
}

.omg-article-nav__post {
    flex: 1 1;
    display: flex;
    align-items: center;
    position: relative;
    gap:1rem
}

.omg-article-nav__post, .omg-article-nav__post:visited, .omg-article-nav__post:hover {
    color:var(--ctx-block-article-nav-fg)
}

.omg-article-nav__post + .omg-article-nav__post::before {
    content: "";
    position: absolute;
    background: var(--ctx-post-above-comments-border);
    width: 1px;
    left: calc(-1 * var(--gap) /2);
    top: 0;
    bottom:0
}

.omg-article-nav__content {
    flex:1
}

@media screen and (max-width: 640px), screen and(min-width: 800px) and(max-width: 1000px) {
    .omg-article-nav {
        flex-wrap:wrap
    }

    .omg-article-nav__post {
        flex:1 0 100%
    }

    .omg-article-nav__post + .omg-article-nav__post::before {
        width: 75%;
        top: calc(-1 * var(--gap) /2);
        height: 1px;
        bottom: unset;
        left: 50%;
        transform:translateX(-50%)
    }
}

.omg-article-nav__post .portholes-layout__image {
    margin: 0;
    border-radius:1rem
}

.omg-article-nav__title {
    line-height: 1.25;
    font-size: 1.125rem;
    font-family: var(--text-headers);
    letter-spacing:-0.5px
}

.omg-article-nav__subtitle {
    display: flex;
    align-items: center;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-blue-05);
    font-family: var(--text-primary);
    gap: 4px;
    font-weight: 700;
    margin-bottom: .25rem;
    font-size: .875rem;
    letter-spacing:-0.25px
}

.omg-article-nav__arrow {
    width: 12px;
    height:12px
}

.omg-article-nav__post--prev .omg-article-nav__arrow {
    transform:rotate(180deg)
}

.omg-article-nav__post--next {
    text-align:right
}

.omg-article-nav__post--next .omg-article-nav__subtitle {
    justify-content:end
}

.callout {
    margin: 1.5rem 0 1.5rem 0;
    display: flex;
    align-items: center;
    font-family: var(--text-headers);
    line-height: 1.5;
    font-size: .925rem;
    padding: 1rem .6rem 1rem 0rem;
    background: rgb(232, 241, 252);
    border-radius:var(--radius-l)
}

@media screen and (max-width: 1366px) {
    .callout {
        font-size:1rem
    }
}

.callout .icon {
    flex: 0 0 24px;
    margin-right: .9rem;
    margin-left: .9rem;
}

.click-to-tweet {
    display: block;
    font-weight: 700;
    padding: 1rem;
    width: 250px;
    position: relative;
    margin-bottom: 1.5rem;
    margin-left: 2rem;
    margin-top: .5rem;
    z-index:0
}

.click-to-tweet:before {
    content: "";
    background: var(--color-blue-05);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    transition:transform var(--ease)
}

.click-to-tweet:hover::before {
    transform:scale(1.05)
}

.click-to-tweet.aligncenter {
    width: unset;
    margin:1rem 0
}

.click-to-tweet__content {
    display: block;
    font-size: 1.0625rem;
    line-height: 1.22;
    color: #fff;
    padding: 0 .5rem .5rem;
    margin-bottom:.5rem
}

.click-to-tweet__cta {
    display: block;
    font-size: .875rem;
    line-height: 1.5;
    text-align: right;
    color: #fff;
    transition:opacity var(--ease)
}

.click-to-tweet__cta:hover {
    opacity:.66
}

.click-to-tweet__cta .icon {
    width: .875rem;
    height: .875rem;
    vertical-align: middle;
    margin-left:.25rem
}

.copy-code {
    background: none;
    border: none;
    margin: 0;
    padding: .25rem;
    display: flex;
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    transition:color ease-in-out 250ms
}

.copy-code svg {
    height: 20px;
    width:20px
}

.copy-code:hover {
    color:var(--color-grey-cd)
}

.wp-block-footnotes {
    background: var(--ctx-post-socials-bg);
    border-radius: var(--radius-s);
    font-size:12px
}

.post-content .wp-block-footnotes li {
    --o-li-f: .825rem;
    padding: .5rem 0 .5rem .25rem;
    margin-bottom:unset
}

.post-content .wp-block-footnotes li::marker {
    font-size: .825rem;
    color:var(--color-blue-05)
}

.omg-hero-button {
    color: var(--color-white);
    padding: .75rem 1.25rem 3rem;
    border-radius: var(--radius-l);
    text-align: center;
    margin-bottom: 1.8rem;
    position: relative;
    z-index:0
}

.omg-hero-button p {
    color: var(--color-white);
    font-size: .875rem;
    max-width: 90%;
    margin:1rem auto
}

.omg-hero-button h2 {
    color:var(--color-white)
}

.omg-hero-button span {
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight:700
}

.omg-hero-button::before, .omg-hero-button::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    border-radius:1rem
}

.omg-hero-button::after {
    background-image: var(--hero-button-image);
    background-size: cover;
    opacity:.35
}

.omg-hero-button::before {
    background:var(--hero-button-color, var(--color-blue-05))
}

.widget .omg-hero-button p {
    color:#1e1e1e
}

.widget .omg-hero-button.aligncenter {
    padding: .5rem .5rem;
    margin:0
}

.widget .omg-hero-button img {
    border-radius: 50%;
    margin-bottom: .5rem;
    max-height: 125px;
    transition:.75s ease-in-out
}

.widget .omg-hero-button img:hover {
    transform: rotate(-360deg);
    opacity:.25
}

.widget .omg-hero-button::before {
    background: #f7f7f7;
    border:1px solid #333
}

a.omg-hero-button__link {
    color: var(--color-grey-1e);
    background: var(--color-yellow-ff);
    transition: var(--ease);
    display: inline-block;
    padding: 1rem 3rem;
    border-radius: var(--radius-l);
    font-weight: 600;
    line-height:1.5
}

a.omg-hero-button__link:hover {
    color: var(--color-white);
    background:var(--color-black)
}

.widget a.omg-hero-button__link {
    color: #fff;
    background: #000;
    border-radius: 2rem;
    margin: .25rem 0 1rem;
    transition: ease-in-out 350ms;
    padding: .5rem 1rem .56rem 1rem;
    font-weight:700
}

.widget a.omg-hero-button__link:hover {
    transform: scale(1.05);
    background: #000;
    color:var(--color-white)
}

.omg-info-box {
    margin-bottom: 2.5rem;
    width: 325px;
    max-width: 100%;
    transition: box-shadow var(--ease);
    font-family:var(--text-headers)
}

.omg-info-box.alignright {
    margin-left:2.5rem
}

.omg-info-box.alignleft {
    margin-right:2.5rem
}

@media screen and (max-width: 800px) {
    .omg-info-box {
        margin-left:1.5rem
    }
}

@media screen and (max-width: 600px) {
    .omg-info-box.alignleft, .omg-info-box.alignright {
        margin-left: auto;
        margin-right: auto;
        float: none;
        display:block
    }
}

.omg-info-box__container {
    background: var(--bg, var(--color-blue-05));
    border-radius: var(--radius-l);
    box-shadow:var(--shadow-interactive)
}

h2.omg-info-box__title {
    color: #fff;
    text-align: center;
    font-size: 1rem;
    margin: 1.25rem 0;
    font-weight: 700;
    letter-spacing:0px
}

.omg-info-box__image-container {
    width: 325px;
    height: 200px;
    max-width: calc(100% + 2rem);
    background:#fff
}

.omg-info-box__image-container img {
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit:cover
}

.omg-info-box__content {
    position: relative;
    padding: 0 1.5rem 1rem;
    margin-top:1rem
}

.omg-info-box__caption {
    display: block;
    text-align: center;
    color: #fff;
    font-weight:700
}

.omg-info-box__stats {
    table-layout: unset;
    margin-bottom:0
}

tr.omg-info-box__stat {
    background:none
}

.omg-info-box__stat-property {
    color: #fff;
    background: none;
    text-align: right;
    font-weight: 700;
    padding: 0 1rem .5rem 0;
    line-height: 1.25;
    vertical-align:top
}

.omg-info-box__stat-value {
    color: #fff;
    background: none;
    padding: 0 0 1rem;
    line-height: 1.25;
    vertical-align:top
}

kbd {
    padding: .25rem;
    font-size: .8em;
    font-weight: 700;
    font-family: var(--text-monospace);
    line-height: inherit;
    color: #fff;
    background-color: #212529;
    border-radius: .2em;
    box-shadow:0 .1em .1em rgba(0, 0, 0, .1)
}

@media (prefers-color-scheme: dark) {
    kbd {
        color: #fff;
        background-color: #343a40;
        box-shadow:0 .1em .1em rgba(255, 255, 255, .1)
    }
}

a.omg-promoted-story {
    display: block;
    margin-top: .5rem;
    margin-bottom: 1.8rem;
    padding-right: 1.5rem;
    width: 350px;
    max-width: 100%;
    transition: background var(--ease);
    background: var(--bg, var(--color-blue-05));
    color: #fff;
    border-radius:var(--radius-l)
}

a.omg-promoted-story.alignright {
    margin-left: 2.5rem;
    margin-bottom:2.5rem
}

a.omg-promoted-story:hover {
    color: #fff;
    background:var(--color-grey-33)
}

a.omg-promoted-story.has-image {
    box-shadow:var(--shadow-interactive)
}

a.omg-promoted-story .omg-promoted-story__image-container {
    width: 350px;
    height: 200px;
    max-width:calc(100% + 1.5rem)
}

a.omg-promoted-story .omg-promoted-story__image-container img {
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit:cover
}

@media screen and (max-width: 800px) {
    a.omg-promoted-story {
        margin-left:1.5rem
    }
}

@media screen and (max-width: 600px) {
    a.omg-promoted-story.alignleft, a.omg-promoted-story.alignright {
        margin-left: auto;
        margin-right: auto;
        float: none;
        display:block
    }
}

.omg-promoted-story__content {
    position: relative;
    padding:1.5rem 1rem
}

.omg-promoted-story.has-image .omg-promoted-story__content {
    margin-top: 1rem;
    padding:0 0 1.5rem 1.5rem
}

.omg-promoted-story__caption {
    display: block;
    font-size:.875rem
}

.omg-promoted-story.has-image .omg-promoted-story__caption {
    text-align:left
}

.omg-promoted-story__text {
    display: block;
    font-family: var(--text-headers);
    font-weight: 800;
    font-size: 1.65rem;
    line-height: 1.125;
    margin-top: .5rem;
    letter-spacing:-1px
}

.omg-promoted-story.has-image .omg-promoted-story__text {
    line-height:1.25
}

.omg-simple-list {
    width: 250px;
    font-family:var(--text-primary)
}

.omg-simple-list .omg-info-box__content {
    padding-top: 1rem;
    margin-top:0
}

.omg-simple-list__title {
    padding: .5rem 0 1rem;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-family:var(--text-headers)
}

.omg-sticker {
    padding: 1rem;
    width: 200px;
    height: 200px;
    background: var(--bg-color, var(--color-blue-42));
    color: var(--fg-color, var(--color-white));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow:inset 0 -4px 0 rgba(0, 0, 0, .2)
}

.omg-sticker div {
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    font-size: 1.125rem;
    line-height:1.2
}

.omg-sticker.alignright {
    margin-left: 2.5rem;
    margin-bottom:1.8rem
}

.omg-sticker.alignleft {
    margin-right: 2.5rem;
    margin-bottom:1.8rem
}

.omg-summary-box {
    --text-color: var(--color-white);
    --bg-color: var(--color-blue-05);
    padding: 1.5rem 2rem .5rem;
    margin-bottom: 1.8rem;
    border-radius: var(--radius-l);
    box-shadow:var(--shadow-interactive)
}

.omg-summary-box h4 {
    font-size:1rem
}

.omg-summary-box p, .omg-summary-box h4, .omg-summary-box ul {
    color:var(--text-color)
}

.omg-summary-box p, .omg-summary-box ul {
    font-size: 1rem;
    margin-bottom:1rem
}

.omg-summary-box li {
    list-style:disc
}

.omg-summary-box a {
    color: var(--color-white);
    border-bottom:1px dotted
}

.omg-summary-box.alignright {
    max-width: 325px;
    padding: 1.5rem 1.5rem .75rem 1.5rem;
    border-radius: var(--radius-l);
    box-shadow:none
}

.omg-summary-box.alignright li {
    margin-left: -1rem;
    font-size: .925rem;
    margin-bottom: .75rem;
    font-family:var(--text-headers)
}

.omg-summary-box.alignright li::marker {
    font-size: inherit;
    color:inherit
}

.omg-summary-box.alignright a {
    color:inherit
}

.omg-summary-box.alignright h4 {
    text-align: center;
    font-size: 1.125rem;
    margin-bottom:.5rem
}

@media (min-width: 501px) {
    .omg-summary-box.alignright {
        margin-left:1.5rem
    }
}

.omg-read-more {
    width: 250px;
    margin-top: .5rem;
    padding: 2rem 2rem .5rem;
    position: relative;
    z-index: 0;
    transition: box-shadow var(--ease);
    margin-bottom:2.5rem
}

.omg-read-more h3 {
    font-family: var(--text-headers);
    letter-spacing: -0.025rem;
    color: #fff;
    font-size: 1.24rem;
    margin-bottom:1.5rem
}

.omg-read-more a {
    line-height: 1.2;
    color: #fff;
    background:none
}

.omg-read-more a:hover {
    color:var(--color-yellow-f0)
}

.omg-read-more.aligncenter {
    width: unset;
    border: none;
    padding-top: 2rem;
    margin:1rem 0
}

.omg-read-more.aligncenter h3 {
    font-size:1rem
}

.omg-read-more.aligncenter .omg-read-more__link {
    font-size:1rem
}

.omg-read-more.alignright {
    margin-left:2.5rem
}

.omg-read-more.alignleft {
    margin-right:2.5rem
}

.omg-read-more::before, .omg-read-more::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    border-radius:var(--radius-l)
}

.omg-read-more::after {
    background-image: var(--read-more-image);
    background-size: cover;
    opacity: .3;
    filter:saturate(0.5)
}

.omg-read-more::before {
    box-shadow: var(--shadow-interactive);
    background:var(--read-more-color, var(--color-blue-05))
}

.omg-read-more__link {
    z-index: 1;
    margin-bottom: 1.5rem;
    position: relative;
    text-align: left;
    border-bottom: 1px solid rgba(221, 221, 221, .35);
    padding-bottom:1.25rem
}

.omg-read-more__link:last-child {
    border-bottom: none;
    margin-bottom:.5rem
}

.widget .omg-read-more {
    width: unset;
    margin:0
}

.widget .omg-read-more::after {
    opacity: .19;
    filter:saturate(0)
}

.widget .omg-read-more h3 {
    font-family: var(--text-headers);
    font-size:1.1rem
}

.widget .omg-read-more a {
    font-family: var(--text-headers);
    letter-spacing:.4px
}

.omg-review {
    background: var(--color-grey-33);
    color: #fff;
    width: 325px;
    transition:box-shadow var(--ease)
}

.omg-review img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    max-width:406px
}

.omg-review h3 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    font-size: 1rem;
    margin: 1.25rem 0;
    font-weight:700
}

.omg-review h4 {
    color: var(--color-yellow-f0);
    font-size: .925rem;
    margin: 0 0 .5rem;
    font-weight: 600;
    line-height:1.2
}

.omg-review p {
    color: #fff;
    margin-bottom: 1.25rem;
    line-height: 1.2;
    font-size:.925rem
}

.omg-review p:last-child {
    margin-bottom:1.5rem
}

.omg-review footer {
    color: var(--color-yellow-f0);
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem 1.25rem;
    line-height:1
}

.omg-review.alignright {
    margin-left: 1.5rem;
    margin-bottom:1.5rem
}

.omg-review.aligncenter {
    margin-bottom: 1rem;
    background: var(--color-grey-33);
    color: #fff;
    width: 325px;
    transition:box-shadow var(--ease)
}

.omg-review.aligncenter img {
    height:auto
}

.omg-review.aligncenter footer {
    padding:.25rem 1.25rem
}

@media (min-width: 1100px) {
    .omg-review.aligncenter {
        width:unset
    }

    .omg-review.aligncenter img {
        padding-left: 1rem;
        padding-top:1rem
    }

    .omg-review.aligncenter h3 {
        margin-top:0
    }

    .omg-review.aligncenter .omg-review__score {
        margin-right:4.5rem
    }

    .omg-review.aligncenter .omg-review__container {
        display:flex
    }

    .omg-review.aligncenter .omg-review__content {
        margin-left: 1.5rem;
        padding-top:1rem
    }

    .omg-review.aligncenter footer {
        margin-top: 1.25rem;
        justify-content: flex-end;
        padding:.5rem 1.25rem
    }
}

@media screen and (min-width: 1100px) and(max-width: 1200px) {
    .omg-review.aligncenter img {
        max-width:300px
    }
}

@media (max-width: 1100px) {
    .omg-review {
        margin: 0 auto 1rem;
        display: block;
        float:none
    }
}

.omg-review__content {
    padding:0 2rem
}

.omg-review__score {
    font-weight: 600;
    font-family:var(--text-headers)
}

.omg-review__score-value {
    color: #fff;
    font-size: 1.8rem;
    line-height: 1rem;
    vertical-align:top
}

.omg-review__stars svg {
    width: 1.5rem;
    height:1.5rem
}

.omg-toc {
    max-width: 350px;
    position: relative;
    background: var(--color-blue-05);
    padding: 1rem 2rem 1.5rem;
    text-align: left;
    word-break: break-word;
    margin-bottom: 2rem;
    border-radius: var(--radius-l);
    box-shadow:0 5px 15px -5px rgba(0, 0, 0, .25)
}

.omg-toc.alignright {
    margin-left:2rem
}

.omg-toc.alignleft {
    margin-right:2rem
}

.omg-toc__title {
    color: var(--color-white);
    font-weight: 600;
    margin: 0;
    font-family: var(--text-headers);
    font-size: 1.125rem;
    line-height:2
}

@media screen and (max-width: 1366px) {
    .omg-toc__title {
        font-size:1rem
    }
}

.post-content li.omg-toc__item::before {
    content:none
}

.post-content li.omg-toc__item a {
    background: none;
    font-size: inherit;
    color:var(--color-grey-f6)
}

.post-content li.omg-toc__item a:hover {
    border-bottom:2px dotted var(--color-grey-f6)
}

ul.omg-toc__items {
    list-style: none;
    margin: 0;
    padding:0
}

#baguetteBox-overlay {
    display: none;
    opacity: 0;
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000000;
    background-color: #222;
    background-color: rgba(0, 0, 0, .8);
    transition:opacity .5s ease
}

#baguetteBox-overlay.visible {
    opacity:1
}

#baguetteBox-overlay .full-image {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    text-align:center
}

#baguetteBox-overlay .full-image figure {
    display: inline;
    margin: 0;
    height:100%
}

#baguetteBox-overlay .full-image img {
    display: inline-block;
    width: auto;
    height: auto;
    max-height: 100%;
    max-width: 100%;
    vertical-align: middle;
    box-shadow:0 0 8px rgba(0, 0, 0, .6)
}

#baguetteBox-overlay .full-image figcaption {
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    line-height: 1.8;
    white-space: normal;
    color: #ccc;
    background-color: #000;
    background-color: rgba(0, 0, 0, .6);
    font-family:sans-serif
}

#baguetteBox-overlay .full-image:before {
    content: "";
    display: inline-block;
    height: 50%;
    width: 1px;
    margin-right:-1px
}

#baguetteBox-slider {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    white-space: nowrap;
    transition:left .4s ease, transform .4s ease
}

#baguetteBox-slider.bounce-from-right {
    animation:bounceFromRight .4s ease-out
}

#baguetteBox-slider.bounce-from-left {
    animation:bounceFromLeft .4s ease-out
}

@keyframes bounceFromRight {
    0% {
        margin-left:0
    }

    50% {
        margin-left:-30px
    }

    100% {
        margin-left:0
    }
}

@keyframes bounceFromLeft {
    0% {
        margin-left:0
    }

    50% {
        margin-left:30px
    }

    100% {
        margin-left:0
    }
}

.baguetteBox-button#previous-button, .baguetteBox-button#next-button {
    top: 50%;
    top: calc(50% - 30px);
    width: 44px;
    height:60px
}

.baguetteBox-button {
    position: absolute;
    cursor: pointer;
    outline: none;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 15%;
    background-color: var(--color-grey-33);
    background-color: rgba(50, 50, 50, .5);
    color: var(--color-grey-dd);
    font: 1.6em sans-serif;
    transition:background-color .4s ease
}

.baguetteBox-button:focus, .baguetteBox-button:hover {
    background-color:rgba(50, 50, 50, .9)
}

.baguetteBox-button#next-button {
    right:2%
}

.baguetteBox-button#previous-button {
    left:2%
}

.baguetteBox-button#close-button {
    top: 20px;
    right: 2%;
    right: calc(2% + 6px);
    width: 30px;
    height:30px
}

.baguetteBox-button svg {
    position: absolute;
    left: 0;
    top:0
}

.baguetteBox-spinner {
    width: 40px;
    height: 40px;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left:-20px
}

.baguetteBox-double-bounce1, .baguetteBox-double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #fff;
    opacity: .6;
    position: absolute;
    top: 0;
    left: 0;
    animation:bounce 2s infinite ease-in-out
}

.baguetteBox-double-bounce2 {
    animation-delay:-1s
}

@keyframes bounce {
    0%, 100% {
        transform:scale(0)
    }

    50% {
        transform:scale(1)
    }
}

.omg-post-status {
    background: var(--bg, var(--color-blue-50));
    padding: 1rem 1rem 1rem 4rem;
    margin: 1.8rem 0;
    border-radius: var(--radius-l);
    color: #fff;
    position: relative;
    line-height: 1.5;
    box-shadow:var(--shadow-interactive)
}

.omg-post-status a, .omg-post-status a:visited {
    color: #fff;
    text-decoration: underline;
    transition:opacity var(--ease)
}

.omg-post-status a:hover, .omg-post-status a:visited:hover {
    color: #fff;
    opacity:.4
}

.omg-post-status .icon {
    position: absolute;
    left: 1.5rem;
    top: 50%;
    margin-top: -0.75rem;
    width: 1.5rem;
    height:1.5rem
}

.omg-post-status code {
    color:var(--color-grey-33)
}

@media screen and (max-width: 500px) {
    .omg-post-status {
        font-size:.875rem
    }
}

.wp-block-omg-buttons {
    margin-left: -0.5rem;
    margin-right:-0.5rem
}

a.omg-button, .omg-button {
    border-radius: 3px;
    color: var(--fg, var(--color-white));
    display: inline-block;
    position: relative;
    padding: .5rem 1rem .5rem;
    margin: 1rem .5rem;
    line-height: 1.5rem;
    z-index:0
}

a.omg-button.has-icon, .omg-button.has-icon {
    padding-left:3rem
}

a.omg-button:visited, .omg-button:visited {
    color:#fff
}

a.omg-button:hover, a.omg-button:active, .omg-button:hover, .omg-button:active {
    color:#fff
}

a.omg-button:hover:before, a.omg-button:active:before, .omg-button:hover:before, .omg-button:active:before {
    transform:scale(1.05)
}

a.omg-button:before, .omg-button:before {
    box-shadow: none;
    will-change: transform;
    background: var(--bg, var(--color-blue-05));
    transition: transform var(--ease);
    border-radius: var(--radius-l);
    z-index: -1;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%
}

svg.omg-button__icon {
    width: 1.0625rem;
    height: 1.0625rem;
    position: absolute;
    left: 1rem;
    top: calc(50% - 0.53125rem);
    color:#fff
}

.omg-button__content {
    display: inline-block;
    color: var(--fg, var(--color-white));
    font-family: var(--text-headers);
    font-size: 1rem;
    font-weight:600
}

.has-background {
    background-color:var(--bg-color)
}

.has-text-color {
    color:var(--fg-color)
}

.entry-content .wp-block-separator {
    border:0
}

.contact-form textarea {
    margin-bottom: 1em !important;
    border-radius: var(--radius-s);
    border:1px solid var(--color-grey-dd)
}

.wp-block-jetpack-contact-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    flex-direction: row;
    background: var(--color-grey-f5);
    padding: 1rem;
    margin-bottom: 1.8rem;
    border-radius:var(--radius-l)
}

.wp-block-jetpack-contact-form label {
    font-family: var(--text-headers);
    padding-bottom:.5rem
}

.wp-block-jetpack-contact-form input {
    border-radius: var(--radius-s);
    border:1px solid var(--color-grey-dd)
}

.wp-block-jetpack-contact-form button {
    background:var(--gradient-disco)
}

.wp-block-jetpack-contact-form .wp-block-button {
    font-family: var(--text-headers);
    padding-right:1rem
}

.wp-block-jetpack-contact-form .wp-block-jetpack-button button {
    border-radius: var(--radius-s) !important;
    transition:var(--ease)
}

.wp-block-button__link:active, .wp-block-button__link:focus, .wp-block-button__link:hover, .wp-block-button__link:visited {
    filter:grayscale(100%)
}

.page-search {
    display: flex;
    margin: 30px 0;
    position:relative
}

.page-search__input {
    display: block;
    flex: 1;
    height: 40px;
    font-size: 1rem;
    padding: 4px 0 4px 36px;
    outline: none;
    border: 1px solid var(--color-grey-9a);
    border-radius:var(--radius-l)
}

.page-search__submit {
    color: var(--color-grey-45);
    padding: 0;
    background: none;
    border: none;
    width: 24px;
    height: 24px;
    display: flex;
    cursor: pointer;
    position: absolute;
    left: 8px;
    top:calc(50% - 12px)
}

.page-search__submit .icon {
    width: 100%;
    height:100%
}

.error-image img {
    display: block;
    margin:auto
}

.error-container {
    max-width: 640px;
    margin: 1rem auto;
    padding: .5rem;
    background:var(--color-grey-f6)
}

.error-container p {
    margin:.5rem
}

h2.author__header a {
    color:var(--color-orange-ff)
}

@media (max-width: 576px) {
    :root {
        --menu-height: 75px
    }

    .header__logo {
        max-height:60px
    }

    .tile-layout--3x .layout__title-link {
        font-size:1.45rem
    }

    .post-meta {
        font-size:.725rem
    }

    .post-summary {
        font-size:.925rem
    }

    .post-meta__divider {
        margin:0 .25rem
    }

    a.post-link {
        padding:.5rem .5rem
    }

    .entry-content.post-content :is(.wp-block-image, .wp-block-embed, .wp-block-gallery, .wp-block-jetpack-image-compare, .wp-block-jetpack-gif) {
        margin-bottom: 1.24rem
    }
}