/*
Theme Name: Mono WordPress
Theme URI: https://example.com/mono-wp
Author: Martin
Author URI: https://martin.cafe
Description: A clean, minimalist WordPress theme based on Publii Mono theme with vertical sidebar navigation and three-column grid layout. Features a beautiful Lotus flower logo inspired by Nefertem. Uses Public Sans and Source Serif 4 fonts.
Version: 1.4.2
Requires at least: 5.9
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mono-wp
Tags: blog, grid-layout, one-column, two-columns, three-columns, custom-menu, featured-images, sticky-post, translation-ready
*/

/* ============================================
   Fonts
   ============================================ */

/* Public Sans - Regular */
@font-face{
    font-family:'Public Sans';
    src:url('assets/fonts/publicsans/PublicSans-VariableFont_wght.woff2') format('woff2 supports variations'),
        url('assets/fonts/publicsans/PublicSans-VariableFont_wght.woff2') format('woff2-variations');
    font-weight:100 900;
    font-display:swap;
    font-style:normal;
}

/* Public Sans - Italic */
@font-face{
    font-family:'Public Sans';
    src:url('assets/fonts/publicsans/PublicSans-Italic-VariableFont_wght.woff2') format('woff2 supports variations'),
        url('assets/fonts/publicsans/PublicSans-Italic-VariableFont_wght.woff2') format('woff2-variations');
    font-weight:100 900;
    font-display:swap;
    font-style:italic;
}

/* Source Serif 4 - Regular */
@font-face{
    font-family:'Source Serif 4';
    src:url('assets/fonts/sourceserif4/SourceSerif4-VariableFont_opsz_wght.woff2') format('woff2 supports variations'),
        url('assets/fonts/sourceserif4/SourceSerif4-VariableFont_opsz_wght.woff2') format('woff2-variations');
    font-weight:100 900;
    font-display:swap;
    font-style:normal;
}

/* Source Serif 4 - Italic */
@font-face{
    font-family:'Source Serif 4';
    src:url('assets/fonts/sourceserif4/SourceSerif4-Italic-VariableFont_opsz_wght.woff2') format('woff2 supports variations'),
        url('assets/fonts/sourceserif4/SourceSerif4-Italic-VariableFont_opsz_wght.woff2') format('woff2-variations');
    font-weight:100 900;
    font-display:swap;
    font-style:italic;
}


/* ============================================
   CSS Variables
   ============================================ */

:root{
    --page-margin:25px;
    --page-width:940px;
    --left-bar-width:auto;
    --right-bar-width:270px;
    --entry-width:660px;
    --featured-image-height:auto;
    --border-radius:6px;
    --transition:all 0.3s ease-out;
    --baseline:0.2rem;
    --gallery-gap:0.4rem;
    --pre-height:100%;
    --font-body:'Public Sans',sans-serif;
    --font-heading:'Public Sans',sans-serif;
    --font-entry:'Source Serif 4',serif;
    --font-logo:var(--font-body);
    --font-menu:var(--font-body);
    --font-size:clamp(1rem, 1rem + (0 * ((100vw - 20rem) / 55)), 1rem);
    --font-weight-normal:400;
    --font-weight-bold:650;
    --line-height:1.6;
    --letter-spacing:0em;
    --headings-weight:700;
    --headings-transform:none;
    --headings-style:normal;
    --headings-letter-spacing:-0.02em;
    --headings-line-height:1.3;
    --accent:256,91%,59%;
    --yellow:40,100%,64%;
    --blue:208,100%,50%;
    --green:166,100%,34%;
    --red:334,100%,56%;
    --white:#FFFFFF;
    --black:#000000;
    --background:hsla(0, 0%, 100%, 1);
    --background-transparent:hsla(0, 0%, 100%, .85);
    --background-pattern:radial-gradient(rgb(245, 245, 245) 1px, transparent 1px),radial-gradient(rgb(245, 245, 245) 1px, rgba(255, 255, 255, 0) 1px);
    --accent-light:hsla(256, 91%, 59%, .8);
    --accent-medium:hsla(256, 91%, 59%, 1);
    --accent-transparent:hsla(256, 91%, 59%, .5);
    --color-lighter:hsla(220, 11%, 96%, 1);
    --color-light:hsla(220, 11%, 90%, 1);
    --color-medium:hsla(220, 11%, 85%, 1);
    --color-dark:hsla(220, 11%, 45%, 1);
    --color-darker:hsla(220, 11%, 11%, 1);
}

@media (prefers-color-scheme:dark){
    :root{
        --yellow:40,100%,64%;
        --blue:208,100%,50%;
        --green:166,100%,34%;
        --red:334,100%,56%;
        --white:#FFFFFF;
        --black:#000000;
        --background:hsla(214, 17%, 8%, 1);
        --background-transparent:hsla(214, 17%, 8%, .85);
        --background-pattern:radial-gradient(rgb(31, 37, 46) 1px, transparent 1px),radial-gradient(rgb(31, 37, 46) 1px, rgba(31, 37, 46, 0) 1px);
        --accent-light:hsla(256, 91%, 59%, .8);
        --accent-medium:hsla(256, 91%, 59%, 1);
        --accent-transparent:hsla(256, 91%, 59%, .5);
        --color-lighter:hsla(220, 11%, 15%, 1);
        --color-light:hsla(220, 11%, 17%, 1);
        --color-medium:hsla(220, 11%, 20%, 1);
        --color-dark:hsla(220, 11%, 60%, 1);
        --color-darker:hsla(220, 11%, 94%, 1);
    }
}

