@layer sections{.dagritme{--moment-lengte:38svh;--dur-scene:.42s;--horizon:39%;--opkomst-x:46%;--ondergang-x:96%;padding-block:0}.dagritme__scene{isolation:isolate;padding-block:var(--space-sectie);color:var(--color-text);position:relative;overflow:clip}.dagritme__lucht{z-index:-1;pointer-events:none;position:absolute;inset:0}.dagritme__laag{position:absolute;inset:0}.dagritme__laag--dag{background:radial-gradient(70% 60% at 70% 0%, color-mix(in srgb, var(--color-highlight) 30%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--color-highlight) 20%, var(--color-surface)) 0%, var(--color-surface) 70%)}.dagritme__laag--ochtend{background:radial-gradient(34% 26% at var(--opkomst-x) var(--horizon), color-mix(in srgb, var(--color-accent) 24%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--color-surface-muted) 55%, var(--color-surface)) 0%, var(--color-surface) 75%);opacity:0}.dagritme__laag--avond{background:radial-gradient(34% 26% at var(--ondergang-x) var(--horizon), color-mix(in srgb, var(--color-accent) 26%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in oklab, var(--color-highlight) 34%, color-mix(in oklab, var(--color-primary) 10%, var(--color-surface))) 0%, color-mix(in oklab, var(--color-accent) 10%, var(--color-surface)) 85%);opacity:0}.dagritme__laag--nacht{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='220'%3E%3Cg fill='rgba(255,255,255,.75)'%3E%3Ccircle cx='24' cy='30' r='1.2'/%3E%3Ccircle cx='96' cy='88' r='.8'/%3E%3Ccircle cx='150' cy='22' r='1'/%3E%3Ccircle cx='210' cy='64' r='.7'/%3E%3Ccircle cx='268' cy='18' r='1.1'/%3E%3Ccircle cx='300' cy='110' r='.8'/%3E%3Ccircle cx='60' cy='140' r='.7'/%3E%3Ccircle cx='182' cy='150' r='.9'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 320px 220px repeat-x, linear-gradient(180deg, var(--color-primary) 0%, color-mix(in oklab, var(--color-primary) 88%, var(--color-highlight)) 100%);opacity:.001}.dagritme__boog{inset-inline:44% 3%;inset-block:7% calc(100% - var(--horizon));border:1.5px dashed color-mix(in srgb, var(--color-text) 18%, transparent);border-block-end:0;border-radius:50% 50% 0 0/100% 100% 0 0;position:absolute}.dagritme__zon{aspect-ratio:1;background:radial-gradient(circle at 36% 34%, color-mix(in srgb, var(--color-accent) 40%, var(--color-surface-raised)) 0%, color-mix(in srgb, var(--color-accent) 80%, var(--color-surface-raised)) 40%, var(--color-accent) 72%);inline-size:clamp(3.25rem,2.5rem + 2.5vw,5.25rem);box-shadow:0 0 0 .625rem color-mix(in srgb, var(--color-accent) 12%, transparent), 0 0 3.5rem 1rem color-mix(in srgb, var(--color-accent) 26%, transparent);border-radius:50%;position:absolute;inset-block-start:8%;inset-inline-start:66%}.dagritme__grid{gap:var(--space-5);display:grid;position:relative}.dagritme__head{gap:var(--space-3);justify-items:start;display:grid;container-type:inline-size}.dagritme__title{font-size:min(var(--text-h2), 14cqi);font-weight:var(--weight-display);letter-spacing:var(--tracking-display);max-inline-size:16ch;line-height:1.02}.dagritme__intro{font-size:var(--text-lead);color:var(--color-text-muted);max-inline-size:30rem}.dagritme__klok,.dagritme__verloop{display:none}.dagritme__momenten{gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));margin:0;padding:0;display:grid}.dagritme__moment{align-content:start;gap:var(--space-1);border-radius:var(--radius-lg);background:var(--color-surface-raised);box-shadow:0 1px 2px color-mix(in srgb, var(--color-primary) 6%, transparent), 0 24px 48px -28px color-mix(in srgb, var(--color-primary) 35%, transparent);padding:clamp(1.25rem,.9rem + 1.2vw,2rem);display:grid}.dagritme__moment-tijd{font-size:var(--text-label);font-weight:var(--weight-sterk);letter-spacing:var(--tracking-label);font-variant-numeric:tabular-nums;color:var(--color-text-muted);align-items:center;gap:.5rem;display:inline-flex}.dagritme__stip{background:var(--color-accent);border-radius:50%;block-size:.5rem;inline-size:.5rem}.dagritme__moment-titel{font-size:var(--text-h3);font-weight:var(--weight-display);letter-spacing:var(--tracking-kop);line-height:1.1}.dagritme__moment-tekst{color:var(--color-text-muted);max-inline-size:34rem}.dagritme__moment-link{border-radius:var(--radius-pill);background:var(--color-surface-muted);min-block-size:2.75rem;color:var(--color-text);font-weight:var(--weight-ui);transition:background-color var(--dur-basis) var(--ease-out);justify-self:start;align-items:center;gap:.625rem;margin-block-start:var(--space-2);padding:.25rem 1rem .25rem .25rem;text-decoration:none;display:inline-flex}.dagritme__moment-link:hover{background:color-mix(in srgb, var(--color-highlight) 55%, var(--color-surface-muted))}.dagritme__moment-icoon{background:var(--color-surface-raised);border-radius:50%;place-items:center;block-size:2.25rem;inline-size:2.25rem;display:grid}.dagritme__moment-pijl{--icon-size:1rem;transition:translate var(--dur-basis) var(--ease-out)}.dagritme__moment-link:hover .dagritme__moment-pijl{translate:.2rem}.dagritme__note{justify-self:start}@media (min-height:40rem) and (prefers-reduced-motion:no-preference){:is(.js:not(.js-laat) .dagritme:not(.scene-uit),.dagritme.is-scene){block-size:calc(100svh + var(--count,4) * var(--moment-lengte))}.dagritme.is-scene .dagritme__scene{block-size:100svh;padding-block:calc(var(--header-hoogte) + var(--space-2)) var(--space-3);align-items:center;display:grid;position:sticky;inset-block-start:0}.dagritme.is-scene .dagritme__laag:not(.dagritme__laag--dag),.dagritme.is-scene .dagritme__zon{will-change:opacity, transform}.dagritme.is-scene .dagritme__zon{inset-block-start:0;inset-inline-start:0}.dagritme.is-scene .dagritme__laag--nacht{transition:opacity var(--dur-traag) var(--ease-zacht)}.dagritme.is-scene .is-nacht .dagritme__laag--nacht{opacity:1}.dagritme.is-scene :is(.dagritme__title,.dagritme__intro,.dagritme__klok,.dagritme__note,.dagritme__legenda,.dagritme__knoppen button,.eyebrow){transition:color var(--dur-traag) var(--ease-zacht), background-color var(--dur-traag) var(--ease-zacht)}.dagritme.is-scene .is-nacht .dagritme__opwek{fill:color-mix(in srgb, var(--color-highlight) 30%, transparent)}.dagritme.is-scene .is-nacht .dagritme__opwek-lijn{stroke:var(--color-highlight)}.dagritme.is-scene .is-nacht .dagritme__legenda-opwek:before{background:color-mix(in srgb, var(--color-highlight) 45%, transparent);border-block-start-color:var(--color-highlight)}.dagritme.is-scene .dagritme__grid{align-items:end;gap:var(--space-3) var(--space-8);grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-areas:"kop kaart""klok kaart""verloop verloop"}.dagritme.is-scene .dagritme__head{grid-area:kop}.dagritme.is-scene .dagritme__klok{letter-spacing:-.04em;font-variant-numeric:tabular-nums;grid-area:klok;margin-inline-start:-.05em;font-size:clamp(3.5rem,1.5rem + 6.5vw,8.5rem);font-weight:300;line-height:.9;display:block}.dagritme.is-scene .dagritme__momenten{grid-area:kaart;grid-template-columns:minmax(0,1fr);grid-template-areas:"moment";align-self:end}.dagritme.is-scene .dagritme__moment{opacity:0;pointer-events:none;transition:opacity .16s var(--ease-out), translate var(--dur-scene) var(--ease-zacht);grid-area:moment;align-self:end;translate:0 .75rem}.dagritme.is-scene .dagritme__moment:focus-within{opacity:1;transition:none;translate:0}.dagritme.is-scene .dagritme__moment.is-active{opacity:1;pointer-events:auto;transition:opacity var(--dur-scene) var(--ease-zacht) .14s, translate var(--dur-scene) var(--ease-zacht) .14s;translate:0}.dagritme.is-scene .dagritme__verloop{gap:var(--space-2);grid-area:verloop;margin-block-start:var(--space-3);display:grid}.dagritme.is-scene .dagritme__note--los{display:none}.dagritme__grafiek-kop{justify-content:space-between;align-items:baseline;gap:.25rem var(--space-3);flex-wrap:wrap;margin-block-end:.5rem;display:flex}.dagritme__plot{block-size:clamp(4rem,12svh,8rem);position:relative}.dagritme__plot svg{block-size:100%;inline-size:100%;display:block;overflow:visible}.dagritme__opwek{fill:color-mix(in srgb, var(--color-accent) 26%, transparent);transition:fill var(--dur-traag) var(--ease-zacht)}.dagritme__opwek-lijn,.dagritme__verbruik,.dagritme__basis{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}.dagritme__opwek-lijn{stroke:var(--color-accent);stroke-width:2.5px}.dagritme__verbruik{stroke:var(--color-text);stroke-width:2px;stroke-dasharray:6 6}.dagritme__basis{stroke:var(--color-border-strong);stroke-width:1px}.dagritme__kop,.dagritme__rail-loper{will-change:transform;pointer-events:none;position:absolute;inset:0}.dagritme__kop:before{content:"";background:color-mix(in srgb, var(--color-text) 55%, transparent);inline-size:1.5px;position:absolute;inset-block:-.25rem 0;inset-inline-start:-.75px}.dagritme__legenda{gap:var(--space-3);font-size:var(--text-label);font-weight:var(--weight-ui);color:var(--color-text);margin:0;padding:0;list-style:none;display:flex}.dagritme__legenda li{align-items:center;gap:.4rem;display:inline-flex}.dagritme__legenda li:before{content:"";border-radius:2px;block-size:.5rem;inline-size:1rem}.dagritme__legenda-opwek:before{background:color-mix(in srgb, var(--color-accent) 50%, transparent);border-block-start:2px solid var(--color-accent)}.dagritme__legenda-verbruik:before{border-block-start:2px dashed var(--color-text);block-size:0}.dagritme__rail{background:var(--color-border-strong);border-radius:1px;block-size:2px;position:relative}.dagritme__rail-vul{background:var(--color-accent);transform-origin:0;will-change:transform;position:absolute;inset:0;transform:scaleX(0)}.dagritme__rail-loper span{background:var(--color-accent);block-size:.875rem;inline-size:.875rem;box-shadow:0 0 0 .3125rem color-mix(in srgb, var(--color-accent) 25%, transparent);border-radius:50%;position:absolute;inset-block-start:50%;inset-inline-start:0;translate:-50% -50%}.dagritme__knoppen{grid-template-columns:repeat(var(--count,4), minmax(0, 1fr));margin:0;padding:0;list-style:none;display:grid}.dagritme__knoppen button{min-block-size:2.75rem;inline-size:100%;padding:var(--space-1) .25rem;border-radius:var(--radius-md);color:var(--color-text-muted);font-size:var(--text-small);justify-items:center;gap:.125rem;display:grid}.dagritme__knoppen button:hover{color:var(--color-text);background:color-mix(in srgb, var(--color-text) 6%, transparent)}.dagritme__knoppen button[aria-current=true]{color:var(--color-text)}.dagritme__knop-tijd{font-weight:var(--weight-sterk);font-variant-numeric:tabular-nums}.dagritme__knoppen button:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}}@media (min-height:40rem) and (not (min-width:48rem)) and (prefers-reduced-motion:no-preference){.dagritme{--opkomst-x:8%;--ondergang-x:92%}.dagritme.is-scene .dagritme__zon{inline-size:2.5rem}.dagritme.is-scene .dagritme__scene{padding-block:calc(var(--header-hoogte) + var(--space-2)) var(--space-3)}.dagritme.is-scene .dagritme__grid{align-self:stretch;align-items:stretch;gap:var(--space-3);grid-template:"kop""klok"minmax(0,1fr)"kaart""verloop"/minmax(0,1fr)}.dagritme.is-scene .dagritme__klok{--hemel:1;border-block-end:1px solid color-mix(in srgb, var(--color-text) 22%, transparent);letter-spacing:-.03em;justify-content:center;align-items:flex-end;min-block-size:0;margin:0;padding-block-end:.12em;font-size:clamp(2.75rem,min(16vw,8.5svh),4.75rem);font-weight:300;line-height:1;display:flex}.dagritme.is-scene :is(.dagritme__intro,.dagritme__head .eyebrow,.dagritme__moment-tijd){clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}.dagritme.is-scene .dagritme__title{max-inline-size:none;font-size:clamp(1.5rem,3.5svh,2rem);line-height:1.08}.dagritme.is-scene .dagritme__momenten{align-self:start}.dagritme.is-scene .dagritme__moment{padding:var(--space-3);align-self:start;gap:.25rem}.dagritme.is-scene .dagritme__moment-titel{font-size:var(--text-h4)}.dagritme.is-scene .dagritme__moment-tekst{font-size:var(--text-small)}.dagritme.is-scene .dagritme__moment-link{margin-block-start:var(--space-1)}.dagritme.is-scene .dagritme__verloop{gap:var(--space-1);margin-block-start:0}.dagritme__grafiek-kop{margin-block-end:.25rem}.dagritme__plot{block-size:clamp(3.25rem,9svh,5rem)}.dagritme__knoppen button{font-size:var(--text-label);padding-block:.375rem}}@media (min-height:40rem) and (not (min-height:46rem)) and (not (min-width:48rem)) and (prefers-reduced-motion:no-preference){.dagritme.is-scene :is(.dagritme__plot,.dagritme__legenda){display:none}.dagritme.is-scene .dagritme__klok{font-size:clamp(2.25rem,7svh,3.25rem)}.dagritme.is-scene .dagritme__zon{inline-size:2.125rem}}@media (min-height:40rem) and (not (min-height:56rem)) and (min-width:48rem) and (prefers-reduced-motion:no-preference){.dagritme.is-scene .dagritme__title{font-size:min(var(--text-h2), 7svh)}.dagritme.is-scene .dagritme__intro{font-size:var(--text-body)}.dagritme.is-scene .dagritme__klok{font-size:clamp(3rem,10svh,6rem)}.dagritme.is-scene .dagritme__grid{row-gap:var(--space-2)}.dagritme.is-scene .dagritme__verloop{margin-block-start:0}.dagritme__plot{block-size:9svh}}}
