.overlay-panel {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
}

.overlay-panel[hidden] { display: none; }

.overlay-panel__scrim {
    position: absolute;
    inset: 0;
    background: rgba(20, 18, 16, 0.5);
    opacity: 0;
    transition: opacity var(--dur-med, 240ms) var(--ease-out);
    cursor: pointer;
}

.overlay-panel__sheet {
    position: relative;
    margin-inline-start: auto;
    width: min(560px, 100%);
    max-height: 100dvh;
    overflow-y: auto;
    background: var(--color-bg, #FAF7F2);
    color: var(--color-text, #2A2622);
    padding: clamp(var(--space-6), 6vw, var(--space-8));
    padding-block-start: clamp(var(--space-7), 8vw, var(--space-8));
    box-shadow: -12px 0 48px rgba(20, 18, 16, 0.18);
    transform: translateX(var(--overlay-offset, 100%));
    transition: transform var(--dur-med, 240ms) var(--ease-out);
    will-change: transform;
}

/* Sheet enters from the side the reader's eye leaves from. */
[dir="rtl"] .overlay-panel__sheet { --overlay-offset: -100%; }
[dir="ltr"] .overlay-panel__sheet { --overlay-offset: 100%; }

.overlay-panel--start .overlay-panel__sheet {
    margin-inline-start: 0;
    margin-inline-end: auto;
    box-shadow: 12px 0 48px rgba(20, 18, 16, 0.18);
}

[dir="rtl"] .overlay-panel--start .overlay-panel__sheet { --overlay-offset: 100%; }
[dir="ltr"] .overlay-panel--start .overlay-panel__sheet { --overlay-offset: -100%; }

.overlay-panel--full .overlay-panel__sheet {
    width: 100%;
    margin-inline: 0;
    --overlay-offset: 0;
    opacity: 0;
    transform: translateY(3vh);
    transition: transform var(--dur-med, 240ms) var(--ease-out),
                opacity var(--dur-med, 240ms) var(--ease-out);
}

/* Floating window centred over the page, half see-through. */
.overlay-panel--float {
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.overlay-panel--float .overlay-panel__scrim { background: rgba(20, 18, 16, 0.28); }

.overlay-panel--float .overlay-panel__sheet {
    margin: 0;
    width: min(480px, 100%);
    max-height: calc(100dvh - 2 * var(--space-4));
    background: rgba(250, 247, 242, 0.82);
    backdrop-filter: blur(16px) saturate(1.1);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    box-shadow: 0 24px 64px rgba(20, 18, 16, 0.22);
    --overlay-offset: 0;
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    transition: transform var(--dur-med, 240ms) var(--ease-out),
                opacity var(--dur-med, 240ms) var(--ease-out);
}

.overlay-panel--float.is-open .overlay-panel__sheet {
    opacity: 1;
    transform: none;
}

.overlay-panel.is-open .overlay-panel__scrim { opacity: 1; }

.overlay-panel.is-open .overlay-panel__sheet {
    transform: translateX(0);
}

.overlay-panel--full.is-open .overlay-panel__sheet {
    transform: translateY(0);
    opacity: 1;
}

.overlay-panel__close {
    position: absolute;
    inset-block-start: var(--space-4);
    inset-inline-end: var(--space-4);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: currentColor;
    cursor: pointer;
    border-radius: 50%;
    transition: background var(--dur-fast) var(--ease-out);
}

.overlay-panel__close:hover { background: rgba(20, 18, 16, 0.07); }

.overlay-panel__head { margin-block-end: var(--space-6); }

.overlay-panel__title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.1;
    margin: 0;
}

.overlay-panel__lede {
    margin: var(--space-3) 0 0;
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.7;
    max-width: 46ch;
}

.overlay-panel__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (prefers-reduced-motion: reduce) {
    .overlay-panel__scrim,
    .overlay-panel__sheet { transition: none; }
}