/* Series UI — the reading journey shared by the blog index and blog detail.
   Scoped under .series-* so it can sit beside the older page styles without
   fighting them. Palette follows the site's purple (--purple) and crimson
   (--orange) with warm paper tones from the design mock. */

:root {
    --series-plum: #4E2A74;
    --series-plum-deep: #2E1846;
    --series-plum-mid: #5A2E7E;
    --series-plum-soft: #F4EEF9;
    --series-crimson: #C62A47;
    --series-ink: #2A2035;
    --series-muted: #6F6577;
    --series-paper: #FBF7F6;
    --series-line: #EADFE8;
    --series-card-shadow: 0 1px 2px rgba(46, 24, 70, .05), 0 8px 24px rgba(46, 24, 70, .06);
}

.series-page {
    background: var(--series-paper);
    padding-bottom: 60px;
}

.series-shell {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------------------------------------------------------------- hero --- */

.series-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--series-plum-deep) 0%, var(--series-plum-mid) 58%, #7A3B6B 100%);
    color: #fff;
}

.series-hero-media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .38;
}

.series-hero-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(30, 14, 48, .35) 0%, rgba(30, 14, 48, .82) 100%);
}

.series-hero-inner {
    position: relative;
    padding: 54px 0 48px;
}

.series-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: 16px;
    opacity: .92;
}

.series-eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: currentColor;
    opacity: .7;
}

/* Leaving a series goes back to the whole blog, which is the same page. */
.series-hero-back {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    margin-bottom: 18px;
}

.series-hero-back:hover {
    color: #fff;
    text-decoration: underline;
}

.series-hero h1 {
    color: #fff !important;
    font-size: 44px;
    line-height: 1.12;
    margin: 0 0 14px;
    font-weight: 600;
    max-width: 16ch;
}

.series-hero-sub {
    font-size: 18px;
    line-height: 1.5;
    margin: 0;
    max-width: 44ch;
    color: rgba(255, 255, 255, .88) !important;
}

.series-hero-note {
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .22);
    font-size: 14px;
    line-height: 1.6;
    max-width: 46ch;
    color: rgba(255, 255, 255, .74) !important;
}

/* --------------------------------------------------------------- chips --- */

.series-chips-rail {
    background: #fff;
    border-bottom: 1px solid var(--series-line);
}

.series-chips {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 14px 0;
    scrollbar-width: none;
}

.series-chips::-webkit-scrollbar {
    display: none;
}

.series-chip {
    flex: 0 0 auto;
    border: 1px solid var(--series-line);
    background: #fff;
    color: var(--series-muted);
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.series-chip:hover {
    border-color: var(--series-plum);
    color: var(--series-plum);
}

.series-chip.is-active {
    background: var(--series-plum);
    border-color: var(--series-plum);
    color: #fff;
}

/* ------------------------------------------------------------- toolbar --- */

.series-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 0 6px;
}

.series-search {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--series-line);
    border-radius: 12px;
    padding: 0 14px;
    height: 46px;
}

.series-search i {
    color: var(--series-muted);
    font-size: 15px;
}

.series-search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    color: var(--series-ink);
    height: 100%;
}

.series-sort {
    height: 46px;
    border: 1px solid var(--series-line);
    border-radius: 12px;
    background: #fff;
    color: var(--series-ink);
    font-size: 14px;
    padding: 0 12px;
    cursor: pointer;
}

/* ------------------------------------------------------- section header --- */

.series-section-head {
    padding: 34px 0 18px;
}

.series-section-head .series-eyebrow {
    color: var(--series-plum);
    margin-bottom: 10px;
}

.series-section-head h2 {
    font-size: 26px;
    line-height: 1.25;
    margin: 0;
    color: var(--series-ink) !important;
    font-weight: 600;
}

.series-section-head p {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--series-muted) !important;
}

/* ---------------------------------------------------------------- list --- */

.series-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* The thread that runs down the journey, behind the number badges. */
.series-list::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 34px;
    bottom: 34px;
    width: 1px;
    background: var(--series-line);
}

