* { box-sizing: border-box; }

:root {
    --cbg: #f1f1f1;
    --cfg: #212121;
    --chl: #017f0c;

    /* Background glows */
    --g1: #a9e0cf;
    --g2: #cdeeb4;
    --g3: #b3dfdc;
    --dither: .1;
}
html { background: var(--cbg); }
html, body { margin: 0; padding: 0; font-family: 'Barlow Condensed', sans-serif !important; font-size: 14px; color: var(--cfg); }

/* Background: fixed layer with three soft glows, each drifting on its own path.
   Only transform is animated, so it stays cheap to render. */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--cbg); }
.bg span {
    position: absolute;
    /* Cosine fade (instead of filter: blur, which Chrome renders at low resolution on large layers).
       Many stops on a smooth curve: no sudden slope changes, so no visible rings (Mach bands). */
    background: radial-gradient(closest-side in oklab,
        var(--c) 0%,
        color-mix(in oklab, var(--c) 98.3%, transparent) 8.3%,
        color-mix(in oklab, var(--c) 93.3%, transparent) 16.7%,
        color-mix(in oklab, var(--c) 85.4%, transparent) 25%,
        color-mix(in oklab, var(--c) 75%, transparent) 33.3%,
        color-mix(in oklab, var(--c) 62.9%, transparent) 41.7%,
        color-mix(in oklab, var(--c) 50%, transparent) 50%,
        color-mix(in oklab, var(--c) 37.1%, transparent) 58.3%,
        color-mix(in oklab, var(--c) 25%, transparent) 66.7%,
        color-mix(in oklab, var(--c) 14.6%, transparent) 75%,
        color-mix(in oklab, var(--c) 6.7%, transparent) 83.3%,
        color-mix(in oklab, var(--c) 1.7%, transparent) 91.7%,
        transparent 100%);
    will-change: transform;
    animation: var(--path) var(--dur) ease-in-out infinite alternate;
}
/* Starting centres (vw, vh): top-right (72, 27), left (25, 53), bottom (57, 75) */
.bg span:nth-child(1) { --c: var(--g1); --path: glow-1; --dur: 8s; width: 197.4vw; height: 180.6vh; left: -26.7vw; top: -63.3vh; }
.bg span:nth-child(2) { --c: var(--g3); --path: glow-2; --dur: 10s; width: 163.8vw; height: 163.8vh; left: -56.9vw; top: -28.9vh; }
.bg span:nth-child(3) { --c: var(--g2); --path: glow-3; --dur: 12s; width: 180.6vw; height: 147vh; left: -33.3vw; top: 1.5vh; }

/* Dither: fine zero-mean noise that breaks up the 8-bit colour steps (banding).
   soft-light lightens/darkens around the real colour instead of veiling it with grey;
   the noise contrast is stretched, and pixelated keeps it crisp when Windows scales the page. */
.bg::after {
    content: ""; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 128px 128px;
    image-rendering: pixelated;
    mix-blend-mode: soft-light;
    opacity: var(--dither);
}

/* Small paths: each glow drifts around its own area (top-right, left, bottom) without overlapping the others */
@keyframes glow-1 {
    0%   { transform: translate3d(0, 0, 0); }
    50%  { transform: translate3d(-12vw, 8vh, 0); }
    100% { transform: translate3d(-4vw, 14vh, 0); }
}
@keyframes glow-2 {
    0%   { transform: translate3d(0, 0, 0); }
    50%  { transform: translate3d(10vw, 10vh, 0); }
    100% { transform: translate3d(6vw, -10vh, 0); }
}
@keyframes glow-3 {
    0%   { transform: translate3d(0, 0, 0); }
    50%  { transform: translate3d(-12vw, -6vh, 0); }
    100% { transform: translate3d(10vw, -10vh, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .bg span { animation-duration: calc(var(--dur) * 3); }
}
/* Page sections: dimensions only, one full screen each.
   svh = height with the mobile browser bars visible, so content never ends up under them;
   width 100% (not 100vw, which includes the scrollbar and causes horizontal scroll). */
main > section {
    width: 100%;
    min-height: 100vh; min-height: 100svh;
}

/* Hero header: fills its section and pins the text bottom-left */
.hero header {
    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
    min-height: inherit;
    padding: clamp(24px, 6vh, 64px) clamp(20px, 8vw, 160px);
    /* Keep clear of notches and the iOS home indicator */
    padding-left: max(clamp(20px, 8vw, 160px), env(safe-area-inset-left));
    padding-bottom: max(clamp(32px, 12vh, 140px), env(safe-area-inset-bottom));
}
/* Desktop: more breathing room around the text */
@media (min-width: 1024px) {
    .hero header { padding-left: clamp(120px, 12vw, 260px); padding-right: clamp(120px, 12vw, 260px); padding-bottom: clamp(120px, 18vh, 240px); }
}

/* CookieYes "revisit consent" button: bottom-right instead of bottom-left (the dashboard setting does not apply to it) */
.cky-btn-revisit-wrapper.cky-revisit-bottom-left { left: auto !important; right: 15px !important; }

.highlight { color: var(--chl); }

h1.title { margin: 0; font-size: clamp(2.6rem, 3.5vw + 1.6rem, 4rem); text-wrap: balance; }
h1.title small { display: block; font-size: .83em; }
h1, h4 { font-size: 2.8rem; font-weight: 300; line-height: 110%; }
h2, h5 { font-size: 2.0rem; font-weight: 300; line-height: 110%; }
h3, h6 { font-size: 1.2rem; font-weight: 300; line-height: 110%; }
h4, h5, h6 { font-style: italic; }

::-webkit-scrollbar { width: 4px; transition: background-color .5s ease; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.4); }
::-webkit-scrollbar-thumb:hover { background: #f1f1f1; }
/* Selected text: inverted colours (text colour alone on a --cfg background would be invisible) */
::selection { background: var(--cfg); color: var(--cbg); }

@media (prefers-color-scheme: dark) {
    :root {
        --cbg: #212121;
        --cfg: #f1f1f1;
        --chl: #80d487;

        --g1: #248e6e;
        --g2: #26381b;
        --g3: #133a37;
    }
}