:root {
            --page-max: 860px;
            --text-max: 72ch;
            --gap-xs: 0.5rem;
            --gap-sm: 1rem;
            --gap-md: 1.5rem;
            --gap-lg: 2.5rem;
            --border: #d8d8d8;
            --text: #111;
            --muted: #666;
            --bg: #ffffff;
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica, sans-serif;
        color: #FFF;
        text-align: left;
        font-size: 24px;
        background-image: url("img/bg2.JPG");
        background-repeat;}
            line-height: 1.65;
        }

        img {
            display: block;
            max-width: 100%;
            height: auto;
        }

        .page {
            width: min(100% - 2rem, var(--page-max));
            margin: 0 auto;
            padding: 2rem 0 4rem;
        }

        .hero {
            margin-bottom: var(--gap-lg);
        }

        .title {
            margin: 0 0 0.5rem;
            font-size: clamp(2rem, 4vw, 3rem);
            line-height: 1.1;
            text-wrap: balance;
        }

        .date {
            margin: 0 0 var(--gap-md);
            color: var(--muted);
            font-size: 1rem;
        }

        .intro {
            max-width: var(--text-max);
        }

        .image-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--gap-sm);
            margin: var(--gap-md) 0 var(--gap-lg);
        }

        .two-up {
            grid-template-columns: 1fr;
        }

        .section {
            margin-bottom: var(--gap-lg);
        }

        .section-title {
            margin: 0 0 var(--gap-sm);
            font-size: clamp(1.4rem, 2vw, 1.9rem);
            line-height: 1.2;
            text-wrap: balance;
        }

        .text-block {
            max-width: var(--text-max);
        }

        .text-block p,
        .text-block ul,
        .text-block ol {
            margin: 0 0 1rem;
        }

        .figure {
            margin: 0 0 var(--gap-md);
        }

        .figure img {
            width: 100%;
            border: 1px solid var(--border);
        }

        .compact-list {
            padding-left: 1.25rem;
        }

        .problem-list {
            padding-left: 1.25rem;
        }

        .problem-list li {
            margin-bottom: 1rem;
        }

        .closing {
            margin-top: 3rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--border);
        }

        .closing h2 {
            margin: 0;
            font-size: clamp(1.5rem, 2.2vw, 2rem);
        }

        @media (min-width: 800px) {
            .page {
                width: min(100% - 3rem, var(--page-max));
                padding-top: 3rem;
            }

            .two-up {
                grid-template-columns: 1fr 1fr;
                align-items: start;
            }
        }