.series-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
}

.series-num {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--series-plum);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    box-shadow: 0 0 0 5px var(--series-paper);
    z-index: 1;
}

.series-card {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--series-line);
    border-radius: 16px;
    padding: 12px;
    box-shadow: var(--series-card-shadow);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    min-width: 0;
}

.series-item:hover .series-card {
    transform: translateY(-2px);
    border-color: #D9C7DE;
    box-shadow: 0 2px 4px rgba(46, 24, 70, .06), 0 14px 32px rgba(46, 24, 70, .1);
}

/* Thumbnails are 2:1 files (appsrc/images.py) and are shown at 2:1, whole:
   a square box cut the sides - and the words on the artwork - off. */
.series-thumb {
    flex: 0 0 auto;
    width: 144px;
    height: 72px;
    border-radius: 12px;
    object-fit: contain;
    background: var(--series-plum-soft);
}

.series-body {
    flex: 1 1 auto;
    min-width: 0;
}

.series-body h3 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--series-ink) !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.series-body p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--series-muted) !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.series-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--series-muted);
}

.series-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.series-go {
    flex: 0 0 auto;
    color: #B9A9C2;
    font-size: 18px;
    padding-right: 4px;
}

.series-item:hover .series-go {
    color: var(--series-plum);
}

.series-empty {
    background: #fff;
    border: 1px dashed var(--series-line);
    border-radius: 16px;
    padding: 40px 20px;
    text-align: center;
    color: var(--series-muted);
    font-size: 14px;
}

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

.series-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--series-line);
    border-radius: 16px;
    text-decoration: none;
    box-shadow: var(--series-card-shadow);
}

.series-cta i:first-child {
    font-size: 20px;
    color: var(--series-plum);
}

.series-cta h3 {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 600;
    color: var(--series-ink) !important;
}

.series-cta p {
    margin: 0;
    font-size: 13px;
    color: var(--series-muted) !important;
}

/* ---------------------------------------------------------- pagination --- */

.series-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}

.series-page-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--series-line);
    background: #fff;
    color: var(--series-plum);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}

.series-page-btn:hover {
    background: var(--series-plum);
    border-color: var(--series-plum);
    color: #fff;
}

.series-page-count {
    font-size: 13px;
    color: var(--series-muted);
}

/* ============================================== detail page components === */

.series-crumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--series-plum);
    text-decoration: none;
    font-weight: 500;
}

.series-crumb:hover {
    text-decoration: underline;
}

.series-position {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 14px;
}

.series-position-pill {
    border: 1px solid var(--series-plum);
    color: var(--series-plum);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
}

.series-position-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--series-muted);
}

/* The 01 02 03 … rail that shows where this article sits in its series. */
.series-progress {
    margin: 40px 0 10px;
    padding: 20px;
    background: var(--series-plum-soft);
    border: 1px solid #E4D8EC;
    border-radius: 16px;
    text-align: center;
}

.series-progress-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--series-plum);
    margin-bottom: 14px;
}

.series-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.series-step {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--series-muted);
    background: #fff;
    border: 1px solid var(--series-line);
    text-decoration: none;
}

.series-step:hover {
    border-color: var(--series-plum);
    color: var(--series-plum);
}

.series-step.is-current {
    background: var(--series-plum);
    border-color: var(--series-plum);
    color: #fff;
}

.series-reading {
    margin-top: 14px;
    font-size: 13px;
    color: var(--series-muted);
}

.series-reading strong {
    color: var(--series-ink);
    font-weight: 600;
}

.series-pager {
    display: flex;
    gap: 14px;
    margin: 20px 0 40px;
}

.series-pager a,
.series-pager span {
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid var(--series-line);
    background: #fff;
    border-radius: 14px;
    padding: 14px 16px;
    text-decoration: none;
    display: block;
}

.series-pager span {
    opacity: .55;
}