/* ============================================
   Base Resets
   ============================================ */

*,:after,:before{
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    margin:0;
    padding:0;
}

article,aside,footer,header,hgroup,main,nav,section{
    display:block;
}

li{
    list-style:none;
}

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

button,input,select,textarea{
    font:inherit;
}

/* ============================================
   Base Styles
   ============================================ */

html{
    font-size:var(--font-size);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    scroll-behavior:smooth;
}

body{
    background:var(--background);
    color:var(--color-darker);
    font-family:var(--font-body);
    font-variation-settings:"wght" var(--font-weight-normal);
    letter-spacing:var(--letter-spacing);
    line-height:var(--line-height);
    -ms-scroll-chaining:none;
    overscroll-behavior:none;
}

a{
    text-decoration:none;
    color:var(--color-darker);
    -webkit-transition:var(--transition);
    transition:var(--transition);
}

a:hover,a:active,a:focus{
    color:var(--accent-medium);
}

.invert{
    color:var(--accent-medium);
    -webkit-transition:var(--transition);
    transition:var(--transition);
}

.invert:hover,.invert:active,.invert:focus{
    color:var(--color-darker);
}

/* ============================================
   Typography
   ============================================ */

dl,ol,p,pre,table,ul{
    margin-top:calc(var(--baseline) * 8);
}

blockquote,hr{
    margin-top:calc(var(--baseline) * 11);
    margin-bottom:calc(var(--baseline) * 11);
}

figure{
    margin-top:calc(var(--baseline) * 8);
    margin-bottom:calc(var(--baseline) * 8);
}

h1,h2,h3,h4,h5,h6{
    color:var(--color-darker);
    font-family:var(--font-heading);
    font-variation-settings:"wght" var(--headings-weight);
    font-style:var(--headings-style);
    letter-spacing:var(--headings-letter-spacing);
    line-height:var(--headings-line-height);
    margin-top:calc(var(--baseline) * 11);
    text-transform:var(--headings-transform);
}

h1:not(.content__entry h1){
    margin-top:0;
}

.h1,h1{
    font-size:clamp(1.4728968807rem, 1.4728968807rem + .8411566892 * (100vw - 20rem) / 55, 2.3140535699rem);
}

.h2,h2{
    font-size:clamp(1.3808408252rem, 1.3808408252rem + .5258805593 * (100vw - 20rem) / 55, 1.9067213845rem);
}

.h3,h3{
    font-size:clamp(1.2945382732rem, 1.2945382732rem + .3812910676 * (100vw - 20rem) / 55, 1.6758293408rem);
}

.h4,h4{
    font-size:clamp(1.2136296308rem, 1.2136296308rem + .2592672499 * (100vw - 20rem) / 55, 1.4728968807rem);
}

.h5,h5{
    font-size:clamp(1.1377777785rem, 1.1377777785rem + .1567604947 * (100vw - 20rem) / 55, 1.2945382732rem);
}

.h6,h6{
    font-size:clamp(1rem, 1rem + .1377777785 * (100vw - 20rem) / 55, 1.1377777785rem);
}

h1+*,h2+*,h3+*,h4+*,h5+*,h6+*{
    margin-top:calc(var(--baseline) * 4);
}

b,strong{
    font-variation-settings:"wght" var(--font-weight-bold);
}

blockquote{
    font-family:var(--font-heading);
    padding:0 3ch;
    position:relative;
}

blockquote cite{
    display:block;
    font-family:var(--font-body);
    font-size:.8789062495rem;
    font-style:normal;
    padding-top:calc(var(--baseline) * 2);
}

blockquote>:first-child{
    margin-top:0;
}

