.lubinik-comics-episode {
    --comic-ink: #171217;
    --comic-ink-soft: #382b35;
    --comic-paper: #fff8ee;
    --comic-paper-deep: #f7d9df;
    --comic-surface: #ffffff;
    --comic-pink: #ed4d91;
    --comic-pink-dark: #b82463;
    --comic-orange: #ff8a1f;
    --comic-yellow: #ffc83d;
    --comic-green: #35ae69;
    --comic-turquoise: #19a8b7;
    --comic-muted: #745f69;
    --comic-border: #d8bfc5;
    --comic-shadow: rgb(23 18 23 / 20%);
    --comic-overlay: rgb(255 248 238 / 92%);
    --comic-transparent: transparent;
    --comic-shell: 86rem;
    --comic-reading-width: 58rem;
    --comic-gutter: clamp(1rem, 4vw, 3rem);
    --comic-space-xs: 0.5rem;
    --comic-space-sm: 0.75rem;
    --comic-space-md: 1rem;
    --comic-space-lg: 1.5rem;
    --comic-space-xl: 2rem;
    --comic-space-2xl: 3rem;
    --comic-space-3xl: clamp(4rem, 8vw, 7rem);
    --comic-radius-sm: 0.45rem;
    --comic-radius-md: 0.9rem;
    --comic-radius-lg: 1.4rem;
    --comic-radius-pill: 99rem;
    --comic-border-thin: 0.0625rem;
    --comic-border-medium: 0.125rem;
    --comic-border-bold: 0.2rem;
    --comic-shadow-drawn: 0.45rem 0.45rem 0 var(--comic-ink);
    --comic-font-display: "Arial Black", "Helvetica Neue", sans-serif;
    --comic-font-body: "Trebuchet MS", "Segoe UI", sans-serif;
    --comic-font-mono: "Courier New", monospace;
    --comic-transition: 180ms ease;
    color: var(--comic-ink);
    background: var(--comic-paper);
    font-family: var(--comic-font-body);
}

.lubinik-comics-episode *,
.lubinik-comics-episode *::before,
.lubinik-comics-episode *::after {
    box-sizing: border-box;
}

.comic-reader__shell,
.comic-reader__reading-width {
    width: min(100% - (var(--comic-gutter) * 2), var(--comic-shell));
    margin-inline: auto;
}

.comic-reader__reading-width {
    max-width: var(--comic-reading-width);
}

.comic-reader__hero {
    position: relative;
    overflow: hidden;
    padding-block: var(--comic-space-3xl);
    background:
        repeating-linear-gradient(
            112deg,
            var(--comic-transparent) 0 2.5rem,
            var(--comic-overlay) 2.5rem 2.7rem,
            var(--comic-transparent) 2.7rem 5rem
        ),
        linear-gradient(135deg, var(--comic-pink-dark), var(--comic-pink) 60%, var(--comic-orange));
}

.comic-reader__hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: var(--comic-space-3xl);
    align-items: center;
}

.comic-reader__heading {
    color: var(--comic-paper);
}

