/* --------------------------------------------------
   Wide Open Windows — Generic content pages
-------------------------------------------------- */

/* animations */

.animate__animated {
    animation-duration: 3s;
    animation-fill-mode: both;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.animate__fadeIn {
    animation-name: fadeIn;
}

/* --------------------------------------------------
   Basis
-------------------------------------------------- */
.inline {float: left;margin-right:20px}


html {
    scroll-behavior: smooth;

    --wow-reading-scale: 1;
    --wow-reading-line-height: 1.55;
}

body[data-page-type="page"] {
    position: relative;
    isolation: isolate;

    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255, 255, 255, 0.04),
            transparent 34rem
        ),
        var(--wow-bg);

    color: var(--wow-text);

    transition:
        background-color 320ms ease,
        color 320ms ease;
}

/*
 * RP 10.11g: page backgrounds have exactly one owner.
 * The migrated WOW per-page background remains on .page-main.
 * A second full-viewport body::before copy caused the same image
 * to be painted twice after the canonical/static migration path.
 */

/* --------------------------------------------------
   Links
-------------------------------------------------- */

a {
    color: #ccc !important;
    text-decoration: underline;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease !important;
}

a:hover,
a:active {
    color: #fff !important;
}


a[target="_blank"] {
    position: relative;
    padding-right: 24px;

    background-image: url("../images/link.png");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 13px 13px;
}

/* --------------------------------------------------
   Paginastructuur
-------------------------------------------------- */

.site-shell {
    position: relative;

    /*
     * Geen z-index.
     *
     * Hierdoor zitten vaste elementen binnen .site-shell,
     * zoals .back-to-top, niet opgesloten in een lage
     * stacking context onder het Rhizome-panel.
     */

    min-height: 100vh;

    display: flex;
    flex-direction: column;
}

.page-main {
    flex: 1;
    min-width: 0;

    background-size: cover !important;
    background-position: right !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

.page {
    width: min(
        calc(100% - (2 * var(--wow-gutter))),
        var(--wow-page-width)
    );

    margin: 0 auto;
    padding: clamp(92px, 13vh, 150px) 0 100px;
}

/* --------------------------------------------------
   Paginakop
-------------------------------------------------- */

.page-header {
    margin-bottom: clamp(24px, 3vw, 86px);
}

.page-title {
    margin: 50px 0 0;

    color: var(--wow-text);

    font-family: var(--wow-font-serif);
    font-size: clamp(3rem, 3vw, 7rem);
    font-weight: 400;
    line-height: 0.96;
    letter-spacing: 0.015em;
}

/* --------------------------------------------------
   Pagina-inhoud
-------------------------------------------------- */

.page-content {
    max-width: var(--wow-reading-width);

    color: var(--wow-text);

    font-size: calc(1.1rem * var(--wow-reading-scale));
    line-height: var(--wow-reading-line-height);

    transition:
        font-size 180ms ease,
        line-height 180ms ease;
}

.page-content > :first-child {
    margin-top: 0;
}

.page-content > :last-child {
    margin-bottom: 0;
}

.page-content h2,
.page-content h3,
.page-content h4 {
    color: var(--wow-text);
    line-height: 1.2;
}

.page-content h2 {
    margin: 20px 0 10px;

    font-size: clamp(1.45rem, 1.2vw, 2rem);
}

.page-content h3 {
    margin-bottom: 5px;
}

.page-content .source {
    color: #ccc;
    font-size: 0.8rem;
}

.page-content p,
.page-content ul,
.page-content ol,
.page-content blockquote {
    margin: 0 0 1rem;
}

p.eyebrow {
    margin-bottom: -10px;
}

.page-content a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.page-content blockquote {
    padding-left: 40px !important;
    border-left: 1px solid #ccc;
    font-style: italic;
}

.page-content .quote {
    font-size: 1rem;
}

.page-content .author {
    font-weight: normal;
    font-style:normal;
}

.page-content hr {
    height: 1px;
    margin: 30px;

    border: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.28) 20%,
            rgba(255, 255, 255, 0.18) 75%,
            transparent
        );
}

