:root {
    --bg: #f8f4ec;
    --bg-alt: #f1ead9;
    --ink: #201c17;
    --ink-soft: #5c554b;
    --line: rgba(32, 28, 23, 0.14);
    --accent: #6b7a4f;
}

* {
    box-sizing: border-box;
}

html {
    overflow-x: clip;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Geist', sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;

    /*
     * IMPORTANT — sticky TOC fix:
     *
     * Something else in the theme/plugin
     * stack is setting overflow-x: hidden
     * and overflow-y: auto directly on
     * body. That asymmetric overflow turns
     * body into a scroll-clipping box,
     * which breaks position: sticky for
     * every descendant (including the TOC),
     * causing it to release early while
     * scrolling.
     *
     * Forcing both axes back to a
     * consistent, non-clipping value fixes
     * the sticky containing block.
     */
    overflow-x: clip !important;
    overflow-y: visible !important;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--ink);
}


/* ========================================
   IMAGES
======================================== */

.img-slot {
    width: 100%;
    background: var(--bg-alt);
    border: 1px dashed var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-soft);
    font-size: 13px;
    text-align: center;
    overflow: hidden;
}

.img-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ========================================
   ANNOUNCEMENT
======================================== */

.announce {
    background: var(--accent);
    color: var(--bg);
    padding: 11px 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 400;
    text-align: center;
    flex-wrap: wrap;
    border-radius: 0 0 16px 16px;
}

.announce a {
    color: var(--bg);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity 0.2s ease;
}

.announce a:hover {
    opacity: 0.75;
}


/* ========================================
   HEADER
======================================== */

header {
    position: sticky;
    top: 22px;
    z-index: 50;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 22px 48px;

    background: rgba(248, 244, 236, 0.8);
    backdrop-filter: blur(10px);
}

.logo {
    font-family: 'Geist', sans-serif;
    font-weight: 300;
    font-size: 26px;
    letter-spacing: -0.8px;
    color: var(--ink);
}

nav.main-nav {
    display: flex;
    gap: 34px;
    font-size: 14px;
    font-weight: 400;
    color: var(--ink-soft);
}

nav.main-nav a {
    color: var(--accent);
    transition: color 0.2s ease;
    padding: 10px 0;
}

nav.main-nav a:hover {
    color: var(--ink);
}

nav.main-nav a.current {
    color: var(--ink);
    font-weight: 500;
}

nav.main-nav a.current:hover {
    color: var(--accent);
}

.menu-btn {
    display: none;
    background: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    font-family: inherit;
    cursor: pointer;
}


/* ========================================
   BLOG HEADER
======================================== */

.eyebrow {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px;
}

.post-header {
    padding: 80px 0 48px;
    max-width: 1184px;
    margin: 0 auto;
}

.back-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 24px;
}

.back-link:hover {
    color: var(--accent);
}

.post-header h1 {
    font-family: 'Geist', sans-serif;
    font-weight: 200;
    font-size: clamp(32px, 4.6vw, 52px);
    letter-spacing: -1.5px;
    line-height: 1.1;
    margin: 0 0 24px;
}

.byline {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--ink-soft);
}

.byline .author {
    font-weight: 500;
    color: var(--ink);
}


/* ========================================
   COVER IMAGE
======================================== */

.cover-wrap {
    max-width: 1184px;
    margin: 0 auto 56px;
    padding: 0;
}

.cover-img {
    width: 100%;
    height: 450px;
    aspect-ratio: 16 / 8;
    object-fit: cover;
    display: block;
    border-radius: 24px;
    overflow: hidden;
}

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


/* ========================================
   ARTICLE SECTION
======================================== */

.article-section {
    width: 100%;
    max-width: 1184px;
    margin: 0 auto;
    padding: 0 0 120px;

    /*
     * VERY IMPORTANT:
     *
     * Do not add overflow:hidden,
     * overflow:auto or overflow:scroll.
     *
     * The browser viewport must remain
     * the scrolling container.
     */
    overflow: visible;
}


/* ========================================
   ARTICLE GRID
======================================== *
   Switched from CSS Grid to Flexbox.
   Grid + sticky + align-items:start can
   make browsers miscalculate the sticky
   containing block, causing the TOC to
   stop sticking partway down the page.
   Flexbox sizes the columns the same way
   visually, but computes the sticky
   containing block reliably.
======================================== */

.article-grid {
    display: flex;
    align-items: flex-start;

    column-gap: 50px;

    width: 100%;

    /*
     * Never create a scrolling container
     * here.
     */
    overflow: visible;
}


/* ========================================
   TABLE OF CONTENTS
======================================== */