blockquote::before{
    background-color:var(--accent-medium);
    content:"";
    display:block;
    height:24px;
    -webkit-mask:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath d='M3,22c-1.551,0-2-.448-2-2v-1.969c0-1.575.449-2.031,2-2.031.449,0,1-.552,1-1v-1c-1.794,0-3-1.206-3-3v-6.028c0-1.778,1.206-2.972,3-2.972h3.993c.864-.017,1.622.267,2.166.803.55.543.841,1.303.841,2.197v8c0,5.887-2.767,9-8,9ZM3,18v2c2.793,0,6-.796,6-7v-8c0-.242-.042-.573-.246-.773-.197-.193-.505-.226-.741-.227h-4.014c-.691,0-1,.3-1,.972v6.028c0,.701.299,1,1,1,1.551,0,2,.449,2,2v1c0,1.542-1.458,3-3,3h0ZM15,22c-1.552,0-2-.448-2-2v-3c0-.553.447-1,1-1,.724,0,1.223-.117,1.442-.339.267-.27.31-.92.312-1.669-1.658-.105-2.755-1.281-2.755-2.992v-6.028c0-1.778,1.206-2.972,3-2.972h3.993c.87.008,1.622.267,2.165.803.551.543.842,1.303.842,2.197v8c0,5.887-2.767,9-8,9ZM15,17.93v2.07c2.794,0,6-.796,6-7v-8c0-.242-.043-.573-.246-.773-.195-.193-.515-.227-.74-.227h-4.014c-.691,0-1,.3-1,.972v6.028c0,.701.299,1,1,1h.75c.553,0,1,.448,1,1l.003.475c.011,1.376.021,2.675-.891,3.595-.449.453-1.063.737-1.862.86Z' stroke-width='0'/%3e%3c/svg%3e");
    mask:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath d='M3,22c-1.551,0-2-.448-2-2v-1.969c0-1.575.449-2.031,2-2.031.449,0,1-.552,1-1v-1c-1.794,0-3-1.206-3-3v-6.028c0-1.778,1.206-2.972,3-2.972h3.993c.864-.017,1.622.267,2.166.803.55.543.841,1.303.841,2.197v8c0,5.887-2.767,9-8,9ZM3,18v2c2.793,0,6-.796,6-7v-8c0-.242-.042-.573-.246-.773-.197-.193-.505-.226-.741-.227h-4.014c-.691,0-1,.3-1,.972v6.028c0,.701.299,1,1,1,1.551,0,2,.449,2,2v1c0,1.542-1.458,3-3,3h0ZM15,22c-1.552,0-2-.448-2-2v-3c0-.553.447-1,1-1,.724,0,1.223-.117,1.442-.339.267-.27.31-.92.312-1.669-1.658-.105-2.755-1.281-2.755-2.992v-6.028c0-1.778,1.206-2.972,3-2.972h3.993c.87.008,1.622.267,2.165.803.551.543.842,1.303.842,2.197v8c0,5.887-2.767,9-8,9ZM15,17.93v2.07c2.794,0,6-.796,6-7v-8c0-.242-.043-.573-.246-.773-.195-.193-.515-.227-.74-.227h-4.014c-.691,0-1,.3-1,.972v6.028c0,.701.299,1,1,1h.75c.553,0,1,.448,1,1l.003.475c.011,1.376.021,2.675-.891,3.595-.449.453-1.063.737-1.862.86Z' stroke-width='0'/%3e%3c/svg%3e");
    position:absolute;
    left:0;
    width:24px;
}

ol,ul{
    margin-left:2rem;
}

ol>li,ul>li{
    list-style:inherit;
    padding:0 0 var(--baseline) calc(var(--baseline) * 4);
}

dl dt{
    font-variation-settings:"wght" var(--font-weight-bold);
}

code{
    background-color:hsla(var(--red),.1);
    border-radius:2px;
    color:hsla(var(--red),1);
    font-size:.9374999997rem;
    font-family:Monaco,"Courier New",monospace;
    padding:var(--baseline) calc(var(--baseline) * 2);
}

pre{
    background-color:var(--color-lighter);
    border-radius:3px;
    font-size:.9374999997rem;
    padding:calc(var(--baseline) * 9);
    white-space:pre-wrap!important;
    word-wrap:break-word;
    width:100%;
}

pre code{
    background-color:transparent;
    color:inherit!important;
    font-size:inherit;
    padding:0;
}

/* ============================================
   Grid Layout
   ============================================ */

@media all and (min-width:56.25em){
    .container{
        display:grid;
        gap:0 calc(var(--baseline) * 4);
        grid-template-columns:1fr minmax(var(--left-bar-width),max-content) minmax(auto,var(--page-width));
        grid-template-areas:". left-bar main " ". left-bar right-bar";
    }
}

@media all and (min-width:75em){
    .container{
        grid-template-columns:1fr minmax(var(--left-bar-width),max-content) minmax(auto,var(--page-width)) var(--right-bar-width) 1fr;
        grid-template-areas:". left-bar main right-bar .";
        gap:0 calc(var(--baseline) * 10);
    }
}

.left-bar{
    grid-area:left-bar;
}

@media all and (min-width:56.25em){
    .left-bar__inner{
        height:calc(100vh - var(--baseline) * 24);
        margin:calc(var(--baseline) * 12) 0;
        position:sticky;
        top:calc(var(--baseline) * 12);
        z-index:2;
    }
}

.main{
    grid-area:main;
}

@media all and (min-width:56.25em){
    .main{
        border-left:1px solid var(--color-light);
        border-right:1px solid var(--color-light);
    }
}

.main__inner{
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
    margin:0 auto;
    max-width:var(--entry-width);
    padding:calc(var(--baseline) * 10) var(--page-margin);
}

@media all and (min-width:56.25em){
    .main__inner{
        padding:calc(var(--baseline) * 16) var(--page-margin) calc(var(--baseline) * 12);
    }
}

.right-bar{
    grid-area:right-bar;
}

@media all and (max-width:74.9375em){
    .right-bar{
        border-top:1px solid var(--color-light);
    }
}

@media all and (min-width:56.25em) and (max-width:74.9375em){
    .right-bar{
        border-left:1px solid var(--color-light);
        border-right:1px solid var(--color-light);
    }
}

.right-bar__inner{
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
    margin:calc(var(--baseline) * 12) auto;
    max-width:var(--entry-width);
}

@media all and (max-width:56.1875em){
    .right-bar__inner{
        padding:0 var(--page-margin);
    }
}

@media all and (min-width:75em){
    .right-bar__inner{
        height:calc(100vh - var(--baseline) * 24);
        position:sticky;
        top:calc(var(--baseline) * 12);
    }
}