.series-pager .series-pager-dir {
    font-size: 12px;
    font-weight: 600;
    color: var(--series-plum);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.series-pager .series-pager-next {
    text-align: right;
}

.series-pager .series-pager-next .series-pager-dir {
    justify-content: flex-end;
}

.series-pager .series-pager-title {
    font-size: 14px;
    color: var(--series-ink);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.series-pager a:hover {
    border-color: var(--series-plum);
}

/* --------------------------------------------------------------- phone --- */

@media screen and (max-width: 800px) {
    .series-shell {
        padding: 0 16px;
    }

    .series-hero-inner {
        padding: 34px 0 30px;
    }

    .series-hero h1 {
        font-size: 30px;
    }

    .series-hero-sub {
        font-size: 15px;
    }

    .series-toolbar {
        flex-wrap: wrap;
    }

    .series-search {
        flex: 1 1 100%;
        order: 1;
    }

    .series-sort {
        order: 2;
        margin-left: auto;
    }

    .series-section-head h2 {
        font-size: 21px;
    }

    .series-card {
        gap: 12px;
        padding: 10px;
        border-radius: 14px;
    }

    .series-thumb {
        width: 104px;
        height: 52px;
    }

    .series-num {
        width: 32px;
        height: 32px;
        font-size: 11px;
    }

    .series-list::before {
        left: 16px;
    }

    .series-body h3 {
        font-size: 14px;
    }

    .series-body p {
        -webkit-line-clamp: 2;
        font-size: 12px;
    }

    .series-pager {
        gap: 10px;
    }

    .series-pager a,
    .series-pager span {
        padding: 12px;
    }

    .series-pager .series-pager-title {
        font-size: 13px;
    }
}

/* ------------------------------------------------- article head (detail) --- */

/* The detail hero is a picture band only — the title and meta sit below it on
   paper, the way the mock reads on a phone. */
.series-detail-hero {
    height: clamp(200px, 34vh, 400px) !important;
}

/* The picture is shown whole (object-fit: contain) over a blurred, dimmed copy
   of itself, so a banner with words on it keeps all of them on every screen. */
.series-hero-whole {
    position: relative;
    overflow: hidden;
}

.series-hero-whole > .series-hero-fill {
    position: absolute;
    inset: -30px;
    height: auto;
    background-size: cover;
    background-position: center;
    filter: blur(24px) brightness(.62);
}

.series-hero-picture {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.series-article-head {
    padding: 26px 0 18px;
    border-bottom: 1px solid var(--series-line);
    margin-bottom: 26px;
}

.series-article-title {
    font-size: 32px;
    line-height: 1.2;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--series-ink) !important;
}

.series-article-sub {
    font-size: 17px;
    line-height: 1.55;
    color: var(--series-muted) !important;
    margin: 0;
}

.series-article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 20px;
    font-size: 13px;
    color: var(--series-muted);
}

.series-article-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* The share control keeps its popup behaviour, restyled for a white page. */
.series-article-meta .share-btn {
    margin-left: auto;
    color: var(--series-plum);
    background: #fff;
    border: 1px solid var(--series-line);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px;
}

.series-article-meta .share-btn:hover {
    background: var(--series-plum);
    border-color: var(--series-plum);
    color: #fff;
}

@media screen and (max-width: 800px) {
    .series-article-title {
        font-size: 25px;
    }

    .series-article-sub {
        font-size: 15px;
    }

    .series-article-meta {
        gap: 14px;
    }
}

/* --------------------------------------------- series strip (blog index) --- */

/* A flat list (the series index) keeps the cards but drops the numbered
   thread, which only means something inside one series. */
.series-list-flat::before {
    display: none;
}

.series-strip {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
}

.series-strip::-webkit-scrollbar {
    display: none;
}

.series-strip-card {
    flex: 0 0 240px;
    background: #fff;
    border: 1px solid var(--series-line);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--series-card-shadow);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.series-strip-card:hover {
    transform: translateY(-2px);
    border-color: #D9C7DE;
    box-shadow: 0 2px 4px rgba(46, 24, 70, .06), 0 14px 32px rgba(46, 24, 70, .1);
}

.series-strip-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: contain;
    display: block;
    background: var(--series-plum-soft);
}