aside.toc {
    /*
     * Fixed-width column, replaces the
     * 220px grid-template-columns track.
     */
    flex: 0 0 300px;

    /*
     * THIS is the important part.
     *
     * The TOC stays in the left column
     * while the document scrolls.
     */
    position: -webkit-sticky;
    position: sticky;

    /*
     * Distance from the top of viewport.
     *
     * Your site header occupies roughly
     * this amount of space.
     */
    top: 120px;

    /*
     * Prevent flex stretching.
     */
    align-self: flex-start;

    /*
     * If the TOC list is taller than the
     * visible viewport space, cap it and
     * let it scroll internally so every
     * item stays reachable. Without this,
     * a tall TOC (e.g. many headings, or a
     * wide column causing more wrapping)
     * can extend below the fold with no
     * way to reach the bottom items, since
     * the panel itself has no scroll of
     * its own.
     */
    max-height: calc(100vh - 140px);
    overflow-y: auto;

    /*
     * Hide the scrollbar on the TOC panel
     * itself. It stays scrollable via
     * mouse wheel, trackpad, or touch —
     * this only removes the visible
     * scrollbar track/thumb.
     */
    scrollbar-width: none;
    -ms-overflow-style: none;

    /*
     * Keeps it above article elements
     * if anything overlaps.
     */
    z-index: 10;
}

aside.toc::-webkit-scrollbar {
    display: none;
}


/* ========================================
   TOC INNER
======================================== */

.toc-inner {
    width: 100%;
}


/* ========================================
   TOC LABEL
======================================== */

.toc-label {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 16px;
}


/* ========================================
   TOC NAV
======================================== */

.toc-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;

    border-left: 2px solid var(--line);
}

.toc-nav a {
    display: flex;
    align-items: flex-start;
    gap: 6px;

    padding: 9px 0 9px 16px;
    margin-left: -2px;

    border-left: 2px solid transparent;

    font-size: 13.5px;
    line-height: 1.4;

    color: var(--ink-soft);
    font-weight: 400;

    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}

.toc-nav a:hover {
    color: var(--ink);
}

.toc-nav a.active {
    color: var(--ink);
    font-weight: 500;
    border-left-color: var(--accent);
}

.toc-number {
    flex-shrink: 0;
    color: var(--accent);
}

.toc-h3 {
    padding-left: 30px !important;
    font-size: 13px !important;
}


/* ========================================
   ARTICLE
======================================== */

article.article-content {
    /*
     * Flexible column, replaces the
     * minmax(0, 760px) grid track.
     */
    flex: 1 1 auto;
    min-width: 0;
    max-width: 834px;

    font-size: 17.5px;
    line-height: 1.8;

    color: var(--ink);
}

article.article-content > p {
    margin: 0 0 28px;
}

article.article-content .lede,
article.article-content .closing {
    color: var(--ink-soft);
}


/* ========================================
   ARTICLE HEADINGS
======================================== */

article.article-content h2 {
    font-family: 'Geist', sans-serif;
    font-weight: 200;

    font-size: 26px;
    letter-spacing: -0.3px;
    line-height: 1.25;

    margin: 56px 0 16px;

    /*
     * Prevent heading from hiding behind
     * the sticky site header when clicking
     * a TOC link.
     */
    scroll-margin-top: 140px;
}

article.article-content h3 {
    scroll-margin-top: 140px;
}

article.article-content h4 {
    scroll-margin-top: 140px;
}

article.article-content code {
    background: var(--bg-alt);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 15px;
}


/* ========================================
   FAQ (in-article)
======================================== */

article.article-content .faq {
    padding: 56px 0 0;
}

article.article-content .faq-head {
    margin-bottom: 24px;
}

article.article-content .faq-head .eyebrow {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px;
}

article.article-content .faq-head h2 {
    font-family: 'Geist', sans-serif;
    font-weight: 200;
    font-size: 26px;
    letter-spacing: -0.3px;
    line-height: 1.25;
    margin: 0;
    scroll-margin-top: 140px;
}

article.article-content .faq-list {
    display: flex;
    flex-direction: column;
}

article.article-content .faq-list details {
    border-top: 1px solid var(--line);
    padding: 22px 0;
}

article.article-content .faq-list summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink);

    cursor: pointer;
    list-style: none;
}

article.article-content .faq-list summary::-webkit-details-marker {
    display: none;
}

article.article-content .faq-list summary::marker {
    content: '';
}

/*
 * Custom +/- indicator, since the
 * native marker is hidden above.
 */
article.article-content .faq-list summary::after {
    content: '+';

    flex-shrink: 0;

    width: 22px;
    height: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;
    font-weight: 300;
    color: var(--accent);
}

article.article-content .faq-list details[open] summary::after {
    content: '−';
}

article.article-content .faq-list p {
    margin: 14px 0 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ink-soft);
    font-weight: 300;
}

article.article-content .faq-list-end {
    border-top: 1px solid var(--line);
}


/* ========================================
   RELATED POSTS
======================================== */

.related-section {
    padding: 0 48px 120px;
    max-width: 1280px;
    margin: 0 auto;
}