/* ============================================
   Header & Navigation
   ============================================ */

.header{
    align-items:center;
    border-bottom:1px solid var(--color-lighter);
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;
    height:100%;
    padding:calc(var(--baseline) * 4) var(--page-margin);
    position:relative;
    z-index:999;
}

@media all and (min-width:56.25em){
    .header{
        border:none;
        align-items:end;
        flex-direction:column;
        justify-content:initial;
        padding:0;
    }
}

.logo{
    color:var(--color-darker);
    font:var(--font-weight-bold) 1.2945382732rem var(--font-logo);
    font-variation-settings:"wght" 700;
    letter-spacing:var(--headings-letter-spacing);
    text-transform:uppercase;
}

.logo>img{
    max-height:3rem;
    width:auto;
}

@media all and (min-width:56.25em){
    .logo>img{
        max-height:4rem;
    }
}

@media all and (max-width:56.1875em){
    .logo--atbottom{
        display:none;
    }
}

.navbar{
    margin:auto 0;
}

.navbar .navbar__menu{
    display:flex;
    flex-direction:column;
    gap:calc(var(--baseline) * 4);
    list-style:none;
    margin:0;
    padding:0;
}

@media all and (max-width:56.1875em){
    .navbar .navbar__menu{
        background:var(--background);
        border-bottom:1px solid var(--color-lighter);
        -webkit-box-shadow:0 3px 6px 0 rgba(0,0,0,.06);
        box-shadow:0 3px 6px 0 rgba(0,0,0,.06);
        flex-direction:row;
        flex-wrap:wrap;
        gap:initial;
        justify-content:space-between;
        left:0;
        opacity:0;
        margin-top:1px;
        padding:calc(var(--baseline) * 5) var(--page-margin);
        position:absolute;
        top:100%;
        -webkit-transform:translateY(-10px);
        transform:translateY(-10px);
        -webkit-transition:visibility .35s,opacity .35s ease,-webkit-transform .35s ease;
        transition:visibility .35s,opacity .35s ease,-webkit-transform .35s ease;
        transition:visibility .35s,opacity .35s ease,transform .35s ease;
        transition:visibility .35s,opacity .35s ease,transform .35s ease,-webkit-transform .35s ease;
        visibility:hidden;
        width:100%;
        z-index:1;
    }
    
    .navbar .navbar__menu.is-active{
        visibility:visible;
        opacity:1;
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }
}

.navbar .navbar__menu li{
    font-family:var(--font-menu);
    display:block;
    font-size:.9374999997rem;
    line-height:var(--line-height);
    letter-spacing:.01rem;
    font-variation-settings:"wght" var(--font-weight-normal);
    padding:0;
    width:auto;
}

@media all and (max-width:56.1875em){
    .navbar .navbar__menu li .tltp>span{
        display:none!important;
    }
}

.navbar .navbar__toggle{
    background:var(--color-lighter);
    border-radius:var(--border-radius);
    border:none;
    -webkit-box-shadow:none;
    box-shadow:none;
    cursor:pointer;
    display:block;
    height:2.5rem;
    line-height:0;
    overflow:visible;
    padding:0;
    text-transform:none;
    width:2.5rem;
}

@media all and (min-width:56.25em){
    .navbar .navbar__toggle{
        display:none;
    }
}

.navbar .navbar__toggle:focus,.navbar .navbar__toggle:hover{
    -webkit-box-shadow:none;
    box-shadow:none;
    outline:0;
    -webkit-transform:none;
    transform:none;
}

.navbar .navbar__toggle__box{
    width:20px;
    height:20px;
    display:inline-block;
    position:relative;
}

.navbar .navbar__toggle__inner{
    display:block;
    top:50%;
    text-indent:-9999999em;
}

.navbar .navbar__toggle__inner::before{
    content:"";
    display:block;
    top:-5px;
}

.navbar .navbar__toggle__inner::after{
    content:"";
    display:block;
    bottom:-3px;
}

.navbar .navbar__toggle__inner,.navbar .navbar__toggle__inner::after,.navbar .navbar__toggle__inner::before{
    background-color:var(--color-darker);
    height:2px;
    position:absolute;
    -webkit-transition:opacity .14s ease-out,-webkit-transform;
    transition:opacity .14s ease-out,-webkit-transform;
    transition:transform,opacity .14s ease-out;
    transition:transform,opacity .14s ease-out,-webkit-transform;
    width:20px;
}

.navbar .navbar__toggle__inner{
    background-color:transparent;
    -webkit-transition-duration:75ms;
    transition-duration:75ms;
    -webkit-transition-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);
    transition-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);
}

.navbar .navbar__toggle__inner::before{
    -webkit-transition:top 75ms ease .12s,opacity 75ms ease;
    transition:top 75ms ease .12s,opacity 75ms ease;
}

.navbar .navbar__toggle__inner::after{
    -webkit-transition:bottom 75ms ease .12s,-webkit-transform 75ms cubic-bezier(.55, .055, .675, .19);
    transition:bottom 75ms ease .12s,-webkit-transform 75ms cubic-bezier(.55, .055, .675, .19);
    transition:bottom 75ms ease .12s,transform 75ms cubic-bezier(.55, .055, .675, .19);
    transition:bottom 75ms ease .12s,transform 75ms cubic-bezier(.55, .055, .675, .19),-webkit-transform 75ms cubic-bezier(.55, .055, .675, .19);
}