.comic-reader__series,
.comic-reader__number,
.comic-reader__eyebrow {
    display: inline-flex;
    width: fit-content;
    padding: var(--comic-space-xs) var(--comic-space-md);
    border: var(--comic-border-medium) solid var(--comic-ink);
    border-radius: var(--comic-radius-pill);
    color: var(--comic-ink);
    background: var(--comic-yellow);
    box-shadow: 0.2rem 0.2rem 0 var(--comic-ink);
    font-family: var(--comic-font-mono);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.comic-reader__number {
    margin-left: var(--comic-space-sm);
    background: var(--comic-paper);
}

.comic-reader__title {
    max-width: 12ch;
    margin: var(--comic-space-xl) 0 var(--comic-space-md);
    color: var(--comic-paper);
    font-family: var(--comic-font-display);
    font-size: clamp(3rem, 8vw, 7rem);
    line-height: 0.92;
    letter-spacing: -0.055em;
    text-transform: uppercase;
    text-shadow: var(--comic-shadow-drawn);
}

.comic-reader__subtitle {
    max-width: 42rem;
    margin: 0 0 var(--comic-space-xl);
    color: var(--comic-paper);
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    line-height: 1.5;
}

.comic-reader__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--comic-space-sm);
    color: var(--comic-paper);
    font-family: var(--comic-font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.comic-reader__meta > * {
    padding-right: var(--comic-space-sm);
    border-right: var(--comic-border-thin) solid var(--comic-paper);
}

.comic-reader__cover {
    justify-self: center;
    width: min(100%, 25rem);
    margin: 0;
    overflow: hidden;
    border: var(--comic-border-bold) solid var(--comic-ink);
    border-radius: var(--comic-radius-md);
    background: var(--comic-paper);
    box-shadow: var(--comic-shadow-drawn);
    transform: rotate(2deg);
}

.comic-reader__cover img {
    display: block;
    width: 100%;
    height: auto;
}

.comic-reader__warning {
    margin-block: var(--comic-space-2xl);
    padding: var(--comic-space-lg);
    border: var(--comic-border-medium) solid var(--comic-ink);
    border-left-width: 0.65rem;
    border-radius: var(--comic-radius-md);
    background: var(--comic-yellow);
    box-shadow: var(--comic-shadow-drawn);
}

.comic-reader__warning strong {
    font-family: var(--comic-font-display);
    text-transform: uppercase;
}

.comic-reader__warning p {
    margin: var(--comic-space-xs) 0 0;
}

.comic-reader__intro {
    padding-block: var(--comic-space-2xl);
    color: var(--comic-ink-soft);
    font-size: 1.15rem;
    line-height: 1.75;
}

.comic-reader__share {
    padding-bottom: var(--comic-space-lg);
}

.comic-reader__share .lubinik-share {
    justify-content: center;
}

.comic-reader__navigation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--comic-space-md);
    align-items: center;
    padding-block: var(--comic-space-xl);
}

.comic-reader__nav-link {
    display: grid;
    gap: var(--comic-space-xs);
    min-width: 0;
    padding: var(--comic-space-md) var(--comic-space-lg);
    border: var(--comic-border-medium) solid var(--comic-ink);
    border-radius: var(--comic-radius-md);
    color: var(--comic-ink);
    background: var(--comic-surface);
    box-shadow: 0.35rem 0.35rem 0 var(--comic-ink);
    text-decoration: none;
    transition: transform var(--comic-transition);
}

.comic-reader__nav-link:hover {
    transform: translateY(-0.2rem);
}

.comic-reader__nav-link span {
    color: var(--comic-pink-dark);
    font-family: var(--comic-font-mono);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.comic-reader__nav-link strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comic-reader__nav-link--next {
    text-align: right;
}

.comic-reader__all-link {
    display: inline-grid;
    gap: 0.18rem;
    justify-items: center;
    padding: var(--comic-space-sm) var(--comic-space-xl);
    border: var(--comic-border-medium) solid var(--comic-ink);
    border-radius: var(--comic-radius-lg);
    color: var(--comic-ink);
    background: var(--comic-yellow);
    box-shadow: 0.35rem 0.35rem 0 var(--comic-ink);
    text-decoration: none;
    text-align: center;
}

.comic-reader__all-link-label {
    font-family: var(--comic-font-mono);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.comic-reader__all-link strong {
    font-size: 0.95rem;
}

.comic-reader__pages {
    background: var(--comic-paper);
}

.comic-reader__reading-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--comic-space-lg);
    align-items: end;
    margin-bottom: var(--comic-space-2xl);
}

.comic-reader__reading-summary {
    display: grid;
    gap: var(--comic-space-sm);
    max-width: 34rem;
}

.comic-reader__reading-summary h2 {
    margin: 0;
    font-family: var(--comic-font-display);
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 0.95;
    text-transform: uppercase;
}

.comic-reader__reading-summary p {
    margin: 0;
    color: var(--comic-ink-soft);
    font-size: 1rem;
}

.comic-reader__reading-progress {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.75rem 1.15rem;
    border: var(--comic-border-medium) solid var(--comic-ink);
    border-radius: var(--comic-radius-pill);
    background: var(--comic-paper);
    box-shadow: 0.3rem 0.3rem 0 var(--comic-ink);
    font-family: var(--comic-font-mono);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.comic-reader__reading-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.75rem 1.35rem;
    border: var(--comic-border-medium) solid var(--comic-ink);
    border-radius: var(--comic-radius-pill);
    background: var(--comic-surface);
    box-shadow: 0.3rem 0.3rem 0 var(--comic-ink);
    color: var(--comic-ink);
    font-weight: 800;
    text-decoration: none;
}