.page-content .inline {
    max-width:440px;
    border-radius: 10px;
    margin-bottom:10px;
    margin-top:8px;
    -webkit-mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            black 80%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            black 80%,
            transparent 100%
        );

         opacity: .95;
        filter:
        grayscale(85%)
        sepia(10%)
        contrast(0.92);
}
    @media (max-width: 700px) {
        .inline {max-width:300px;}
      }

p.reading-time{ 
    font-size:0.9em;
    color: #999;
    margin-top:40px;
    margin-bottom: -25px!important;
 }


/* --------------------------------------------------
   Tables
-------------------------------------------------- */

.page-content table {
    width: 100%;
    margin: 1.25rem 0 1.75rem;

    border-collapse: collapse;
    border-spacing: 0;

    color: var(--wow-text);

    font-size: 0.95em;
    line-height: 1.45;
}

.page-content th,
.page-content td {
    padding: 0.65rem 0.8rem;

    border-bottom: 1px solid rgba(255, 255, 255, 0.16);

    text-align: left;
    vertical-align: top;
}

.page-content th {
    border-bottom-color: rgba(255, 255, 255, 0.34);

    font-weight: 700;
}

.page-content tbody tr:last-child td {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/*
 * Tables generated from Markdown can become wider than the reading column.
 * On small screens the table itself scrolls instead of widening the page.
 */
.page-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
}

.page-content thead,
.page-content tbody {
    display: table;
    width: 100%;
    table-layout: auto;
}

/* Paper Mode */

html.reading-paper .page-content table {
    color: #24211d;
}

html.reading-paper .page-content th,
html.reading-paper .page-content td {
    border-bottom-color: rgba(36, 33, 29, 0.16);
}

html.reading-paper .page-content th {
    border-bottom-color: rgba(36, 33, 29, 0.34);
}

html.reading-paper .page-content tbody tr:last-child td {
    border-bottom-color: rgba(36, 33, 29, 0.08);
}

@media (max-width: 700px) {
    .page-content th,
    .page-content td {
        min-width: 8rem;
        padding: 0.55rem 0.65rem;
    }
}

/* --------------------------------------------------
   Achtergrond in Paper Mode
-------------------------------------------------- */

html.reading-paper .page-main {
    background-image: none !important;
}

/* --------------------------------------------------
   Footer
-------------------------------------------------- */

footer {
    /*position: relative;*/
        position: fixed!important;
        bottom:0;
        left:0;
        width:100%;
        margin-top:200px;
    z-index: 3100;

    padding: 10px;

    background: #111;
}

footer a {
    text-decoration: none;
}

/* --------------------------------------------------
   Paper Mode
-------------------------------------------------- */

html.reading-paper {
    color-scheme: light;
}

html.reading-paper body[data-page-type="page"] {
    background: #f2ede3;
    color: #24211d;
}

html.reading-paper .page-title,
html.reading-paper .page-content,
html.reading-paper .page-content h2,
html.reading-paper .page-content h3,
html.reading-paper .page-content h4 {
    color: #24211d;
}

html.reading-paper .page-content .source {
    color: #716a60;
}

html.reading-paper a,
html.reading-paper .page-content a {
    color: #4c453d !important;
}

html.reading-paper a:hover,
html.reading-paper .page-content a:hover {
    color: #000 !important;
}

html.reading-paper .page-content hr {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(36, 33, 29, 0.24) 20%,
            rgba(36, 33, 29, 0.14) 75%,
            transparent
        );
}

html.reading-paper footer {
    background: #e3ddd2;
    color: #24211d;
}

/*
 * Decoratieve achtergronden verdwijnen in Paper Mode.
 */
html.reading-paper [class*="window-"],
html.reading-paper [data-paper-background="hide"],
html.reading-paper [style*="background-image"] {
    background-image: none !important;
}