.series-strip-body {
    padding: 12px 14px 14px;
}

.series-strip-body h3 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--series-ink) !important;
}

.series-strip-body span {
    font-size: 12px;
    color: var(--series-muted);
}

/* The rail's label links back to the series it belongs to. */
a.series-progress-label {
    display: inline-block;
    text-decoration: none;
}

a.series-progress-label:hover {
    text-decoration: underline;
}

@media screen and (max-width: 800px) {
    .series-strip-card {
        flex-basis: 200px;
    }

}

/* ------------------------------------------ list + category sidebar --- */

.series-layout {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

.series-main {
    flex: 1 1 auto;
    min-width: 0;
}

.series-side {
    flex: 0 0 264px;
    position: sticky;
    top: 20px;
    background: #fff;
    border: 1px solid var(--series-line);
    border-radius: 16px;
    padding: 18px 16px;
    box-shadow: var(--series-card-shadow);
}

.series-side-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--series-plum);
    margin-bottom: 12px;
}

/* The categories toggle: a button on phones, where the sidebar is a drawer. */
.series-side-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: #fff;
    border: 1px solid var(--series-line);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
    color: var(--series-ink);
    cursor: pointer;
    margin-bottom: 14px;
}

.series-side-toggle i {
    color: var(--series-plum);
}

.series-side-toggle .series-side-current {
    margin-left: auto;
    color: var(--series-muted);
    font-size: 13px;
}

.cat-tree,
.cat-children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cat-children {
    margin-left: 14px;
    padding-left: 10px;
    border-left: 1px solid var(--series-line);
}

.cat-row {
    display: flex;
    align-items: center;
    gap: 2px;
}

.cat-toggle {
    flex: 0 0 auto;
    width: 22px;
    height: 26px;
    border: 0;
    background: none;
    color: #B9A9C2;
    cursor: pointer;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform .15s ease, color .15s ease;
}

.cat-toggle:hover {
    color: var(--series-plum);
}

.cat-toggle.is-open {
    transform: rotate(90deg);
    color: var(--series-plum);
}

.cat-toggle-spacer {
    flex: 0 0 auto;
    width: 22px;
}

.cat-name {
    flex: 1 1 auto;
    text-align: left;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.35;
    color: var(--series-ink);
    padding: 6px 8px;
    border-radius: 8px;
    min-width: 0;
}

.cat-name:hover {
    background: var(--series-plum-soft);
    color: var(--series-plum);
}

.cat-name.is-active {
    background: var(--series-plum);
    color: #fff;
    font-weight: 500;
}

@media screen and (max-width: 900px) {
    .series-layout {
        flex-direction: column;
        gap: 0;
    }

    .series-side-toggle {
        display: flex;
        order: -2;
    }

    .series-side {
        flex: 1 1 auto;
        width: 100%;
        position: static;
        order: -1;
        margin-bottom: 18px;
        display: none;
    }

    .series-side.is-open {
        display: block;
    }
}

/* ------------------------------------------- related, beside an article --- */
/* The right-hand column of a blog. The cards used to inherit the listing
   grid's 320px minimum height and a title box one line tall, so they stood
   half empty with the title cut mid-way ("Grow in Love.|"). */

.related-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.related-card {
    display: block;
    background: #fff;
    border: 1px solid var(--series-line);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--series-card-shadow);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.related-card:hover {
    transform: translateY(-2px);
    border-color: #D9C7DE;
    box-shadow: 0 2px 4px rgba(46, 24, 70, .06), 0 14px 32px rgba(46, 24, 70, .1);
}

.related-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: contain;
    background: var(--series-plum-soft);
}

.related-card-body {
    padding: 12px 14px 14px;
}

.related-card-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--series-plum);
    margin-bottom: 6px;
}

.related-card h3 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--series-ink) !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-card-date {
    font-size: 12px;
    color: var(--series-muted);
}