.comic-reader__page-slider {
    width: min(100% - (var(--comic-gutter) * 2), var(--comic-reading-width));
    margin: 0 auto;
}

.comic-reader__page-slide {
    padding-inline: var(--comic-space-lg);
}

.comic-reader__page {
    width: 100%;
    margin: 0 auto;
    padding: var(--comic-space-md);
    overflow: hidden;
    border: var(--comic-border-medium) solid var(--comic-ink);
    border-radius: var(--comic-radius-lg);
    background: var(--comic-surface);
    box-shadow: 0.7rem 0.7rem 0 var(--comic-ink), 0 1.2rem 3rem var(--comic-shadow);
}

.comic-reader__page-label {
    display: inline-flex;
    margin: 0 0 var(--comic-space-sm);
    padding: var(--comic-space-xs) var(--comic-space-md);
    border: var(--comic-border-medium) solid var(--comic-ink);
    border-radius: var(--comic-radius-pill);
    background: var(--comic-paper);
    box-shadow: 0.18rem 0.18rem 0 var(--comic-ink);
    font-family: var(--comic-font-mono);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.comic-reader__page img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 78vh;
    height: auto;
    margin: 0 auto;
    border-radius: var(--comic-radius-md);
}

.comic-reader__page-slider .slick-list {
    overflow: visible;
}

.comic-reader__page-slider .slick-track {
    display: flex;
    align-items: center;
}

.comic-reader__page-slider .slick-slide,
.comic-reader__page-slider .slick-slide > div {
    height: auto;
}

.comic-reader__page-slider .comic-reader__slider-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 7.25rem !important;
    height: 3.4rem !important;
    padding: 0 1rem !important;
    border: var(--comic-border-medium) solid var(--comic-ink) !important;
    border-radius: var(--comic-radius-pill) !important;
    background: var(--comic-yellow) !important;
    box-shadow: 0.25rem 0.25rem 0 var(--comic-ink) !important;
    z-index: 8;
    opacity: 1 !important;
    transition: transform var(--comic-transition), background var(--comic-transition) !important;
}

.comic-reader__page-slider .comic-reader__slider-arrow::before {
    display: none;
}

.comic-reader__page-slider .comic-reader__slider-label {
    color: var(--comic-ink);
    font-family: var(--comic-font-mono);
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.comic-reader__page-slider .comic-reader__slider-arrow:hover,
.comic-reader__page-slider .comic-reader__slider-arrow:focus {
    background: var(--comic-paper) !important;
    transform: translateY(-50%) scale(1.03);
}

.comic-reader__page-slider .slick-prev {
    left: calc(var(--comic-space-3xl) * -1);
}

.comic-reader__page-slider .slick-next {
    right: calc(var(--comic-space-3xl) * -1);
}

.comic-reader__page-slider .slick-prev,
.comic-reader__page-slider .slick-next {
    top: 50% !important;
    transform: translateY(-50%);
}

.comic-reader__page-slider .slick-prev:hover,
.comic-reader__page-slider .slick-prev:focus,
.comic-reader__page-slider .slick-next:hover,
.comic-reader__page-slider .slick-next:focus {
    transform: translateY(-50%) scale(1.05);
}

.comic-reader__page-slider .slick-dots {
    bottom: calc(var(--comic-space-xl) * -1);
}

.comic-reader__page-slider .slick-dots li {
    margin: 0 0.2rem;
}

.comic-reader__page-slider .slick-dots li button:before {
    color: var(--comic-ink);
    opacity: 0.3;
    font-size: 0.7rem;
}

.comic-reader__page-slider .slick-dots li.slick-active button:before {
    color: var(--comic-pink-dark);
    opacity: 1;
}

.comic-reader__empty {
    padding: var(--comic-space-2xl);
    border: var(--comic-border-medium) dashed var(--comic-pink-dark);
    border-radius: var(--comic-radius-lg);
    text-align: center;
    background: var(--comic-paper);
}

.comic-reader__navigation--bottom {
    padding-block: var(--comic-space-2xl);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.comic-reader__extras {
    padding-block: var(--comic-space-3xl);
    background: var(--comic-paper);
}

.comic-reader__extras-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--comic-space-xl);
}

