/* ======================================================
   VARIABLES
   ====================================================== */
:root {
    --quote-text: #555555;
    --quote-line: #d3d3d3;
}

body.dark-theme {
    --quote-text: #e0e0e0;
    --quote-line: #888888;
}

/* ======================================================
   BASE
   ====================================================== */
html,
body {
    background-color: #fdfdfd !important;
    color: #1a1a1a;
    font-family: "Lora", Georgia, serif !important;
    line-height: 1.8 !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
    text-align: left !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100% !important;
    max-width: 560px !important;
    margin: 5rem auto 6rem !important;
    padding: 0 2rem !important;
    box-sizing: border-box !important;
}

/* ======================================================
   LAYOUT
   ====================================================== */
main,
article,
section,
.content,
.page-content,
header,
footer {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

/* ======================================================
   TYPOGRAPHY
   ====================================================== */
h1,
h2,
h3,
h4,
h5 {
    color: #111;
    line-height: 1.3;
    font-weight: 400 !important;
    margin-top: 0 !important;
    text-align: left !important;
}

h1 {
    font-size: clamp(22px, 1.2vw + 16px, 28px) !important;
    margin: 3.5rem 0 2rem !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}

h2 {
    font-size: 1.4rem !important;
    margin-bottom: 0.8em !important;
}

h3 {
    font-size: 1.2rem !important;
    margin-bottom: 0.5em !important;
    font-style: italic;
}

article h2,
article h3,
article h4,
.post-content h2,
.post-content h3 {
    margin-top: 2.5em !important;
}

p,
main p,
article p,
span[itemprop="articleBody"] p,
.content p {
    font-size: 1.125rem !important;
    color: #111 !important;
    text-align: left !important;
    margin: 0 0 1.6rem !important;
    line-height: 1.8 !important;
}

main ul li,
article ul li,
span[itemprop="articleBody"] ul li,
.post-content ul li,
.content ul li {
    font-size: 1.125rem !important;
    line-height: 1.8 !important;
    margin-bottom: 1rem !important;
}

/* ======================================================
   HEADER
   ====================================================== */
header {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: baseline !important;
    margin: 0 0 3rem !important;
}

header nav.main-menu {
    display: flex !important;
    align-items: baseline !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

header nav.main-menu a {
    display: inline-flex !important;
    align-items: baseline !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    color: #888 !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

header nav.main-menu a.active {
    font-weight: 700 !important;
    color: #111 !important;
}

header .home-link {
    font-weight: 700 !important;
    color: #111 !important;
}

header .back-button,
.back-button {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: inherit !important;
    text-decoration: none !important;
    transition: transform 0.2s ease !important;
    text-shadow: 0.25px 0 currentColor, -0.25px 0 currentColor !important;
}

header .back-button svg,
.back-button svg {
    display: block !important;
    flex-shrink: 0 !important;
}

header .back-button svg {
    transform: translateY(5px) !important;
}

header .menu-separator {
    display: inline-block !important;
    margin: 0 0.7rem !important;
    color: #888 !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

#theme-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    transform: translateY(4px) !important;
    transition: transform 0.3s ease, color 0.3s ease !important;
}

#theme-toggle svg {
    display: block !important;
    width: 17px !important;
    height: 17px !important;
    stroke-width: 2.2 !important;
    stroke: #000 !important;
    transition: stroke 0.3s ease !important;
}

/* ======================================================
   LINKS
   ====================================================== */
article a,
.post-content a {
    color: #555 !important;
    border-bottom: 1px solid #ddd !important;
    text-decoration: none;
    transition: border-color 0.3s ease;
}

article a:hover,
.post-content a:hover {
    color: #111 !important;
    border-bottom-color: #111 !important;
}

.post-title a,
.posts li a,
header a,
footer a {
    border-bottom: none !important;
    text-decoration: none !important;
    color: #1d1d1b;
    transition: color 0.2s ease-in-out;
}

.posts li a:hover {
    color: #c1c1c1;
}

#theme-toggle,
ul.posts li a,
.header-left a {
    -webkit-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.back-button:hover {
    color: inherit !important;
}

/* ======================================================
   POSTS
   ====================================================== */
ul.posts {
    list-style: none !important;
    padding: 0 !important;
    margin: 1rem 0 0 !important;
}

ul.posts li {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    margin-bottom: 1.2rem !important;
}

ul.posts li a {
    flex: 0 1 auto !important;
    order: 1 !important;
    font-size: 1.188rem !important;
    color: #111 !important;
    text-decoration: none !important;
    line-height: 1.5 !important;
    transition: opacity 0.3s ease, color 0.3s ease !important;
}

ul.posts li::before {
    content: "" !important;
    display: block !important;
    flex-grow: 1 !important;
    order: 2 !important;
    margin: 0 1rem !important;
    border-bottom: none!important;
    transform: translateY(-4px) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

ul.posts li time {
    flex: 0 0 auto !important;
    order: 3 !important;
    white-space: nowrap !important;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace !important;
    font-size: 0.85rem !important;
    font-weight: 300 !important;
    color: #888 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease, color 0.3s ease !important;
}

ul.posts:hover li a,
ul.posts:hover li time {
    opacity: 0.3 !important;
}

ul.posts li:hover a {
    opacity: 1 !important;
    color: #000 !important;
}

ul.posts li:hover::before {
    opacity: 0.5 !important;
}

ul.posts li:hover time {
    opacity: 1 !important;
    color: #555 !important;
}

/* ======================================================
   ARTICLE
   ====================================================== */
h2[itemprop="name headline"] {
    font-size: clamp(1.3rem, 0.8vw + 1.1rem, 1.6rem) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin: 2rem 0 !important;
    letter-spacing: -0.02em !important;
}

main > section > h2[itemprop="name headline"],
main > section > span[itemprop="articleBody"] {
    margin-top: 1rem !important;
}

/* ======================================================
   IMAGES
   ====================================================== */
article img,
.post-content img,
.content img,
span[itemprop="articleBody"] img {
    max-width: 100% !important;
    height: auto;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    border: 1px solid #eee !important;
    border-radius: 0.25rem;
    display: block;
    margin: 2em auto;
    filter: grayscale(100%) !important;
    transition: filter 0.5s ease !important;
}

article img:hover {
    filter: grayscale(0%) !important;
}

/* ======================================================
   BLOCKQUOTE
   ====================================================== */
blockquote {
    margin: 1.5rem 0 !important;
    padding-left: 16px !important;
    border-left: 3px solid var(--quote-line) !important;
    color: var(--quote-text) !important;
    font-style: italic !important;
    opacity: 1 !important;
    text-align: left !important;
}

blockquote *,
body main blockquote *,
span[itemprop="articleBody"] blockquote *,
.post-content blockquote * {
    color: var(--quote-text) !important;
}

blockquote p,
body main blockquote p {
    margin-bottom: 0 !important;
}

/* ======================================================
   LISTS
   ====================================================== */
article ul,
.post-content ul,
.content ul,
span[itemprop="articleBody"] ul {
    list-style: none !important;
    padding-left: 0 !important;
}

article ul li,
.post-content ul li,
.content ul li,
span[itemprop="articleBody"] ul li {
    position: relative !important;
    padding-left: 1.2rem !important;
    text-align: left !important;
}

article ul li::before,
.post-content ul li::before,
.content ul li::before,
span[itemprop="articleBody"] ul li::before {
    content: "–" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: inherit !important;
}

main ol li,
article ol li,
.post-content ol li,
.content ol li,
span[itemprop="articleBody"] ol li {
    font-size: clamp(15px, 0.4vw + 14px, 16px) !important;
    line-height: 1.75 !important;
    margin-bottom: 1.5rem !important;
    color: inherit !important;
    text-align: left !important;
}

main ol li ul,
article ol li ul,
.post-content ol li ul {
    margin-top: 0.8rem !important;
    margin-bottom: 0 !important;
}

/* ======================================================
   TAGS
   ====================================================== */
.tags a,
.post-tags a,
.post-meta a[href*="/tags/"] {
    display: inline !important;
    background: none !important;
    color: #888 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-family: inherit !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    margin: 0 8px 0 0 !important;
    transition: color 0.2s ease !important;
}

.tags a:hover,
.post-tags a:hover,
.post-meta a[href*="/tags/"]:hover {
    background: none !important;
    color: #1a1a1a !important;
    border: none !important;
    box-shadow: none !important;
}

.tags a::before,
.post-tags a::before,
.post-meta a[href*="/tags/"]::before {
    content: "#" !important;
    color: #bbb !important;
    margin-right: 1px !important;
}

/* ======================================================
   PAGINATION
   ====================================================== */
.pagination {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 1.5rem !important;
    padding: 1.5rem 0 !important;
}

.pagination a {
    color: #888 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.pagination a:hover {
    color: #111 !important;
}

.pagination-empty {
    width: 0 !important;
}

/* ======================================================
   DARK MODE
   ====================================================== */
html:has(body.dark-theme),
body.dark-theme,
body.dark-theme .wrapper,
body.dark-theme .container,
body.dark-theme .main,
body.dark-theme main {
    background-color: #1a1a1a !important;
}

body.dark-theme,
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6,
body.dark-theme p,
body.dark-theme li,
body.dark-theme span,
body.dark-theme a,
body.dark-theme time,
body.dark-theme strong,
body.dark-theme em,
body.dark-theme b,
body.dark-theme i,
body.dark-theme span[itemprop="articleBody"] p,
body.dark-theme span[itemprop="articleBody"] li,
body.dark-theme span[itemprop="articleBody"] a,
body.dark-theme span[itemprop="articleBody"] strong,
body.dark-theme span[itemprop="articleBody"] b,
body.dark-theme span[itemprop="articleBody"] em,
body.dark-theme span[itemprop="articleBody"] i,
body.dark-theme span[itemprop="articleBody"] time {
    color: #e0e0e0 !important;
}

body.dark-theme h1 {
    color: #fff !important;
}

body.dark-theme header a:not(:has(img)),
body.dark-theme .menu a:not(:has(img)) {
    color: #e0e0e0 !important;
}

body.dark-theme header a:not(:has(img)):hover,
body.dark-theme .menu a:not(:has(img)):hover,
body.dark-theme header a:not(:has(img)).active,
body.dark-theme header a:not(:has(img))[aria-current="page"] {
    color: #fff !important;
}

body.dark-theme ul.posts a,
body.dark-theme ul.posts span,
body.dark-theme ul.posts time,
body.dark-theme .pagination a,
body.dark-theme .pagination span {
    color: #e0e0e0 !important;
}

body.dark-theme ul.posts li::before {
    border-bottom-color: #444 !important;
}

body.dark-theme img {
    filter: brightness(0.85) contrast(1.1);
    border-color: #333 !important;
}

body.dark-theme header a img,
body.dark-theme .menu a img {
    mix-blend-mode: normal !important;
    filter: none !important;
}

body.dark-theme .pagination a {
    color: #888 !important;
}

body.dark-theme .pagination a:hover {
    color: #fff !important;
}

body.dark-theme .tags a,
body.dark-theme .post-tags a,
body.dark-theme .post-meta a[href*="/tags/"] {
    background: none !important;
    color: #888 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.dark-theme .tags a:hover,
body.dark-theme .post-tags a:hover,
body.dark-theme .post-meta a[href*="/tags/"]:hover {
    background: none !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
}

body.dark-theme ul.posts:hover li a,
body.dark-theme ul.posts:hover li time {
    opacity: 0.3 !important;
}

body.dark-theme ul.posts li:hover a {
    opacity: 1 !important;
    color: #fff !important;
}

body.dark-theme ul.posts li:hover time {
    opacity: 1 !important;
    color: #aaa !important;
}

body.dark-theme ul.posts li:hover::before {
    border-bottom-color: #444 !important;
    opacity: 0.8 !important;
}

body.dark-theme #theme-toggle svg {
    stroke: #fff !important;
}

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width: 600px) {
    body {
        max-width: 100% !important;
        margin: 1.5rem auto 4rem !important;
        padding: 0 1.25rem !important;
    }

    header {
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    header nav {
        margin-left: auto !important;
        display: flex !important;
        align-items: center !important;
    }

    header nav ul {
        display: flex !important;
        gap: 0.8rem !important;
        margin-right: 0.8rem !important;
        padding: 0 !important;
    }

    #theme-toggle {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    header a:not(:has(img)) {
        font-size: 15px !important;
    }

    h1 {
        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        margin-top: 2.5rem !important;
        margin-bottom: 1.2rem !important;
    }

    main p,
    article p,
    span[itemprop="articleBody"] p,
    .content p {
        font-size: 1.125rem !important;
        line-height: 1.8 !important;
        margin-bottom: 1.6rem !important;
    }

    ul.posts li {
        margin-bottom: 1rem !important;
    }

    ul.posts li a {
        display: block !important;
        font-size: 18px !important;
        line-height: 1.5 !important;
        letter-spacing: -0.01em !important;
        margin-bottom: 0 !important;
    }

    ul.posts li::before {
        margin: 0 0.6rem !important;
        transform: translateY(-3px) !important;
    }

    ul.posts li time {
        font-size: 13px !important;
        opacity: 1 !important;
    }

    /* Keep the soft/faded style, but prevent mobile tap/hover
       from making the entire list unexpectedly disappear. */
    ul.posts:hover li a,
    ul.posts:hover li time {
        opacity: 0.3 !important;
    }

    ul.posts li:hover a {
        opacity: 1 !important;
    }

    ul.posts li:hover time {
        opacity: 1 !important;
    }
}

@media (max-width: 480px) {
    body {
        padding: 0 1.25rem !important;
    }

    h1 {
        font-size: 22px !important;
        margin-top: 2rem !important;
        margin-bottom: 1rem !important;
    }

    main p,
    article p,
    span[itemprop="articleBody"] p,
    .content p {
        font-size: 1.05rem !important;
        line-height: 1.7 !important;
        margin-bottom: 1.3rem !important;
    }

    ul.posts li a {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }

    ul.posts li time {
        font-size: 12px !important;
        opacity: 1 !important;
    }
}