.navbar .navbar__toggle.is-active .navbar__toggle__inner{
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    -webkit-transition-delay:0.12s;
    transition-delay:0.12s;
    -webkit-transition-timing-function:cubic-bezier(0.215,0.61,0.355,1);
    transition-timing-function:cubic-bezier(0.215,0.61,0.355,1);
}

.navbar .navbar__toggle.is-active .navbar__toggle__inner::before{
    top:0;
    opacity:1;
    -webkit-transition:top 75ms ease,opacity 75ms ease .12s;
    transition:top 75ms ease,opacity 75ms ease .12s;
}

.navbar .navbar__toggle.is-active .navbar__toggle__inner::after{
    bottom:0;
    -webkit-transform:rotate(-90deg);
    transform:rotate(-90deg);
    -webkit-transition:bottom 75ms ease,-webkit-transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
    transition:bottom 75ms ease,-webkit-transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
    transition:bottom 75ms ease,transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
    transition:bottom 75ms ease,transform 75ms cubic-bezier(.215, .61, .355, 1) .12s,-webkit-transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
}

/* ============================================
   Hero Section
   ============================================ */

.hero{
    background-color:transparent;
    background-image:var(--background-pattern);
    background-position:0 0,6px 6px;
    background-size:12px 12px;
    border-bottom:1px solid var(--color-light);
}

@media all and (min-width:56.25em){
    .hero{
        padding:calc(var(--baseline) * 8) 0 calc(var(--baseline) * 12);
    }
}

.hero h1{
    font-size:clamp(1.1377777785rem, 1.1377777785rem + .1567604947 * (100vw - 20rem) / 55, 1.2945382732rem);
}

.hero p{
    color:var(--color-dark);
    font-size:.8789062495rem;
    margin-top:calc(var(--baseline) * 2);
}

/* ============================================
   Card Components
   ============================================ */

.c-card{
    align-items:center;
    display:flex;
    flex-wrap:wrap;
    gap:calc(var(--baseline) * 6) calc(var(--baseline) * 10);
}

.c-card+.c-card{
    border-top:1px solid var(--color-lighter);
    margin-top:calc(var(--baseline) * 10);
    padding-top:calc(var(--baseline) * 10);
}

@media all and (min-width:56.25em){
    .c-card+.c-card{
        margin-top:calc(var(--baseline) * 12);
        padding-top:calc(var(--baseline) * 12);
    }
}

.c-card__image{
    aspect-ratio:1.33333/1;
    background:var(--color-lighter);
    border-radius:var(--border-radius);
    display:block;
    flex-basis:100%;
    overflow:hidden;
}

@media all and (min-width:30em) and (max-width:42.6875em){
    .c-card__image{
        flex-basis:160px;
    }
}

@media all and (min-width:42.75em){
    .c-card__image{
        flex-basis:200px;
    }
}

.c-card__image>img{
    border-radius:inherit;
    display:block;
    height:100%;
    -o-object-fit:cover;
    object-fit:cover;
    width:100%;
}

.c-card__header{
    flex:1;
}

.c-card__header p{
    color:var(--color-dark);
    font-family:var(--font-entry);
    margin-top:calc(var(--baseline) * 2);
}

.c-card__meta{
    color:var(--color-dark);
    display:flex;
    flex-basis:100%;
    flex-wrap:wrap;
    font-size:.8789062495rem;
    gap:10px;
}

.c-card__meta a{
    color:var(--color-dark);
    -webkit-transition:var(--transition);
    transition:var(--transition);
}

.c-card__meta a:hover,.c-card__meta a:active,.c-card__meta a:focus{
    color:var(--accent-medium);
}

.c-card__meta>*+::before{
    content:"·";
    margin-right:10px;
}

.c-card__title{
    margin-top:0;
    font-size:clamp(1rem, 1rem + .2136296308 * (100vw - 20rem) / 55, 1.2136296308rem);
}

.c-card__author{
    display:inherit;
    gap:inherit;
}

.c-card__author>img{
    border-radius:50%;
    display:block;
    height:24px;
    -o-object-fit:cover;
    object-fit:cover;
    width:24px;
}

.c-card-tag{
    background-color:var(--color-lighter);
    border-radius:calc(var(--border-radius) * 15);
    font-variation-settings:"wght" var(--font-weight-normal);
    padding:.4128571429rem .8257142857rem;
}

/* ============================================
   Content/Post Styles
   ============================================ */

.content{
    position:relative;
}

.content__featured-image{
    background:var(--color-lighter);
    border-radius:var(--border-radius);
    height:var(--featured-image-height);
    margin:0;
}

.content__featured-image>img{
    border-radius:inherit;
    display:block;
    height:100%;
    -o-object-fit:cover;
    object-fit:cover;
    width:100%;
}

.content__featured-image--attop{
    border-bottom:1px solid var(--color-light);
    border-radius:0;
}

.content__title{
    line-height:1.2;
}

.content__lead{
    color:var(--color-dark);
    letter-spacing:var(--headings-letter-spacing);
    font-size:clamp(1.3808408252rem, 1.3808408252rem + .1902491813 * (100vw - 20rem) / 55, 1.5710900065rem);
}