/*
 * Een normale afbeelding kan met data-paper-image="invert"
 * als verzacht negatief in Paper Mode worden getoond.
 */
html.reading-paper [data-paper-image="invert"] {
    filter:
        invert(1)
        hue-rotate(180deg)
        brightness(1.04)
        contrast(0.88)
        saturate(0.75);
}

time {display:block!important;flex-basis: 100%;margin-left:5px;font-weight:700}

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

@media (max-width: 700px) {
    .page {
        padding-top: 84px;
        padding-bottom: 72px;
    }

    .page-title {
        margin-top: 0;

        font-size: clamp(2.7rem, 15vw, 4.8rem);
    }

    footer {
        text-align: center;
    }
}

/* --------------------------------------------------
   Back to top
-------------------------------------------------- */

.back-to-top {
    position: fixed;
    z-index: 3100;

    right: 24px;
    bottom: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;

    background: #222;
    color: #fff !important;

    font-size: 1.15rem;
    line-height: 1;

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

    transform: translateY(10px);

    transition:
        opacity 180ms ease,
        visibility 180ms ease,
        transform 180ms ease,
        border-color 180ms ease;
}

.back-to-top.visible {
    opacity: 0.85;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
    opacity: 1;

    border-color: rgba(255, 255, 255, 0.55);
}

.back-to-top:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

@media (max-width: 700px) {
    .back-to-top {
        right: 14px;
        bottom: 14px;

        width: 38px;
        height: 38px;
    }
}

/* --------------------------------------------------
   Rhizome-links in de paginatekst
-------------------------------------------------- */

.page-content a.rhizome-link {
    color: inherit !important;

    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    text-decoration-color: rgba(255, 255, 255, 0.68);

    transition:
        color 180ms ease,
        text-decoration-color 180ms ease;
}

.page-content a.rhizome-link:hover,
.page-content a.rhizome-link:focus-visible {
    color: #fff !important;

    text-decoration-style: solid;
    text-decoration-color: #fff;

    outline: none;
}

html.reading-paper .page-content a.rhizome-link {
    color: inherit !important;

    text-decoration-color: rgba(0, 0, 0, 0.58);
}

html.reading-paper .page-content a.rhizome-link:hover,
html.reading-paper .page-content a.rhizome-link:focus-visible {
    color: #000 !important;

    text-decoration-color: #000;
}

/* --------------------------------------------------
   Minder beweging
-------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body[data-page-type="page"] {
        transition: none;
    }

    .back-to-top {
        transition: none;
    }
}

/* BWP 8C.12.2 — native form baseline */
.bwp-form-block{margin:2rem 0}
.bwp-form-block form{display:grid;gap:1rem;max-width:46rem}
.bwp-form-block fieldset{border:1px solid currentColor;padding:1rem}
.bwp-form-block legend{padding:0 .35rem;font-weight:600}
.bwp-form-block label{display:block;font-weight:600;margin-bottom:.35rem}
.bwp-form-block input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.bwp-form-block textarea,
.bwp-form-block select{box-sizing:border-box;width:100%;max-width:100%;font:inherit;color:inherit;background:transparent;border:1px solid currentColor;border-radius:.2rem;padding:.65rem .75rem}
.bwp-form-block textarea{min-height:8rem;resize:vertical}
.bwp-form-block input[type="checkbox"],.bwp-form-block input[type="radio"]{margin-right:.45rem}
.bwp-form-block button,.bwp-form-block input[type="submit"],.bwp-form-block input[type="reset"]{font:inherit;cursor:pointer;border:1px solid currentColor;background:transparent;color:inherit;padding:.65rem 1rem;border-radius:.2rem;width:auto}
.bwp-form-block button:hover,.bwp-form-block input[type="submit"]:hover,.bwp-form-block input[type="reset"]:hover{background:rgba(127,127,127,.15)}
.bwp-form-block :focus-visible{outline:2px solid currentColor;outline-offset:2px}
.bwp-form-block small{display:block;opacity:.75}