.related-section h2 {
    font-family: 'Geist', sans-serif;
    font-weight: 200;
    font-size: clamp(26px, 3vw, 36px);
    letter-spacing: -1px;
    margin: 0 0 40px;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

.post-card {
    display: flex;
    flex-direction: column;
    gap: 16px;

    color: inherit;

    padding: 14px 0;

    border-radius: 20px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.post-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px -22px rgba(32, 28, 23, 0.25);
    background: var(--bg-alt);
}

.post-img {
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    max-width: 550px;
}

.post-meta {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--accent);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.post-card h3 {
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 8px;
    line-height: 1.4;
    color: var(--ink);
}

.post-card p {
    font-size: 14px;
    color: var(--ink-soft);
    margin: 0;
    line-height: 1.6;
    font-weight: 300;
}


/* ========================================
   CTA
======================================== */

.cta-section {
    padding: 0 48px 120px;
    max-width: 1280px;
    margin: 0 auto;
}

.cta-box {
    background: var(--ink);
    color: var(--bg);

    border-radius: 24px;

    padding: 64px 48px;

    text-align: center;
}

.cta-box h2 {
    font-family: 'Geist', sans-serif;
    font-weight: 200;
    font-size: clamp(28px, 3.6vw, 42px);
    letter-spacing: -1px;
    margin: 0 0 18px;
}

.cta-box h2 span {
    font-style: italic;
    color: var(--accent);
}

.cta-box p {
    font-size: 16px;
    color: rgba(248, 244, 236, 0.72);
    margin: 0 0 32px;
    font-weight: 300;
}

.cta-box a {
    display: inline-block;

    padding: 15px 28px;

    background: var(--accent);
    color: var(--bg);

    border-radius: 100px;

    font-size: 15px;
    font-weight: 500;

    transition: opacity 0.25s ease;
}

.cta-box a:hover {
    opacity: 0.85;
    color: var(--bg);
}


/* ========================================
   FOOTER
======================================== */

footer {
    padding: 44px 48px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    flex-wrap: wrap;
    gap: 16px;

    border-top: 1px solid var(--line);
}

.footer-logo {
    font-family: 'Geist', sans-serif;
    font-weight: 300;
    font-size: 19px;
    color: var(--ink);
}

.footer-copy {
    font-size: 13px;
    color: var(--ink-soft);
    font-weight: 300;
}

.footer-links {
    display: flex;
    gap: 22px;

    font-size: 13px;
    font-weight: 500;
}

.footer-links a {
    color: var(--accent);
    transition: color 0.2s ease;
}

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


/* ========================================
   TABLET
======================================== */

@media (max-width: 1100px) {

    .post-header,
    .cover-wrap,
    .article-section {
        max-width: calc(100% - 80px);
    }

    .article-grid {
        column-gap: 40px;
    }

    aside.toc {
        flex-basis: 190px;
        top: 120px;
    }

}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 680px) {

    .announce,
    header,
    .post-header,
    .cover-wrap,
    .article-section,
    .related-section,
    .cta-section {
        padding-left: 20px;
        padding-right: 20px;
    }


    /* ----------------------------------------
       HEADER
    ---------------------------------------- */

    header {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .menu-btn {
        display: flex;
    }

    nav.main-nav {
        display: none;

        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        background: var(--bg);

        flex-direction: column;
        gap: 2px;

        padding: 8px 20px 24px;

        border-bottom: 1px solid var(--line);

        box-shadow:
            0 24px 48px -24px rgba(32, 28, 23, 0.18);

        z-index: 60;
    }

    nav.main-nav.open {
        display: flex;
    }


    /* ----------------------------------------
       BLOG HEADER
    ---------------------------------------- */

    .post-header {
        padding-top: 48px;
        padding-bottom: 32px;
    }

    .post-header h1 {
        font-size: clamp(32px, 8vw, 42px);
        letter-spacing: -1px;
    }


    /* ----------------------------------------
       COVER
    ---------------------------------------- */

    .cover-wrap {
        padding-left: 20px;
        padding-right: 20px;
    }

    .cover-img {
        aspect-ratio: 4 / 3;
        height: auto;
        border-radius: 18px;
    }


    /* ----------------------------------------
       ARTICLE
    ---------------------------------------- */

    .article-section {
        padding-bottom: 80px;
    }

    .article-grid {
        display: block;
        width: 100%;
    }

    /*
     * Hide TOC on mobile because there isn't
     * enough horizontal space for a sidebar.
     */
    aside.toc {
        display: none;
    }

    article.article-content {
        width: 100%;
        font-size: 16px;
        line-height: 1.75;
    }

    article.article-content h2 {
        font-size: 24px;
        margin-top: 48px;
        scroll-margin-top: 100px;
    }


    /* ----------------------------------------
       RELATED
    ---------------------------------------- */

    .related-grid {
        grid-template-columns: 1fr;
    }

    .post-img {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 4 / 3;
        border-radius: 16px;
        overflow: hidden;
    }

    .post-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .post-img-gap {
        margin: -20px;
    }


    /* ----------------------------------------
       CTA
    ---------------------------------------- */

    .cta-box {
        padding: 40px 24px;
    }


    /* ----------------------------------------
       FOOTER
    ---------------------------------------- */

    footer {
        padding: 32px 20px;
    }

}