.content__meta{
    align-items:center;
    color:var(--color-dark);
    display:flex;
    flex-wrap:wrap;
    font-size:.8789062495rem;
    gap:calc(var(--baseline) * 5);
    justify-content:space-between;
    margin-bottom:calc(var(--baseline) * 10);
}

.content__meta svg{
    color:var(--color-dark);
    stroke:var(--color-dark);
    flex-shrink:0;
    vertical-align:middle;
}
		
.post-tags {
  align-items:flex-start;
  display:flex;
  flex-wrap:wrap;
  gap:calc(var(--baseline) * 4);
  width:100%
}
.post-tags__label {
  align-items:center;
  color:var(--color-dark);
  display:flex;
  font-size:.8789062495rem;
  font-variation-settings:"wght" var(--font-weight-bold);
  gap:calc(var(--baseline) * 2);
  padding-top:.4rem
}
.post-tags__label svg {
  color:var(--color-dark);
  flex-shrink:0
}
.post-tags__list {
  display:flex;
  flex:1;
  flex-wrap:wrap;
  gap:calc(var(--baseline) * 2);
  list-style:none;
  margin:0;
  padding:0
}
.post-tags__item {
  list-style:none;
  padding:0
}
.post-tags__item a {
  background-color:var(--color-lighter);
  border-radius:calc(var(--border-radius) * 15);
  color:var(--color-darker);
  display:inline-block;
  font-size:.8789062495rem;
  font-variation-settings:"wght" var(--font-weight-normal);
  padding:.4128571429rem .8257142857rem;
  -webkit-transition:var(--transition);
  transition:var(--transition)
}
.post-tags__item a:hover {
  background-color:var(--color-light);
  color:var(--color-darker)
}

@media all and (min-width:56.25em){
    .content__meta{
        margin-top:calc(var(--baseline) * -2);
    }
}

.content__meta--attop{
    background-color:var(--background-transparent);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--color-light);
    margin:0;
    padding:calc(var(--baseline) * 6) var(--page-margin);
    position:sticky;
    top:0;
    z-index:1;
}

.content__meta--attop__inner{
    display:flex;
    flex-wrap:wrap;
    gap:0 calc(var(--baseline) * 5);
    justify-content:space-between;
    margin:0 auto;
    max-width:var(--entry-width);
    width:100%;
}

.content__date,.content__maintag{
    align-items:center;
    display:flex;
    gap:10px;
}

.content__date svg,.content__maintag svg{
    flex-shrink:0;
}

.content__featured-image__caption{
    align-items:center;
    display:flex;
    gap:10px;
}

.content__author{
    align-items:center;
    display:flex;
    font-size:.8789062495rem;
    gap:16px;
}

.content__author>div{
    display:flex;
    flex-flow:column;
}

.content__author>div p{
    margin:0;
}

.content__author__avatar{
    border-radius:100px;
    display:block;
    height:3rem;
    -o-object-fit:cover;
    object-fit:cover;
    -o-object-position:center;
    object-position:center;
    width:3rem;
}

.content__author__name{
    font-variation-settings:"wght" var(--headings-weight);
}

.content__entry{
    font-family:var(--font-entry);
    margin:calc(var(--baseline) * 9) auto;
    margin-bottom:0;
    font-size:clamp(1.066666667rem, 1.066666667rem + .1469629638 * (100vw - 20rem) / 55, 1.2136296308rem);
}

.content__entry>:first-child{
    margin-top:0;
}

.content__entry a:not(.btn):not([type=button]):not([type=submit]):not(button){
    color:var(--accent-medium);
}

.content__entry a:not(.btn):not([type=button]):not([type=submit]):not(button):hover{
    text-decoration:underline;
    -webkit-text-decoration-skip:ink;
    text-decoration-skip-ink:auto;
}

.content__footer{
    align-items:center;
    display:flex;
    flex-wrap:wrap;
    gap:calc(var(--baseline) * 5);
    justify-content:space-between;
    margin-top:calc(var(--baseline) * 16);
}

.content__last-updated{
    color:var(--color-dark);
    font-size:.8789062495rem;
}

.content__share>a{
    display:inline-flex;
}

.content__section{
    border-top:1px solid var(--color-light);
    margin-top:calc(var(--baseline) * 9);
}

.content__section__title{
    margin:0 0 calc(var(--baseline) * 9);
    font-size:clamp(1rem, 1rem + .1377777785 * (100vw - 20rem) / 55, 1.1377777785rem);
}

/* ============================================
   Sidebar & Widgets
   ============================================ */

.sidebar{
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    gap:calc(var(--baseline) * 16);
    height:inherit;
    max-width:var(--page-width);
}

.box{
    font-size:.8789062495rem;
}

.box__title{
    font-variation-settings:"wght" var(--headings-weight);
    margin:0 0 calc(var(--baseline) * 6);
    font-size:.8789062495rem;
}

.box ul{
    margin:0;
    padding:0;
    list-style:none;
}

.box ul li{
    list-style:none;
}

.tags__list{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    list-style:none;
}

.tags__item{
    padding:0;
    list-style:none;
}

