@font-face {
  font-family: "Source Serif 4 Display";
  src: url("SourceSerif4Display-Light.ttf.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
body {
    margin: 0;
    font-family: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
    display: flex;
    line-height: 1.6;
    color: #1c1e21;
    flex-direction: column; /* Stack header and main content vertically */
    align-items: center;   /* Center direct children (header, main-content-container) horizontally */
    justify-content: flex-start;
    min-height: 100vh;
    background-color: #D3BFB6;
    padding: 20px 0;
    box-sizing: border-box;
}

h1 {
	font-family: "Source Serif 4 Display";
	text-align: center;
}

a {
	color: #A30000;
}

h1 a {
	color: #1c1e21;
}

h2 a {
	color: #1c1e21;
}

.header-container {
    text-align: center;
    margin-bottom: 30px; /* Space below header */
    width: 100%; /* Allow text-align to work effectively */
    max-width: 1400px; /* Optional: constrain header width like main content */
}

.main-content-container {
    display: flex;
    flex-direction: column; /* Mobile: columns stack vertically */
    align-items: center;   /* Mobile: center items if they are narrower than container */
    width: 100%;
    max-width: 1400px; /* Adjust as needed for overall page width */
    padding: 0 10px; /* Add some horizontal padding */
    box-sizing: border-box;
}

.column {
    width: 100%; /* Mobile: each column takes full width */
    padding: 10px; /* Padding inside each column */
    box-sizing: border-box;
}

#column-priestess img {
    max-width: 100%; /* Make image responsive within its column */
    height: auto;
    display: block; /* Remove extra space below image */
    margin: 0 auto; /* Center image if column is wider than image */
}

#column-priestess .priestess-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
#column-priestess h1 {
  margin: 0;
  text-align: center;
}

#column-looptest .stage { display: grid; place-items: center; }
#column-looptest #viz {
  display: block;
  width: min(92vmin, 760px);  /* grows with viewport, capped */
  height: auto;
}

footer, footer p { text-align:center; padding:1.25rem 0; }
footer nav a { margin: 0 0.25rem; text-decoration:none; }
footer picture { display:block; margin:0.75rem auto 0; }

/* Mobile: Loop first, Priestess second */
@media (max-width: 1167px) {
  .main-content-container { display:flex; flex-direction:column; }
  #column-looptest  { order: 1; }
  #column-priestess { order: 2; }
}

/* Tablet/Desktop: side-by-side (your current layout) */
@media (min-width: 1168px) {
  .main-content-container { display:flex; flex-direction:row; }
  #column-priestess { order: 1; }
  #column-looptest  { order: 2; }
}

/* Media query for larger screens (e.g., tablet and desktop) */
@media (min-width: 1168px) {
    .main-content-container {
        flex-direction: row;     /* Columns side-by-side */
        justify-content: center; /* Center the two columns if they don't fill max-width */
        align-items: flex-start;  /* Columns size to content; avoid accidental overlap */
        gap: 48px;               /* Space between the two .column divs */
        /* max-width: 1400px; - already set for .main-content-container */
    }

    .column {
       width: auto;
        /* padding: 10px; - already set for general .column */
        /* box-sizing: border-box; - already set for general .column */
    }

    #column-priestess {
        flex-basis: 45%; /* Priestess column width on desktop */
        /* max-width: 500px; /* Optional max width for priestess column - adjust as needed */
        display: flex; /* Helps with managing the image inside if more control is needed */
    }

    #column-priestess img {
        /* max-width: 100%; -- This should be inherited from the general #column-priestess img style or set here */
        /* display: block; -- This should be inherited */
        /* margin: 0 auto; -- This should be inherited for horizontal centering if width is less than column */
        height: auto;
        max-height: 90vh;
        object-fit: contain;
    }

    #column-looptest {
        flex-basis: 55%; /* Loop column width on desktop */
        max-width: 700px; /* Optional max width for tetractys column - adjust as needed */
    }
}

@media (prefers-color-scheme: dark) {
	body {
		color: #d4d4d4;
		background-color: #2a2725;
	}
	a {
		color: #ff5757;
	}
	h1 a {
		color: #d4d4d4;
		text-decoration-style: dotted;
	}
	h2 a {
		color: #d4d4d4;
		text-decoration-style: dotted;
	}
	
	.inline {
		color: #d4d4d4;
		text-decoration-style: dotted;
	}
}