/* Content is visible before JavaScript and throughout every effect. */
.cm-preferences{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:18px clamp(20px,5vw,80px);border-top:1px solid currentColor;font:12px/1.5 system-ui,sans-serif;color:inherit;background:inherit}
.cm-preferences button{font:inherit;line-height:1.5;color:inherit;background:transparent;border:1px solid currentColor;border-radius:24px;min-height:44px;padding:9px 16px;cursor:pointer}
.cm-preferences button:focus-visible{outline:3px solid currentColor;outline-offset:4px}
.cm-preferences span{max-width:45em}
.cm-progress{position:fixed;inset:0 0 auto;height:3px;z-index:90;pointer-events:none;transform-origin:left;transform:scaleX(0);background:var(--cm-color,#69435e);opacity:.95}
[data-collection-motion=photo]{--cm-color:#277965}[data-collection-motion=signal]{--cm-color:#a75326}[data-collection-motion=frame]{--cm-color:#b83161}[data-collection-motion=route]{--cm-color:#4c6f95}
[data-cm-current]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
[data-cm-accent]{position:relative}
[data-cm-accent]::after{content:"";display:block;position:absolute;left:-12px;top:0;width:3px;height:100%;background:currentColor;transform-origin:top;pointer-events:none}
[data-collection-motion=signal] [data-cm-accent]::after{width:6px;height:6px;top:4px;left:-13px;border:1px solid currentColor;background:transparent;border-radius:50%}
[data-collection-motion=frame] [data-cm-accent]::after{width:6px;height:100%;background:transparent;border-left:2px solid currentColor;border-bottom:2px solid currentColor}
html[data-motion=off]{scroll-behavior:auto!important}
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@view-transition{navigation:auto}
::view-transition-old(root){animation:cm-page-out 120ms ease-out both}
::view-transition-new(root){animation:cm-page-in 180ms ease-out both}
@keyframes cm-page-in{from{opacity:.9}to{opacity:1}}
@keyframes cm-page-out{to{opacity:.9}}
html[data-motion=off]::view-transition-old(root),html[data-motion=off]::view-transition-new(root){animation:none}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* Collectie: leesritme, kaartindeling en bediening */
:where(main,dialog) :is(h1,h2,h3){text-wrap:balance}
.bk-section p,.bk-story li,.bk-lead p,dialog form p{max-inline-size:68ch;text-wrap:pretty}
.bk-section p{line-height:1.7}
.bk-card,.bk-story,.bk-section>*,.bk-lead>*,.bk-content-grid>*{min-inline-size:0}
.bk-card h3{overflow-wrap:break-word;hyphens:auto}
.bk-section p+p{margin-block-start:1em}
:where(main,header,footer,dialog) :is(a,button,input,select,textarea):focus-visible{outline:3px solid CanvasText;outline-offset:3px;box-shadow:0 0 0 3px Canvas}
dialog[open]{max-inline-size:calc(100% - 24px);max-block-size:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}
button[data-inquiry],.bk-button{max-inline-size:100%;white-space:normal}
@media(min-width:1100px){.bk-content-grid:has(>.bk-contents):has(>.bk-story){grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}.bk-content-grid>.bk-contents{grid-column:span 3}.bk-content-grid>.bk-story{grid-column:span 9}}
@media(max-width:760px){dialog :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px;max-width:100%}.bk-button,button[data-inquiry]{min-height:44px}.bk-section p{font-size:max(1rem,16px)}}