.tags__item a{
    background-color:var(--color-lighter);
    border-radius:calc(var(--border-radius) * 15);
    color:var(--color-darker);
    font-variation-settings:"wght" var(--font-weight-normal);
    padding:.4128571429rem .8257142857rem;
    display:inline-block;
}

/* WordPress default categories widget styling */
.widget_categories ul{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    list-style:none;
    margin:0;
    padding:0;
}

.widget_categories .cat-item{
    padding:0;
    list-style:none;
}

.widget_categories .cat-item a{
    background-color:var(--color-lighter);
    border-radius:calc(var(--border-radius) * 15);
    color:var(--color-darker);
    font-variation-settings:"wght" var(--font-weight-normal);
    padding:.4128571429rem .8257142857rem;
    display:inline-block;
    transition:var(--transition);
}

.widget_categories .cat-item a:hover{
    background-color:var(--color-light);
    color:var(--color-darker);
}

.newsletter{
    margin-top:auto;
}

.newsletter__desc{
    margin:calc(var(--baseline) * -3) 0 calc(var(--baseline) * 3);
    color:var(--color-dark);
}

.newsletter input{
    margin-top:calc(var(--baseline) * 2);
    width:100%;
}

/* ============================================
   Buttons
   ============================================ */

.btn,[type=button],[type=submit],button{
    background:var(--accent-medium);
    border:none;
    border-radius:var(--border-radius);
    color:var(--white);
    cursor:pointer;
    display:inline-block;
    font-size:.8789062495rem;
    font-family:var(--font-body);
    font-variation-settings:"wght" var(--font-weight-bold);
    padding:calc(var(--baseline) * 3.3) calc(var(--baseline) * 4.6);
    vertical-align:middle;
    text-align:center;
    -webkit-transition:var(--transition);
    transition:var(--transition);
    width:100%;
}

@media all and (min-width:20em){
    .btn,[type=button],[type=submit],button{
        width:auto;
    }
}

.btn:active,.btn:focus,.btn:hover,[type=button]:active,[type=button]:focus,[type=button]:hover,[type=submit]:active,[type=submit]:focus,[type=submit]:hover,button:active,button:focus,button:hover{
    background:var(--accent-light);
    color:var(--white);
}

.btn--gray{
    background-color:var(--color-lighter);
    color:var(--color-darker);
}

.btn--gray:active,.btn--gray:focus,.btn--gray:hover{
    background-color:var(--color-light);
    color:var(--color-darker);
}

/* ============================================
   Pagination
   ============================================ */

.pagination{
    border-top:1px solid var(--color-lighter);
    display:flex;
    justify-content:space-between;
    letter-spacing:var(--headings-letter-spacing);
    margin-top:calc(var(--baseline) * 10);
    padding:calc(var(--baseline) * 8) 0 0;
}

@media all and (min-width:56.25em){
    .pagination{
        margin-top:calc(var(--baseline) * 12);
    }
}

/* ============================================
   Tooltips
   ============================================ */

.tltp{
    background-color:transparent;
    border-radius:100px;
    align-items:center;
    display:flex;
    height:2.75rem;
    justify-content:center;
    position:relative;
    width:2.75rem;
    -webkit-transition:var(--transition);
    transition:var(--transition);
}

.tltp>svg{
    fill:var(--color-dark);
    -webkit-transition:var(--transition);
    transition:var(--transition);
    height:20px;
    width:20px;
}

.tltp>svg[fill=none]{
    fill:none;
    stroke:var(--color-dark);
}

.tltp>span{
    background-color:var(--color-lighter);
    border:2px solid var(--background);
    border-radius:100px;
    font-size:.6789341556rem;
    left:2.75rem;
    opacity:0;
    padding:.2428571429rem .7285714286rem;
    visibility:hidden;
    -webkit-transition:var(--transition);
    transition:var(--transition);
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    white-space:nowrap;
    position:absolute;
    top:50%;
    -webkit-transform:translate(0,-50%);
    transform:translate(0,-50%);
}

.tltp:active,.tltp:focus,.tltp:hover{
    border-radius:100px;
    background-color:var(--color-lighter);
    color:var(--color-darker);
}

.tltp:hover>svg{
    fill:var(--color-darker);
}

.tltp:hover>svg[fill=none]{
    fill:none;
    stroke:var(--color-darker);
}

.tltp:hover>span{
    opacity:1;
    visibility:visible;
    -webkit-transform:translate(10px,-50%);
    transform:translate(10px,-50%);
}

/* ============================================
   Icon Styles (Feather Icons Replacement)
   ============================================ */

.fi{
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
    vertical-align:middle;
}

/* ============================================
   Dark Mode Logo Invert
   ============================================ */

@media (prefers-color-scheme:dark){
    .logo{
        filter:invert(1);
    }
}

/* ============================================
   Comments
   ============================================ */

.comments-area{
    margin-top:calc(var(--baseline) * 16);
}

.comments-title{
    font-size:clamp(1rem, 1rem + .1377777785 * (100vw - 20rem) / 55, 1.1377777785rem);
    margin:0 0 calc(var(--baseline) * 10);
}

.comment-list{
    list-style:none;
    margin:0;
    padding:0;
}

.comment-list .children{
    list-style:none;
    margin:calc(var(--baseline) * 8) 0 0 calc(var(--baseline) * 12);
    padding:0;
}

@media all and (min-width:42.75em){
    .comment-list .children{
        margin-left:calc(var(--baseline) * 20);
    }
}

