.pl-story-reader {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --pl-story-bg-canvas: var(--pl-bg-canvas, #fff);
    --pl-story-bg-surface: var(--pl-bg-surface, #f5f5f5);
    --pl-story-text-primary: var(--pl-text-primary, #111);
    --pl-story-text-secondary: var(--pl-text-secondary, #444);
    --pl-story-on-dark-primary: #fff;
    --pl-story-on-dark-secondary: rgba(255, 255, 255, 0.75);
    --pl-story-on-dark-link: #9ecbff;
    --pl-story-ui-fg: var(--pl-story-on-dark-primary);
    --pl-story-ui-bg: color-mix(in srgb, #000 45%, transparent);
    --pl-story-ui-border: color-mix(in srgb, var(--pl-story-on-dark-primary) 28%, transparent);

    background: var(--pl-story-bg-canvas);
    color: var(--pl-story-text-primary);
}

.pl-story-reader.pl-story-layout {
    --pl-story-slide-gap: clamp(0.5rem, 1.8dvh, 1.25rem);
    --pl-story-cover-min-h: clamp(220px, 58dvh, 620px);
    --pl-story-body-font-size: clamp(0.95rem, 0.88rem + 0.16dvh, 1.03rem);
    --pl-story-body-line-height: 1.58;
    --pl-story-caption-font-size: clamp(0.82rem, 0.78rem + 0.12dvh, 0.92rem);
    --pl-story-caption-line-height: 1.45;
    --pl-story-auto-meta-font-size: clamp(0.78rem, 0.73rem + 0.1dvh, 0.88rem);
    --pl-story-auto-meta-line-height: 1;
    --pl-story-auto-category-font-size: clamp(1.9rem, 1.24rem + 2.3dvh, 2.32rem);
    --pl-story-auto-title-font-size: clamp(1.85rem, 1.2rem + 2.25dvh, 2.28rem);
    --pl-story-auto-title-line-height: 1.12;
    --pl-story-h1-font-size: clamp(1.85rem, 1.24rem + 2.6dvh, 2.45rem);
    --pl-story-h2-font-size: clamp(1.55rem, 1.08rem + 2.0dvh, 2.05rem);
    --pl-story-h3-font-size: clamp(1.28rem, 0.96rem + 1.45dvh, 1.7rem);
    --pl-story-h4-font-size: clamp(1.12rem, 0.9rem + 1.05dvh, 1.45rem);
    --pl-story-h5-font-size: clamp(1rem, 0.87rem + 0.7dvh, 1.18rem);
    --pl-story-h6-font-size: clamp(0.95rem, 0.86rem + 0.35dvh, 1.06rem);
    --pl-story-heading-line-height: 1.15;
}

.pl-story-reader.pl-story-theme-dark {
    --pl-story-bg-canvas: var(--pl-bg-canvas, #0f1115);
    --pl-story-bg-surface: var(--pl-bg-surface, #1a1f26);
    --pl-story-text-primary: var(--pl-text-primary, #f5f7fa);
    --pl-story-text-secondary: var(--pl-text-secondary, #c1c8d0);
    --pl-story-ui-fg: var(--pl-story-on-dark-primary);
    --pl-story-ui-bg: color-mix(in srgb, #000 50%, transparent);
    --pl-story-ui-border: color-mix(in srgb, var(--pl-story-on-dark-primary) 28%, transparent);
}

@media (hover: hover) and (pointer: fine) {
    .pl-story-reader.pl-story-layout {
        --pl-story-height-scale: clamp(0.74, calc(1 - ((900px - 100dvh) / 900px) * 0.45), 1);
        --pl-story-slide-gap: calc(clamp(0.5rem, 1.8dvh, 1.25rem) * var(--pl-story-height-scale));
        --pl-story-body-font-size: calc(clamp(0.95rem, 0.88rem + 0.16dvh, 1.03rem) * var(--pl-story-height-scale));
        --pl-story-body-line-height: calc(1.58 - (0.18 * (1 - var(--pl-story-height-scale))));
        --pl-story-caption-font-size: calc(clamp(0.82rem, 0.78rem + 0.12dvh, 0.92rem) * var(--pl-story-height-scale));
        --pl-story-caption-line-height: calc(1.45 - (0.12 * (1 - var(--pl-story-height-scale))));
        --pl-story-auto-meta-font-size: calc(clamp(0.78rem, 0.73rem + 0.1dvh, 0.88rem) * var(--pl-story-height-scale));
        --pl-story-auto-meta-line-height: calc(1 - (0.03 * (1 - var(--pl-story-height-scale))));
        --pl-story-auto-title-font-size-base: clamp(1.62rem, 1.08rem + 1.8dvh, 1.875rem);
        --pl-story-auto-title-font-size: calc(var(--pl-story-auto-title-font-size-base) * var(--pl-story-height-scale));
        --pl-story-auto-category-font-size: var(--pl-story-auto-title-font-size);
        --pl-story-auto-title-line-height: calc(1.12 - (0.06 * (1 - var(--pl-story-height-scale))));
        --pl-story-h1-font-size: calc(clamp(1.85rem, 1.24rem + 2.6dvh, 2.45rem) * var(--pl-story-height-scale));
        --pl-story-h2-font-size: calc(clamp(1.55rem, 1.08rem + 2.0dvh, 2.05rem) * var(--pl-story-height-scale));
        --pl-story-h3-font-size: calc(clamp(1.28rem, 0.96rem + 1.45dvh, 1.7rem) * var(--pl-story-height-scale));
        --pl-story-h4-font-size: calc(clamp(1.12rem, 0.9rem + 1.05dvh, 1.45rem) * var(--pl-story-height-scale));
        --pl-story-h5-font-size: calc(clamp(1rem, 0.87rem + 0.7dvh, 1.18rem) * var(--pl-story-height-scale));
        --pl-story-h6-font-size: calc(clamp(0.95rem, 0.86rem + 0.35dvh, 1.06rem) * var(--pl-story-height-scale));
        --pl-story-heading-line-height: calc(1.15 - (0.08 * (1 - var(--pl-story-height-scale))));
    }

    .pl-story-reader :where(p, li, blockquote, cite, .wp-block-quote__citation) {
        line-height: var(--pl-story-body-line-height) !important;
    }

    .pl-story-reader :where(small, figcaption, .has-small-font-size, .has-medium-font-size) {
        line-height: var(--pl-story-caption-line-height) !important;
    }

    .pl-story-reader :is(h1, h2, h3, h4, h5, h6) {
        line-height: var(--pl-story-heading-line-height) !important;
    }

    .pl-story-background.is-active ~ .pl-story-reader {
        background: transparent;
    }
}

.pl-story-reader .pl-editor-help {
    display: none !important;
}

.pl-story-reader.pl-story-layout .pl-story-slide {
    display: flex;
    flex-direction: column;
    gap: var(--pl-story-slide-gap);
    overflow: hidden;
}

/* Contract: keep intrinsic block heights and distribute only the free space between direct children. */
.pl-story-reader.pl-story-layout .pl-story-slide:has(> :nth-child(2)) {
    justify-content: space-between;
}

.pl-story-reader.pl-story-layout .pl-story-slide :where(.wp-block-group, .wp-block-cover) {
    min-width: 0;
}

/* YouTube RGPD placeholders must keep their intrinsic video ratio inside a
 * slide without affecting the story viewport width. */
.pl-story-reader .pl-rgpd-youtube {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 0 1 auto;
}

.pl-story-reader .pl-rgpd-youtube__placeholder,
.pl-story-reader .pl-rgpd-youtube__frame {
    max-width: 100%;
}

.pl-story-reader .pl-rgpd-youtube__text {
    max-width: min(42rem, 100%);
}

.pl-story-reader.pl-story-layout .pl-story-slide :where(.wp-block-group[style*="60vh"], .wp-block-group[style*="45vh"], .wp-block-group[style*="30vh"], .wp-block-group[style*="20vh"], .wp-block-group[style*="10vh"]) {
    min-height: auto !important;
    height: auto !important;
}

.pl-story-reader.pl-story-layout .pl-story-slide :where(.wp-block-cover) {
    min-height: var(--pl-story-cover-min-h) !important;
    height: auto !important;
    flex: 1 1 var(--pl-story-cover-min-h);
}

.pl-story-reader :where(p, li, blockquote, cite, .wp-block-quote__citation) {
    line-height: var(--pl-story-body-line-height);
}

.pl-story-reader :where(small, figcaption, .has-small-font-size, .has-medium-font-size) {
    line-height: var(--pl-story-caption-line-height);
}

.pl-story-reader h1 {
    line-height: var(--pl-story-heading-line-height);
}

.pl-story-reader h2 {
    line-height: var(--pl-story-heading-line-height);
}

.pl-story-reader h3 {
    line-height: var(--pl-story-heading-line-height);
}

.pl-story-reader h4 {
    line-height: var(--pl-story-heading-line-height);
}

.pl-story-reader h5 {
    line-height: var(--pl-story-heading-line-height);
}

.pl-story-reader h6 {
    line-height: var(--pl-story-heading-line-height);
}

.pl-story-background {
    position: fixed;
    inset: 0;
    z-index: 0;
}

@media (hover: hover) and (pointer: fine) {
    .pl-story-reader {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(
            -50%,
            calc(-50% + (var(--wp-admin-bar-height, 0px)) + (var(--pl-env-banner-height, 0px)))
        );
        height: min(92vh, 1000px);
        height: min(92dvh, 1000px);
        aspect-ratio: 678 / 1200;
        width: auto;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 20px 60px color-mix(in srgb, #000 60%, transparent);
        z-index: 2;
    }

    .pl-story-reader .pl-story-slides,
    .pl-story-reader .pl-story-slide {
        height: 100%;
    }
}

@media (hover: none) and (pointer: coarse) {
    .pl-story-reader {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
        box-shadow: none;
        overflow: hidden;
        overscroll-behavior-x: contain;
        z-index: 1000;
    }

    .pl-story-reader .pl-story-slides,
    .pl-story-reader .pl-story-slide {
        height: 100dvh;
    }
}

@media (hover: hover) and (pointer: fine) and (max-height: 760px) {
    .pl-story-reader {
        height: min(88vh, 920px);
        height: min(88dvh, 920px);
    }
}

@media (max-height: 640px) {
    .pl-story-reader.pl-story-layout .pl-story-slide {
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .pl-story-reader.pl-story-layout .pl-story-slide:has(> :nth-child(2)) {
        justify-content: flex-start;
    }

    .pl-story-reader.pl-story-layout .pl-story-slide :where(.wp-block-group[style*="60vh"], .wp-block-group[style*="45vh"], .wp-block-group[style*="30vh"], .wp-block-group[style*="20vh"], .wp-block-group[style*="10vh"]) {
        padding-top: calc(clamp(0.75rem, 2.2dvh, 1.25rem) * var(--pl-story-height-scale, 1)) !important;
        padding-bottom: calc(clamp(0.75rem, 2.2dvh, 1.25rem) * var(--pl-story-height-scale, 1)) !important;
    }
}

@media (hover: none) and (pointer: coarse) {
    .pl-story-reader .pl-story-slide:not(.pl-story-slide-auto-first) :is(.wp-block-button__link, .wp-element-button, .pl-button, input[type="button"], input[type="submit"], input[type="reset"]) {
        font-size: 15px !important;
        line-height: 1.2 !important;
        min-height: 44px;
        padding: 12px 18px !important;
    }
}

.pl-story-reader :where(p, li, h1, h2, h3, h4, h5, h6, a:not(.wp-block-button__link):not(.wp-element-button)) {
    color: var(--pl-story-text-primary);
}

.pl-story-reader :where(small, figcaption, .has-small-font-size, .has-medium-font-size) {
    color: var(--pl-story-text-secondary);
}

.pl-story-reader h1,
.pl-story-reader a[rel~="tag"] {
    text-shadow:
        -1px -1px 0 color-mix(in srgb, #000 70%, transparent),
         1px -1px 0 color-mix(in srgb, #000 70%, transparent),
        -1px  1px 0 color-mix(in srgb, #000 70%, transparent),
         1px  1px 0 color-mix(in srgb, #000 70%, transparent);
}

.pl-story-reader a[rel~="tag"] {
    text-decoration: none;
    pointer-events: none;
    cursor: default;
}

/* Local contrast repair for dark Gutenberg surfaces while Story theme is light. */
.pl-story-reader.pl-story-theme-light :is(
    .has-black-background-color,
    .has-very-dark-gray-background-color,
    .has-background-dim,
    [class*="has-background-dim-"],
    .has-background[style*="background-image"],
    .has-background[style*="background:"],
    .has-background[style*="background-color:#000"],
    .has-background[style*="background-color: #000"],
    .has-background[style*="background-color:#111"],
    .has-background[style*="background-color: #111"],
    .has-background[style*="background-color:rgb(0"],
    .has-background[style*="background-color: rgb(0"],
    .has-background[style*="background-color:rgb(17"],
    .has-background[style*="background-color: rgb(17"],
    .has-background[style*="background:#000"],
    .has-background[style*="background: #000"],
    .has-background[style*="background:#111"],
    .has-background[style*="background: #111"]
) :where(p, li, h1, h2, h3, h4, h5, h6, a:not(.wp-block-button__link):not(.wp-element-button), cite, figcaption, figure, blockquote) {
    color: var(--pl-story-on-dark-primary);
}

.pl-story-reader.pl-story-theme-light :is(
    .has-black-background-color,
    .has-very-dark-gray-background-color,
    .has-background-dim,
    [class*="has-background-dim-"],
    .has-background[style*="background-image"],
    .has-background[style*="background:"],
    .has-background[style*="background-color:#000"],
    .has-background[style*="background-color: #000"],
    .has-background[style*="background-color:#111"],
    .has-background[style*="background-color: #111"],
    .has-background[style*="background-color:rgb(0"],
    .has-background[style*="background-color: rgb(0"],
    .has-background[style*="background-color:rgb(17"],
    .has-background[style*="background-color: rgb(17"],
    .has-background[style*="background:#000"],
    .has-background[style*="background: #000"],
    .has-background[style*="background:#111"],
    .has-background[style*="background: #111"]
) :where(a:not(.wp-block-button__link):not(.wp-element-button)) {
    color: var(--pl-story-on-dark-link);
}

.pl-story-reader.pl-story-theme-light :is(
    .has-black-background-color,
    .has-very-dark-gray-background-color,
    .has-background-dim,
    [class*="has-background-dim-"],
    .has-background[style*="background-image"],
    .has-background[style*="background:"],
    .has-background[style*="background-color:#000"],
    .has-background[style*="background-color: #000"],
    .has-background[style*="background-color:#111"],
    .has-background[style*="background-color: #111"],
    .has-background[style*="background-color:rgb(0"],
    .has-background[style*="background-color: rgb(0"],
    .has-background[style*="background-color:rgb(17"],
    .has-background[style*="background-color: rgb(17"],
    .has-background[style*="background:#000"],
    .has-background[style*="background: #000"],
    .has-background[style*="background:#111"],
    .has-background[style*="background: #111"]
) :where(cite, figcaption) {
    color: var(--pl-story-on-dark-secondary);
}

/* JS luminance-based classification for colored Gutenberg backgrounds. */
.pl-story-reader.pl-story-theme-light .pl-story-bg-dark :where(
    p,
    li,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    a:not(.wp-block-button__link):not(.wp-element-button),
    cite,
    figcaption,
    figure,
    blockquote
) {
    color: var(--pl-story-on-dark-primary);
}

.pl-story-reader.pl-story-theme-light .pl-story-bg-dark :where(a:not(.wp-block-button__link):not(.wp-element-button)) {
    color: var(--pl-story-on-dark-link);
}

.pl-story-reader.pl-story-theme-light .pl-story-bg-dark :where(cite, figcaption) {
    color: var(--pl-story-on-dark-secondary);
}

.pl-story-reader.pl-story-theme-light .pl-story-bg-light :where(
    p,
    li,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    a:not(.wp-block-button__link):not(.wp-element-button),
    cite,
    figcaption,
    figure,
    blockquote
) {
    color: var(--pl-story-text-primary);
}

.pl-story-reader.pl-story-theme-light .pl-story-bg-light :where(cite, figcaption) {
    color: var(--pl-story-text-secondary);
}