.comic-reader__note,
.comic-reader__credits {
    padding: var(--comic-space-xl);
    border: var(--comic-border-medium) solid var(--comic-ink);
    border-radius: var(--comic-radius-lg);
    background: var(--comic-surface);
    box-shadow: var(--comic-shadow-drawn);
}

.comic-reader__note {
    transform: rotate(-1deg);
}

.comic-reader__credits {
    background: var(--comic-paper-deep);
    transform: rotate(1deg);
}

.comic-reader__note h2,
.comic-reader__credits h2 {
    margin: var(--comic-space-lg) 0;
    font-family: var(--comic-font-display);
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1;
    text-transform: uppercase;
}

.comic-reader__credits dl {
    margin: 0;
}

.comic-reader__credits dl div {
    display: flex;
    justify-content: space-between;
    gap: var(--comic-space-lg);
    padding-block: var(--comic-space-sm);
    border-bottom: var(--comic-border-thin) solid var(--comic-border);
}

.comic-reader__credits dt {
    color: var(--comic-muted);
}

.comic-reader__credits dd {
    margin: 0;
    font-weight: 800;
    text-align: right;
}

.comic-reader__transcript {
    margin-top: var(--comic-space-2xl);
    border: var(--comic-border-medium) solid var(--comic-ink);
    border-radius: var(--comic-radius-md);
    background: var(--comic-surface);
}

.comic-reader__transcript summary {
    padding: var(--comic-space-lg);
    color: var(--comic-paper);
    background: var(--comic-green);
    font-weight: 800;
    cursor: pointer;
}

.comic-reader__transcript div {
    padding: var(--comic-space-xl);
    line-height: 1.75;
}

.comic-reader__managed {
    padding-block: var(--comic-space-3xl);
    border-top: var(--comic-border-bold) solid var(--comic-ink);
    background: var(--comic-paper-deep);
}

.comic-reader__managed > section,
.comic-reader__managed > div {
    width: min(100% - (var(--comic-gutter) * 2), var(--comic-shell));
    margin-inline: auto;
}

@media (max-width: 48rem) {
    .lubinik-comics-episode,
    .comic-reader,
    .comic-reader__pages,
    .comic-reader__page-slider {
        overflow-x: hidden;
    }

    .comic-reader__hero {
        padding-top: var(--comic-space-2xl);
    }

    .comic-reader__title {
        font-size: clamp(2.7rem, 12vw, 5rem);
    }

    .comic-reader__cover {
        width: min(88%, 22rem);
    }

    .comic-reader__navigation {
        grid-template-columns: 1fr;
    }

    .comic-reader__navigation > span {
        display: none;
    }

    .comic-reader__all-link {
        grid-row: 1;
        justify-self: center;
    }

    .comic-reader__nav-link--next {
        text-align: left;
    }

    .comic-reader__navigation--bottom {
        grid-template-columns: 1fr;
    }

    .comic-reader__reading-bar {
        align-items: start;
    }

    .comic-reader__reading-progress {
        order: 3;
    }

    .comic-reader__page {
        padding: var(--comic-space-sm);
    }

    .comic-reader__page-slide {
        padding-inline: 0;
    }

    .comic-reader__page img {
        max-height: none;
    }

    .comic-reader__page-slider {
        padding-bottom: 5rem;
    }

    .comic-reader__page-slider .slick-list {
        overflow: hidden;
    }

    .comic-reader__page-slider .slick-track {
        align-items: flex-start;
    }

    .comic-reader__page-slider .slick-prev {
        left: 0.5rem;
    }

    .comic-reader__page-slider .slick-next {
        right: 0.5rem;
    }

    .comic-reader__page-slider .comic-reader__slider-arrow {
        min-width: 5.6rem !important;
        height: 3rem !important;
        padding: 0 0.7rem !important;
    }

    .comic-reader__page-slider .slick-prev,
    .comic-reader__page-slider .slick-next {
        top: auto !important;
        bottom: 1.6rem;
        transform: none;
    }

    .comic-reader__page-slider .slick-prev:hover,
    .comic-reader__page-slider .slick-prev:focus,
    .comic-reader__page-slider .slick-next:hover,
    .comic-reader__page-slider .slick-next:focus {
        transform: scale(1.05);
    }

    .comic-reader__page-slider .slick-dots {
        bottom: 0.25rem;
    }

    .comic-reader__page-slider .comic-reader__slider-label {
        font-size: 0.78rem;
    }
}