/* BWP 8C.12.2c — mobile form containment */
.bwp-form-block,
.bwp-form-block form,
.bwp-form-block fieldset,
.bwp-form-block p{min-width:0;max-width:100%}
.bwp-form-block input,
.bwp-form-block textarea,
.bwp-form-block select,
.bwp-form-block button{max-width:100%}
@media (max-width:700px){
  .bwp-form-block{margin:1.5rem 0}
  .bwp-form-block form{width:100%;max-width:100%;gap:.85rem}
  .bwp-form-block fieldset{box-sizing:border-box;width:100%;padding:.8rem}
  .bwp-form-block input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .bwp-form-block textarea,
  .bwp-form-block select{width:100%;max-width:100%;font-size:16px}
  .bwp-form-block button,
  .bwp-form-block input[type="submit"],
  .bwp-form-block input[type="reset"]{width:100%;max-width:100%;text-align:center}
}

/* BWP 8C.12.2b — validation & messages */
.bwp-form-block .bwp-field-message{display:block;margin:.35rem 0 0;font-size:.9em;line-height:1.35}
.bwp-form-block .bwp-field-message[hidden]{display:none}
.bwp-form-block .has-error{outline:2px solid currentColor;outline-offset:2px}
.bwp-form-block [aria-invalid="true"]{border-width:2px!important}

/* BWP 8C.12.2c — submission, status and honeypot */
.bwp-form-block .bwp-honeypot{
  position:absolute!important;
  left:-10000px!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
}
.bwp-form-block form[aria-busy="true"]{opacity:.82}
.bwp-form-block .bwp-form-status{
  margin-top:.5rem;
  padding:.75rem .9rem;
  border:1px solid currentColor;
  border-radius:.2rem;
}
.bwp-form-block .bwp-form-status[hidden]{display:none}
.bwp-form-block .bwp-form-status.is-success{font-weight:600}
.bwp-form-block .bwp-form-status.is-error{font-weight:600}



/* BWP 8C.12.3 — native accordions */
.bwp-accordion{margin:1.75rem 0;border-top:1px solid currentColor}
.bwp-accordion__item{border-bottom:1px solid currentColor}
.bwp-accordion__summary{cursor:pointer;font-weight:600;padding:.9rem 2.25rem .9rem 0;position:relative;list-style:none}
.bwp-accordion__summary::-webkit-details-marker{display:none}
.bwp-accordion__summary::after{content:"+";position:absolute;right:.25rem;top:.9rem;font-weight:400}
.bwp-accordion__item[open]>.bwp-accordion__summary::after{content:"−"}
.bwp-accordion__summary:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.bwp-accordion__content{padding:0 0 1rem}
.bwp-accordion__content>:first-child{margin-top:0}
.bwp-accordion__content>:last-child{margin-bottom:0}
@media (max-width:640px){.bwp-accordion__summary{padding-top:.8rem;padding-bottom:.8rem}.bwp-accordion__summary::after{top:.8rem}}

/* 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}}


/* RP Forms: published page-bound form output */
.rp-published-form-output{
  margin:2.25rem 0 1rem;
  padding-top:1.25rem;
  border-top:1px solid currentColor;
  border-top-color:color-mix(in srgb,currentColor 18%,transparent);
}
.rp-published-form-output h2{margin:0 0 1rem;font-size:1.15em}
.rp-published-form-output-list{display:grid;gap:.9rem}
.rp-published-form-entry{
  padding:1rem 1.1rem;
  border:1px solid currentColor;
  border-color:color-mix(in srgb,currentColor 14%,transparent);
  border-radius:.65rem;
  background:color-mix(in srgb,currentColor 4%,transparent);
}
.rp-published-form-entry-body{margin:0}
.rp-published-form-entry-meta{margin:.55rem 0 0;font-size:.88em;opacity:.72}