.comment-body{
    background:var(--color-lighter);
    border-radius:var(--border-radius);
    margin-bottom:calc(var(--baseline) * 8);
    padding:calc(var(--baseline) * 8);
}

.comment-meta{
    align-items:center;
    display:flex;
    flex-wrap:wrap;
    gap:calc(var(--baseline) * 4);
    justify-content:space-between;
    margin-bottom:calc(var(--baseline) * 6);
}

.comment-author{
    align-items:center;
    display:flex;
    gap:calc(var(--baseline) * 4);
}

.comment-author .avatar{
    border-radius:50%;
    display:block;
    height:48px;
    width:48px;
}

.comment-author .fn{
    font-variation-settings:"wght" var(--font-weight-bold);
    font-style:normal;
}

.comment-author .says{
    margin-left:calc(var(--baseline) * 2);
}

.comment-metadata{
    color:var(--color-dark);
    font-size:.8789062495rem;
}

.comment-metadata a{
    color:var(--color-dark);
}

.comment-metadata a:hover{
    color:var(--accent-medium);
}

.comment-content{
    margin-top:calc(var(--baseline) * 6);
}

.comment-content p{
    margin-top:0;
}

.comment-content p:last-child{
    margin-bottom:0;
}

.comment-reply{
    margin-top:calc(var(--baseline) * 6);
}

.comment-reply a{
    color:var(--accent-medium);
    font-size:.8789062495rem;
    font-variation-settings:"wght" var(--font-weight-bold);
}

.comment-awaiting-moderation{
    background:hsla(var(--yellow),.1);
    border-left:3px solid hsla(var(--yellow),1);
    color:var(--color-darker);
    font-size:.9374999997rem;
    margin:calc(var(--baseline) * 6) 0;
    padding:calc(var(--baseline) * 4) calc(var(--baseline) * 6);
}

/* Comment Form */
.mono-comment-form{
    background:var(--color-lighter);
    border-radius:var(--border-radius);
    margin-top:calc(var(--baseline) * 12);
    padding:calc(var(--baseline) * 10);
}

.comment-form-comment,
.comment-form-author,
.comment-form-email,
.comment-form-url{
    margin-bottom:calc(var(--baseline) * 6);
}

.comment-form label{
    display:block;
    font-variation-settings:"wght" var(--font-weight-bold);
    margin-bottom:calc(var(--baseline) * 2);
}

.comment-form .required{
    color:hsla(var(--red),1);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
    background-color:var(--background);
    border:1px solid var(--color-light);
    border-radius:var(--border-radius);
    color:var(--color-darker);
    font-family:var(--font-body);
    line-height:var(--line-height);
    padding:calc(var(--baseline) * 3) calc(var(--baseline) * 4);
    width:100%;
    -webkit-transition:var(--transition);
    transition:var(--transition);
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus{
    border-color:var(--accent-medium);
    outline:0;
}

.comment-form textarea{
    min-height:150px;
    resize:vertical;
}

.comment-notes{
    color:var(--color-dark);
    font-size:.8789062495rem;
    margin-bottom:calc(var(--baseline) * 6);
}

.form-submit{
    margin-bottom:0;
    margin-top:calc(var(--baseline) * 8);
}

.comment-form .btn{
    cursor:pointer;
}

.no-comments{
    color:var(--color-dark);
    font-style:italic;
}

/* Comment Navigation */
.comment-navigation{
    border-top:1px solid var(--color-lighter);
    display:flex;
    justify-content:space-between;
    margin-top:calc(var(--baseline) * 10);
    padding-top:calc(var(--baseline) * 8);
}

.comment-navigation a{
    color:var(--accent-medium);
}

/* ============================================
   WordPress Specific Classes
   ============================================ */

.alignleft{
    float:left;
    margin-right:1.5rem;
    margin-bottom:1.5rem;
}

.alignright{
    float:right;
    margin-left:1.5rem;
    margin-bottom:1.5rem;
}

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

.wp-caption{
    max-width:100%;
}

.wp-caption-text{
    text-align:center;
    font-size:.8789062495rem;
    color:var(--color-dark);
    margin-top:calc(var(--baseline) * 2);
}

.sticky{
    /* Styles for sticky posts */
}

.bypostauthor{
    /* Styles for post author comments */
}

.screen-reader-text{
    clip:rect(1px,1px,1px,1px);
    position:absolute!important;
    height:1px;
    width:1px;
    overflow:hidden;
}

/* WordPress Gallery */
.gallery{
    margin:2.1857142857rem calc(var(--gallery-gap) * -1) .4857142857rem;
}

@media all and (min-width:20em){
    .gallery{
        display:flex;
        flex-wrap:wrap;
    }
}

.gallery-item{
    margin:0;
    padding:var(--gallery-gap);
    position:relative;
}

@media all and (min-width:20em){
    .gallery-item{
        flex:1 0 50%;
    }
}

@media all and (min-width:30em){
    .gallery-item{
        flex:1 0 33.333%;
    }
}

@media all and (min-width:42.75em){
    .gallery-item{
        flex:1 0 25%;
    }
}

.gallery-item img{
    border-radius:var(--border-radius);
    display:block;
    height:100%;
    object-fit:cover;
    width:100%;
}