/* --------------------------------------------------
   Wide Open Windows — Shared Rhizome panel
-------------------------------------------------- */

.rhizome-panel {
    position: fixed;
    z-index: 3000;

    top: 64px;
    right: 0;
    bottom: 0;

    width: min(380px, 88vw);
    height: auto;

    padding: 22px 32px 36px;

    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;

    background: rgba(10, 12, 15, 0.7);
    color: #f2f0ec;

    border-left: 1px solid rgba(255, 255, 255, 0.12);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    transform: translateX(100%);

    transition:
        transform 260ms ease,
        box-shadow 260ms ease,
        background-color 320ms ease,
        color 320ms ease,
        border-color 320ms ease;
}

.rhizome-panel.open,
.rhizome-panel.is-open {
    transform: translateX(0);
}

/* --------------------------------------------------
   Rhizome-inhoud
-------------------------------------------------- */

.rhizome-panel__eyebrow,
.rhizome-panel__group h3 {
    margin: 0 0 10px;

    color: rgba(255, 255, 255, 0.5);

    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.rhizome-panel h2 {
    margin: 0;

    color: #f2f0ec;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(1.2rem, 1.3rem, 2rem);
    font-weight: 400;
    line-height: 1.1;
}

.rhizome-panel__description {
    margin: 22px 0 32px;

    color: rgba(255, 255, 255, 0.7);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.04rem;
    line-height: 1.6;
}

.rhizome-panel__group {
    margin-top: 28px;
}

.rhizome-panel__group ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


.rhizome-panel__list.is-collapsed li:nth-child(n + 9) {
    display: none;
}

.rhizome-panel__toggle {
    display: inline-block;

    margin-top: 10px;
    padding: 0;
    padding-bottom:20px;

    border: 0;
    background: none;

    color: rgba(255, 255, 255, 0.58);
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: left;

    cursor: pointer;

    transition:
        color 180ms ease,
        opacity 180ms ease;
}

.rhizome-panel__toggle:hover,
.rhizome-panel__toggle:focus-visible {
    color: #fff;
    outline: none;
}

.rhizome-panel__toggle:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.rhizome-panel__group li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.rhizome-panel__group a,
.rhizome-panel__group span {
    display: block;

    padding: 1px 0;

    color: #f2f0ec !important;
    text-decoration: none;
}

.rhizome-panel__group span {
    opacity: 0.48;
}

.rhizome-panel__group li.is-current {
    position: relative;
}

.rhizome-panel__group li.is-current::before {
    position: absolute;
    top: 50%;
    left: -15px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: currentColor;

    content: "";
    opacity: 0.7;
    transform: translateY(-50%);
}

.rhizome-panel__group .rhizome-panel__current {
    opacity: 1;
    font-weight: 600;
}

.rhizome-panel__group a:hover,
.rhizome-panel__group a:focus-visible {
    color: #fff !important;
    outline: none;
}

.rhizome-panel__error {
    margin: 0;

    color: rgba(255, 255, 255, 0.7);
}

/* --------------------------------------------------
   Paper mode
-------------------------------------------------- */

html.reading-paper .rhizome-panel {
    background: rgba(232, 225, 213, 0.98);
    color: #24211d;

    border-left-color: rgba(36, 33, 29, 0.18);

    box-shadow: -18px 0 46px rgba(36, 33, 29, 0.14);
}

html.reading-paper .rhizome-panel__eyebrow,
html.reading-paper .rhizome-panel__group h3 {
    color: rgba(36, 33, 29, 0.56);
}

html.reading-paper .rhizome-panel h2 {
    color: #24211d;
}

html.reading-paper .rhizome-panel__description,
html.reading-paper .rhizome-panel__error {
    color: rgba(36, 33, 29, 0.72);
}

html.reading-paper .rhizome-panel__group li + li {
    border-top-color: rgba(36, 33, 29, 0.11);
}

html.reading-paper .rhizome-panel__group a,
html.reading-paper .rhizome-panel__group span {
    color: #373129 !important;
}

html.reading-paper .rhizome-panel__group span {
    opacity: 0.52;
}

html.reading-paper .rhizome-panel__group .rhizome-panel__current {
    opacity: 1;
}

html.reading-paper .rhizome-panel__group a:hover,
html.reading-paper .rhizome-panel__group a:focus-visible {
    color: #000 !important;
}


html.reading-paper .rhizome-panel__toggle {
    color: rgba(36, 33, 29, 0.62);
}

html.reading-paper .rhizome-panel__toggle:hover,
html.reading-paper .rhizome-panel__toggle:focus-visible {
    color: #000;
}

/* --------------------------------------------------
   Backdrop
-------------------------------------------------- */

.rhizome-backdrop {
    position: fixed;
    z-index: 2900;

    top: 64px;
    right: 0;
    bottom: 0;
    left: 0;

    background: rgba(0, 0, 0, 0.48);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 260ms ease,
        visibility 260ms ease,
        background-color 320ms ease;
}

.rhizome-backdrop.visible,
.rhizome-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

html.reading-paper .rhizome-backdrop {
    background: rgba(68, 61, 52, 0.24);
}

/* --------------------------------------------------
   Footer en back-to-top boven het paneel
-------------------------------------------------- */

footer,
.footer {
    position: relative;
    z-index: 3100;
}

.back-to-top {
    z-index: 3100;
}

/*
 * De pagina blijft altijd scrollbaar.
 * Geen overflow:hidden wanneer het paneel geopend is.
 */
body.rhizome-open,
body.rhizome-panel-open {
    overflow-x: hidden;
    overflow-y: auto;
}

/* --------------------------------------------------
   Mobiel
-------------------------------------------------- */

@media (max-width: 700px) {
    .rhizome-panel {
        top: 56px;

        width: min(340px, 86vw);

        padding: 20px 24px 32px;
    }

    .rhizome-backdrop {
        top: 56px;
    }

    .rhizome-panel__group a,
    .rhizome-panel__group span {
        min-height: 44px;
        padding: 10px 0;

        display: flex;
        align-items: center;
    }
}

/* --------------------------------------------------
   Beweging beperken
-------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .rhizome-panel,
    .rhizome-backdrop {
        transition: none;
    }
}
/* BWP 8C.12.4 — responsive masonry gallery */
.bwp-gallery{position:relative;margin:1.75rem 0;min-height:2rem}
.bwp-gallery__item{position:absolute;top:0;left:0;margin:0;overflow:hidden;border-radius:8px;box-sizing:border-box}
.bwp-gallery__item img{display:block;width:100%;height:auto;margin:0}
.bwp-gallery__caption{box-sizing:border-box;padding:.45rem .65rem;font-size:.9rem;line-height:1.3}
@media (hover:hover){.bwp-gallery__caption{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.82);color:#fff;opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease}.bwp-gallery__item:hover .bwp-gallery__caption{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bwp-gallery__caption{transition:none}}

/* BWP 8C.12.5 — gallery polish + accessible lightbox */
.bwp-gallery{margin:2rem .35rem}
.bwp-gallery__item{cursor:zoom-in}
.bwp-gallery__item:focus-visible{outline:3px solid currentColor;outline-offset:3px}
html.bwp-lightbox-open,html.bwp-lightbox-open body{overflow:hidden}
.bwp-lightbox[hidden]{display:none!important}
.bwp-lightbox{position:fixed;inset:0;z-index:100000;color:#fff}
.bwp-lightbox__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.92);backdrop-filter:blur(2px)}
.bwp-lightbox__stage{position:absolute;inset:0;display:grid;grid-template-columns:minmax(3.25rem,8vw) minmax(0,1fr) minmax(3.25rem,8vw);grid-template-rows:1fr;align-items:center;padding:max(1rem,env(safe-area-inset-top)) max(.5rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(.5rem,env(safe-area-inset-left));box-sizing:border-box}
.bwp-lightbox__figure{grid-column:2;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;max-height:100%}
.bwp-lightbox__image{display:block;max-width:min(100%,1400px);max-height:82vh;width:auto;height:auto;object-fit:contain;box-shadow:0 8px 40px rgba(0,0,0,.45)}
.bwp-lightbox__caption{max-width:min(92vw,1400px);margin:.75rem auto 0;padding:.45rem .7rem;background:rgba(0,0,0,.72);border-radius:.3rem;text-align:center;font-size:.95rem;line-height:1.35;color:#fff}
.bwp-lightbox__close,.bwp-lightbox__prev,.bwp-lightbox__next{position:relative;z-index:2;border:0;border-radius:999px;background:rgba(0,0,0,.38);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;font:400 2.4rem/1 system-ui,sans-serif}
.bwp-lightbox__close{position:absolute;right:max(1rem,env(safe-area-inset-right));top:max(1rem,env(safe-area-inset-top));font-size:2rem}
.bwp-lightbox__prev{grid-column:1;justify-self:center}
.bwp-lightbox__next{grid-column:3;justify-self:center}
.bwp-lightbox__close:hover,.bwp-lightbox__prev:hover,.bwp-lightbox__next:hover,.bwp-lightbox__close:focus-visible,.bwp-lightbox__prev:focus-visible,.bwp-lightbox__next:focus-visible{background:#fff;color:#000;outline:none}
@media(max-width:640px){.bwp-gallery{margin:1.5rem 0}.bwp-lightbox__stage{grid-template-columns:3rem minmax(0,1fr) 3rem}.bwp-lightbox__image{max-height:78vh}.bwp-lightbox__close,.bwp-lightbox__prev,.bwp-lightbox__next{width:3rem;height:3rem;font-size:2rem}.bwp-lightbox__caption{font-size:.88rem}}
@media(prefers-reduced-motion:reduce){.bwp-lightbox *{scroll-behavior:auto!important;transition:none!important}}


/* --------------------------------------------------
   Reader Aids: Rhizome navigation
-------------------------------------------------- */

/*
 * Navigation is reading content too. The same persisted text scale used by
 * .page-content therefore also scales the Rhizome labels and links.
 * Controls themselves deliberately keep their fixed UI size.
 */
.rhizome-panel__eyebrow,
.rhizome-panel__group-title,
.rhizome-panel__group h3,
.rhizome-panel__group a,
.rhizome-panel__group span,
.rhizome-group h3,
.rhizome-group a,
.rhizome-group span {
    font-size: calc(1em * var(--wow-reading-scale, 1));
}

.rhizome-panel__group a,
.rhizome-panel__group span,
.rhizome-group a,
.rhizome-group span {
    line-height: var(--wow-reading-line-height, 1.55);
    overflow-wrap: anywhere;
}

.rhizome-panel__eyebrow,
.rhizome-panel__group-title,
.rhizome-panel__group h3,
.rhizome-group h3 {
    line-height: max(1.35, var(--wow-reading-line-height, 1.55));
}

/* The current-window title participates too, but from its own base size. */
.rhizome-panel__title,
.rhizome-panel h2 {
    font-size: calc(1.75rem * var(--wow-reading-scale, 1));
    line-height: 1.12;
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    .rhizome-panel__group a,
    .rhizome-panel__group span,
    .rhizome-group a,
    .rhizome-group span {
        min-height: calc(44px * var(--wow-reading-scale, 1));
        height: auto;
    }
}


/* --------------------------------------------------
   8C.14.2m — Reader Aids menu scale refinement
-------------------------------------------------- */

/* Start deliberately smaller than body text; Reader Aids then scale from here. */
.rhizome-panel__eyebrow,
.rhizome-panel__group h3 {
    font-size: calc(.72rem * var(--wow-reading-scale, 1));
}

.rhizome-panel__group a,
.rhizome-panel__group span {
    font-size: calc(.92rem * var(--wow-reading-scale, 1));
    line-height: var(--wow-reading-line-height, 1.55);
}

.rhizome-panel__title,
.rhizome-panel h2 {
    font-size: calc(1.3rem * var(--wow-reading-scale, 1));
}

.rhizome-panel__toggle {
    font-size: calc(.82rem * var(--wow-reading-scale, 1));
}