
        :root {
            /* â€” Semantic colour tokens â€” */
            --bg-page: #FFFFFF;
            --bg-surface: #FFFFFF;
            --bg-hero: #000000;
            --bg-thumb: #E0E0E0;
            --bg-button: #333333;

            --text-primary: #000000;
            --text-body: #444444;
            --text-muted: #999999;
            --text-muted-light: #999999;
            --text-heading: #000000;
            --text-wordmark: #888888;
            --text-hero: #FFFFFF;
            --text-button: #FFFFFF;

            --accent: #8B0101;
            --accent-nav: #8B0101;
            --mark: #5a778c;

            --border: #E0E0E0;
            --border-scroll: #8B0101;

            --wordmark-shadow: 2px 0 0 currentColor;
            --haccu-shadow: 1px 0 0 currentColor;

            /* â€” Legacy aliases (for any templates still using old names) â€” */
            --white: var(--bg-page);
            --black: var(--text-primary);
            --crimson: var(--accent);
            --grey-wordmark: var(--text-wordmark);
            --grey-light: var(--text-muted);
            --grey-text: var(--text-body);
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --bg-page: #2a3441;
                --bg-surface: #2a3441;
                --bg-thumb: #3a4d5e;
                --bg-button: #8ab4c4;

                --text-primary: #FFFFFF;
                --text-body: #c0c8d0;
                --text-muted: #7a8a96;
                --text-muted-light: #a0b0bc;
                --text-heading: #8ab4c4;
                --text-wordmark: #FFFFFF;
                --text-hero: #FFFFFF;
                --text-button: #2a3441;

                --accent: #8ab4c4;
                --accent-nav: #d0dfe6;
                --mark: #8ab4c4;

                --border: #3a4d5e;
                --border-scroll: #8ab4c4;

                --wordmark-shadow: 1px 0 0 currentColor;
                --haccu-shadow: 1px 0 0 currentColor;
            }
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            overflow-y: scroll;
        }

        body {
            font-family: Georgia, 'Times New Roman', serif;
            background: var(--bg-page);
            color: var(--text-body);
            -webkit-font-smoothing: antialiased;
        }
        
		  .topbar-wrapper {
        		position: sticky;
        		top: 0;
        		background: var(--bg-page);
        		z-index: 100;
    	  }        

        /* â€” Top bar â€” */
        .topbar {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem 3rem 1.5rem;
        }

        .brand {
            display: flex;
            align-items: center;
        }

        .brand-mark {
            width: 42px;
            height: 47px;
            flex-shrink: 0;
        }

        .brand-mark svg {
            width: 100%;
            height: 100%;
        }

        .brand-mark path {
            stroke: var(--mark);
        }

        .brand-text {
            display: flex;
            flex-direction: column;
        }

        .wordmark {
            font-family: 'Syncopate', sans-serif;
            font-weight: 500;
            font-size: 2.4rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--text-wordmark);
            transform: scaleY(0.85);
            transform-origin: bottom left;
            line-height: 1;
    			text-shadow: var(--wordmark-shadow);      
        }
        
        .wordmark-link {
        		text-decoration: none;
        		color: inherit;
        		display: flex;
        		align-items: center;
        		gap: 1rem;
        }

        .strapline {
            font-family: 'Syncopate', sans-serif;
            font-weight: 700;
            font-size: 0.55rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--accent);
            margin-top: 0.4rem;
        }

        nav {
            display: flex;
            gap: 2.5rem;
            align-items: flex-end;
            padding-bottom: 0.2rem;
            margin-right: 2rem;
        }

        nav a {
            font-family: 'Syncopate', sans-serif;
            font-weight: 700;
            font-size: 0.65rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--accent-nav);
            text-decoration: none;
            transition: opacity 0.2s;
        }

        nav a:hover {
            opacity: 0.7;
        }

        /* â€” Download nav button â€” */
        nav a.nav-downloads {
            color: var(--text-button);
            background: var(--bg-button);
            padding: 0.35em 0.9em;
            border-radius: 4px;
            letter-spacing: 0.1em;
            margin-bottom: -0.35em;
            transition: opacity 0.2s;
        }

        @media (prefers-color-scheme: dark) {
            nav a.nav-downloads {
                color: #FFFFFF;
                background: #5a778c;
            }
        }

        nav a.nav-downloads:hover {
            opacity: 0.8;
        }

        /* â€” Hero (unchanged across themes) â€” */
        .hero {
            background: var(--bg-hero);
            position: relative;
            overflow: hidden;
            min-height: 420px;
            display: flex;
            align-items: center;
        }

        .hero-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1200px;
            margin: 0 auto;
            padding: 4rem 3rem;
            width: 100%;
        }

        .hero-text {
            flex: 1;
            text-align: center;
        }

        .hero-text h1 {
            font-family: Georgia, 'Times New Roman', serif;
            font-weight: 400;
            font-size: 3.5rem;
            color: var(--text-hero);
            letter-spacing: 0.12em;
            line-height: 1.2;
            display: inline-block;
        }

        .hero-image {
            flex: 0 0 auto;
            margin-left: 2rem;
        }

        .hero-image img {
            display: block;
            max-height: 380px;
            width: auto;
        }

        /* â€” Article hero (for paper/broker pages) â€” */
        .article-hero {
            width: 100%;
            height: 300px;
            overflow: hidden;
        }

        .article-hero img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* â€” Hero slim (utility pages) â€” */
        .hero.hero-slim {
            min-height: auto;
        }

        .hero.hero-slim .hero-inner {
            padding-top: 0;
            padding-bottom: 0;
        }

        .hero.hero-slim .hero-text {
            padding-top: 2.5rem;
            padding-bottom: 2.5rem;
        }

        .hero.hero-slim .hero-image {
            align-self: stretch;
        }

        .hero.hero-slim .hero-image img {
            height: 100%;
            max-height: none;
            object-fit: cover;
        }

        /* â€” Article listing (index page) â€” */
        .article-listing-item {
            display: flex;
            gap: 1.5rem;
            text-decoration: none;
            color: var(--text-body);
            transition: opacity 0.2s;
            max-width: 900px;
            overflow: hidden;
        }

        .article-listing-item:hover {
            opacity: 0.75;
        }

        .article-listing-thumb {
            flex: 0 0 200px;
            height: 135px;
            overflow: hidden;
            border-radius: 3px;
            background: var(--bg-thumb);
        }

        .article-listing-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .article-listing-text {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .article-listing-label {
            font-family: 'Syncopate', sans-serif;
            font-weight: 700;
            font-size: 0.5rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--text-primary);
            margin-bottom: 0.3rem;
        }

        .article-listing-title {
            font-family: Georgia, serif;
            font-weight: 400;
            font-size: 1.15rem;
            line-height: 1.3;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
        }

        .article-listing-subtitle {
            font-family: Georgia, serif;
            font-size: 1rem;
            line-height: 1.5;
            color: var(--text-body);
            margin-top: 0.15rem;
        }

        .section .article-listing-desc {
            font-family: Georgia, serif;
            font-style: italic;
            font-size: 0.9rem;
            line-height: 1.6;
            color: var(--text-muted-light);
            margin-top: 0.6rem;
            margin-bottom: 0;
            text-align: left;
            max-width: 900px;
        }

        .article-listing-title a {
            color: var(--accent);
            text-decoration: none;
            border-bottom: 1px solid transparent;
            transition: border-color 0.2s;
        }

        .article-listing-title a:hover {
            border-bottom-color: var(--accent);
        }

        /* â€” Downloads page â€” */
        .downloads-page {
            max-width: 900px;
            margin: 0 auto;
            padding: 4rem 3rem;
        }

        .downloads-page h1 {
            font-family: Georgia, serif;
            font-weight: 400;
            font-size: 2.2rem;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .downloads-page .page-subtitle {
            font-family: Georgia, serif;
            font-style: italic;
            font-size: 1.1rem;
            color: var(--text-muted);
            margin-bottom: 0.8rem;
        }

        .jump-link {
            margin-bottom: 3rem;
        }

        .jump-link a {
            font-family: Georgia, serif;
            font-size: 1.1rem;
            color: var(--accent);
            text-decoration: none;
        }

        .jump-link a::after {
            content: ' \2193';
            font-size: 1.2rem;
        }

        .jump-link a:hover {
            border-bottom: 1px solid var(--accent);
        }

        .downloads-section-title {
            font-family: Georgia, serif;
            font-weight: 400;
            font-size: 1.4rem;
            color: var(--text-primary);
            margin-top: 3rem;
            margin-bottom: 2rem;
            padding-top: 2rem;
            border-top: 1px solid var(--border);
            scroll-margin-top: 80px;
        }

        .downloads-section-label {
            font-family: 'Syncopate', sans-serif;
            font-weight: 700;
            font-size: 0.6rem;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--accent);
            margin-bottom: 1.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--border);
        }

        .download-item {
            display: flex;
            align-items: flex-start;
            gap: 1.5rem;
            padding: 1.5rem 0;
            border-bottom: 1px solid var(--border);
        }

        .download-item:last-child {
            border-bottom: none;
        }

        .download-item-image {
            flex: 0 0 200px;
            height: 135px;
            overflow: hidden;
            border-radius: 3px;
        }

        .download-item-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .download-item-text {
            flex: 1;
        }

        .download-item-title {
            font-family: Georgia, serif;
            font-weight: 400;
            font-size: 1.15rem;
            color: var(--text-primary);
            margin-bottom: 0.3rem;
        }

        .download-item-title a {
            color: var(--accent);
            text-decoration: none;
            border-bottom: 1px solid transparent;
            transition: border-color 0.2s;
        }

        .download-item-title a:hover {
            border-bottom-color: var(--accent);
        }

        .download-item-desc {
            font-size: 1.15rem;
            font-style: italic;
            line-height: 1.6;
            color: var(--text-muted);
            margin-bottom: 0.5rem;
        }

        .download-item-meta {
            font-family: 'Syncopate', sans-serif;
            font-size: 0.55rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--text-primary);
            margin-top: 0.8rem;
        }

        .download-item-meta a {
            color: var(--accent);
            text-decoration: none;
            font-weight: 700;
        }

        .download-item-meta a:hover {
            opacity: 0.7;
        }

        /* â€” Sections â€” */
        .section {
            border-bottom: none;
            padding-top: 4rem;
            padding-bottom: 0;
            padding-left: 3rem;
            padding-right: 3rem;
            scroll-margin-top: 80px;
        }

        .section::after {
            content: '';
            display: block;
            margin-top: 4rem;
            max-width: 900px;
            border-bottom: 1px solid var(--border);
        }

        .section:last-of-type {
            border-bottom: none;
        }

        .section:last-of-type::after {
            display: none;
        }

        .section-label {
            font-family: 'Syncopate', sans-serif;
            font-weight: 700;
            font-size: 0.6rem;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--accent-nav) !important;
            margin-bottom: 1.5rem;
        }

        .section h2 {
            font-family: Georgia, serif;
            font-weight: 400;
            font-style: italic;
            font-size: 1.4rem;
            color: var(--text-heading);
            margin-bottom: 1rem;
            line-height: 1.4;
        }

        .section p {
            font-size: 1.1rem;
            line-height: 1.8;
            color: var(--text-body);
            margin-bottom: 1rem;
            text-align: justify;
            max-width: 900px;
        }

        .section a {
            color: var(--accent);
            text-decoration: none;
            border-bottom: 1px solid transparent;
            transition: border-color 0.2s;
        }

        .section a:hover {
            border-bottom-color: var(--accent);
        }
        
        .haccu {
    			font-family: 'Syncopate', sans-serif;
    			color: var(--text-wordmark);
    			font-size: 0.85em;
    			text-shadow: var(--haccu-shadow);
		  }

        /* â€” Image treatment in dark mode â€” */
        @media (prefers-color-scheme: dark) {
            .article-listing-thumb {
                border: 1px solid var(--border);
            }

            .download-item-image {
                border: 1px solid var(--border);
            }

            .article-listing-thumb img,
            .download-item-image img {
                opacity: 0.9;
            }
        }
		  

        /* -- Bio cards (who section) -- */
        .bio {
            margin-bottom: 2.5rem;
            padding-bottom: 2.5rem;
            border-bottom: 1px solid var(--border);
        }

        .bio:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .section .bio-name {
            font-family: Georgia, serif;
            font-weight: 700;
            font-size: 1.1rem;
            color: var(--accent);
            margin-bottom: 0.2rem;
            text-align: left;
        }

        .section .bio-role {
            font-family: 'Syncopate', sans-serif;
            font-weight: 700;
            font-size: 0.65rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-bottom: 1rem;
            text-align: left;
        }

        /* -- Article pages (paper, broker, tollbooth) -- */
        .article {
            max-width: 760px;
            margin: 0 auto;
            padding: 4rem 3rem;
        }

        .article-header {
            margin-bottom: 3rem;
        }

        .article-header .label {
            font-family: 'Syncopate', sans-serif;
            font-weight: 700;
            font-size: 0.6rem;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--accent);
            margin-bottom: 1rem;
        }

        .article-header h1 {
            font-family: Georgia, serif;
            font-weight: 400;
            font-size: 2.2rem;
            color: var(--text-primary);
            line-height: 1.3;
            margin-bottom: 1rem;
        }

        .article-header .subtitle {
            font-family: Georgia, serif;
            font-style: italic;
            font-size: 1.1rem;
            color: var(--text-wordmark);
            line-height: 1.6;
        }

        .article-header .byline {
            font-size: 0.85rem;
            color: var(--text-muted);
            margin-top: 1.5rem;
        }

        .article-header .byline a {
            color: var(--accent);
            text-decoration: none;
        }

        .article h2 {
            font-family: Georgia, serif;
            font-weight: 400;
            font-style: italic;
            font-size: 1.2rem;
            color: var(--accent);
            margin-top: 2.5rem;
            margin-bottom: 1rem;
        }

        .article p {
            font-family: Georgia, serif;
            font-size: 1.05rem;
            line-height: 1.85;
            color: var(--text-body);
            margin-bottom: 1rem;
            text-align: justify;
        }

        .article a {
            color: var(--accent);
            text-decoration: none;
            border-bottom: 1px solid transparent;
            transition: border-color 0.2s;
        }

        .article a:hover {
            border-bottom-color: var(--accent);
        }

        .article .dropcap {
            font-size: 3.5rem;
            float: left;
            line-height: 0.8;
            padding-right: 0.15em;
            padding-top: 0.1em;
            font-weight: 700;
            color: var(--text-primary);
        }

        .article .end-mark {
            color: var(--accent);
            font-size: 1.5rem;
            margin-top: 2rem;
        }

        .article-footer {
            margin-top: 3rem;
            padding-top: 2rem;
            border-top: 1px solid var(--border);
        }

        .article-footer p {
            font-size: 0.95rem;
            color: var(--text-wordmark);
        }

        .article-footer a {
            color: var(--accent);
            text-decoration: none;
        }

        /* â€” Footer â€” */
			footer {
    			padding: 2rem 3rem;
    			font-size: 0.75rem;
    			color: var(--text-muted);
			}

        /* â€” Responsive â€” */
        @media (max-width: 768px) {
            .topbar {
                flex-direction: column;
                align-items: flex-start;
                padding: 1.5rem;
                gap: 1.2rem;
            }

            nav {
                gap: 1.5rem;
                flex-wrap: wrap;
            }

            .hero-inner {
                flex-direction: column;
                padding: 3rem 1.5rem;
                text-align: center;
            }

            .hero-text h1 {
                font-size: 2.2rem;
            }

            .hero-image {
                margin-left: 0;
                margin-top: 2rem;
            }

            .hero-image img {
                max-height: 280px;
            }

            .section {
                padding: 3rem 1.5rem !important;
            }

            /* Article listing responsive */
            .article-listing-item {
                gap: 1rem;
            }

            .article-listing-thumb {
                flex: 0 0 100px;
                height: 70px;
            }

            /* Article hero responsive */
            .article-hero {
                height: 200px;
            }

            /* Article page responsive */
            .article {
                padding: 2rem 1.5rem;
            }

            .article-header h1 {
                font-size: 1.6rem;
            }

            /* Downloads page responsive */
            .downloads-page {
                padding: 3rem 1.5rem;
            }

            .download-item {
                flex-direction: column;
                gap: 1rem;
            }

            .download-item-image {
                flex: none;
                width: 100%;
                height: 160px;
            }
        }
        
        .section:last-of-type {
        		margin-bottom: 80vh;
    	  }  
