:root {
	/* Page (red, white, blue main theme) */
	--paper: hsl(210 70% 96%);  /* pale blue */
	--ink: hsl(0 0% 12%);

	--flag-red: hsl(351 78% 38%);           /* US flag red */
	--flag-blue: hsl(241 35% 32%);          /* US flag blue */

	/* Studio half — gray/black */
	--studio-bg: #AFAFAF;
	--studio-line: black;
	--studio-text: black;

	/* Tools half — sepia/cream */
	--tools-bg: #DAC39B;
	--tools-line: #AA8844;  /* or AA8844 */
	--tools-text: #643805;
}

* {
	box-sizing: border-box;
}

html {
	background: white;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	color: var(--ink);
	background: var(--paper);
	font-family: Georgia, 'Times New Roman', serif;
	line-height: 1.55;
}

p { margin: 0 0 12px; }

.page {
	width: min(1100px, calc(100% - 32px));
	margin: 0 auto;
}

.demo-bottom,
.demo-top {
    width: 100%;
    padding: 8px 16px;
    margin: 0;
/*     color: var(--ink); */
    background: white;
    /* border-bottom: 1px solid var(--line); */
    font-family: Arial, sans-serif;
    font-size: 0.82rem;
    font-weight: bold;
    text-align: center;
    width="100%";
}

.demo-bottom a,
.demo-top a {
	color: var(--green-accent);
}

.demo-bottom {
	padding-top: 20px;
	border-top: 1px solid black;
}

.demo-top {
	padding-bottom: 20px;
	border-bottom: 1px solid black;
}

.logo-footer {
    width: 100%;
    background: white;
    padding: 0;     /* vertical 40px, horizontal 20px */
    margin: 0;
    text-align: center;
}

.logo-footer img {
	height: 80px;
	width: auto;
}

.center {
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    max-width: 100%;
    text-align: center;
}

/* ---------- Masthead ---------- */
.flag-bar {
	height: 8px;
	background: linear-gradient(
		to bottom,
		var(--flag-red) 0 33.34%,
		#ffffff 33.34% 66.66%,
		var(--flag-blue) 66.66% 100%
	);
}

header {
	padding: 36px 0 28px;
	text-align: center;
}

.brand {
	margin: 0;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-weight: 500;
	font-size: clamp(2.6rem, 6vw, 4.4rem);
	letter-spacing: -0.01em;
	line-height: 1;
}

.brand .a { color: var(--flag-red); }
.brand .f { color: var(--flag-blue); }

/* ---------- Split ---------- */
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 8px;
	margin-right: 0;
	margin-bottom: 48px;
	margin-left: 0;
}

.half {
	padding: 20px;
	display: flex;
	flex-direction: column;
}

/* Studio — gray/black */
.studio {
	background: var(--studio-bg);
	color: var(--studio-text);
	border: 3px solid var(--studio-line);
}

/* Tools — sepia/cream */
.tools {
	background: var(--tools-bg);
	color: var(--tools-text);
	border: 3px solid var(--tools-line);
}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
	.split { grid-template-columns: 1fr; }
}