/* Drawing lessons: a quiet sketchbook frame, with a pink lesson outline.
 * Scoped to the article so widgets, other post categories and tools keep their styles. */
.drawing-tutorial {
    --drawing-ink: #293345;
    --drawing-muted: #586174;
    --drawing-line: #e3dce5;
    --drawing-pink: #a92f66;
    --drawing-paper: #fff7fb;
}

.drawing-tutorial .post-title {
    padding-bottom: 24px;
    margin-bottom: 28px;
    border-bottom: 2px solid var(--drawing-line);
}

.drawing-tutorial .post-title h1 {
    color: var(--drawing-ink);
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin-bottom: 20px;
    overflow-wrap: anywhere;
}

.main-container .drawing-tutorial .post-content p,
.main-container .drawing-tutorial .post-content li {
    font-size: 17px;
    line-height: 1.8;
    color: var(--drawing-ink);
}

.drawing-tutorial .post-content > p {
    margin-bottom: 24px;
}

.drawing-tutorial .post-content h2 {
    margin: 48px 0 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--drawing-line);
    color: var(--drawing-ink);
    font-size: 30px;
    line-height: 1.3;
}

.drawing-tutorial .post-content h3 {
    margin: 40px 0 18px;
    padding: 8px 0 8px 18px;
    border-left: 4px solid var(--drawing-pink);
    color: var(--drawing-ink);
    font-size: 23px;
    line-height: 1.4;
}

.drawing-tutorial .post-content :is(h2, h3, h4, .ez-toc-section) {
    scroll-margin-top: 110px;
}

/* Target editorial images, including classic editor and Gutenberg markup.
 * Keep the artist avatar and embedded controls out of the illustration frame. */
.drawing-tutorial .post-content :is(img[class*="wp-image-"], .wp-block-image img, .featured-image-holder img):not(.mimi-artist-photo) {
    box-sizing: border-box;
    max-width: 100%;
    height: auto;
    padding: clamp(8px, 2vw, 16px);
    border: 1px solid #d8cbd9;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 4px 0 #f3eaf2, 0 12px 28px rgba(55, 35, 60, 0.06);
}

.drawing-tutorial .post-content :is(.wp-caption-text, figcaption) {
    margin-top: 12px;
    color: var(--drawing-muted);
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}

.drawing-tutorial .post-content .wp-caption {
    max-width: 100%;
}

/* Preserve Easy Table of Contents links, hierarchy and collapse behavior. */
.drawing-tutorial #ez-toc-container {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 32px 0;
    padding: 24px;
    border: 1px solid #ead3e0;
    border-top: 4px solid var(--drawing-pink);
    border-radius: 8px 8px 18px 18px;
    background: var(--drawing-paper);
    box-shadow: none;
    text-align: start;
}

.drawing-tutorial #ez-toc-container .ez-toc-title-container {
    margin-bottom: 16px;
}

.main-container .drawing-tutorial #ez-toc-container p.ez-toc-title {
    margin: 0;
    color: var(--drawing-ink);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
}

.main-container .drawing-tutorial #ez-toc-container ul {
    margin: 0;
    padding: 0;
}

.main-container .drawing-tutorial #ez-toc-container ul ul {
    margin: 8px 0 0 14px;
    padding-left: 14px;
    border-left: 1px solid #dfbdd0;
}

.main-container .drawing-tutorial #ez-toc-container li {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
    line-height: 1.5;
}

.main-container .drawing-tutorial #ez-toc-container li + li {
    margin-top: 6px;
}

.drawing-tutorial #ez-toc-container a.ez-toc-link {
    display: block;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #75334f;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.drawing-tutorial #ez-toc-container a.ez-toc-link:hover,
.drawing-tutorial #ez-toc-container a.ez-toc-link:focus-visible {
    border-color: #dfbdd0;
    background: #fff;
    color: var(--drawing-pink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.drawing-tutorial #ez-toc-container a:focus-visible {
    outline: 2px solid var(--drawing-pink);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .drawing-tutorial #ez-toc-container {
        padding: 20px 14px;
        margin: 24px 0;
    }

    .main-container .drawing-tutorial #ez-toc-container ul ul {
        margin-left: 4px;
        padding-left: 8px;
    }

    .drawing-tutorial .post-content h2 {
        font-size: 26px;
        margin-top: 36px;
    }

    .drawing-tutorial .post-content h3 {
        font-size: 21px;
        padding-left: 12px;
    }
}

@media print {
    .drawing-tutorial #ez-toc-container {
        background: #fff;
    }

    .drawing-tutorial .post-content img {
        box-shadow: none !important;
    }
}