:root {
 --page-bgcolor: #050505;
 --page-fgcolor: white;
 --page-fontsize: clamp(1rem, 3vmin, 2rem);
 --hmaxwidth: calc(78vw / 25);
 --h1-fontsize: clamp(1em, 1.6em, var(--hmaxwidth));
 --h2-fontsize: clamp(1em, 1.5em, var(--hmaxwidth));
 --h3-fontsize: clamp(1em, 1.4em, var(--hmaxwidth));
 --h4-fontsize: clamp(1em, 1.3em, var(--hmaxwidth));
 --h5-fontsize: clamp(1em, 1.2em, var(--hmaxwidth));
 --h6-fontsize: clamp(1em, 1.1em, var(--hmaxwidth));
}

/* ==========================================================================
   CRITICAL FRAMEWORK (Structural Layout - Scrollable Content Updates)
   ========================================================================== */
body, html {
 position: relative;
 margin: 0;
 padding: 0;
 width: 100vw;
 /* Allow natural document height scroll instead of trapping viewport */
 min-height: 100vh;
}

body {
 background: none; /* Remove from body — now handled by html */
 overflow-x: clip; /* Clips horizontal overflow without creating a new scroll container */
}
/* Hide scrollbar across browsers while preserving scroll functionality */
html {
 background-color: var(--page-bgcolor);
 color: var(--page-fgcolor);
 font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 font-size: var(--page-fontsize);
 scrollbar-width: none; /* Firefox */
}

 html::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge, Opera */
 }

h1, h2, h3, h4, h5, h6 {
 white-space: nowrap;
 overflow: clip;
 text-overflow: ellipsis;
 letter-spacing: -0.02em;
}

h1 {
 font-size: var(--h1-fontsize);
}

h2 {
 font-size: var(--h2-fontsize);
}

h3 {
 font-size: var(--h3-fontsize);
}

h4 {
 font-size: var(--h4-fontsize);
}

h5 {
 font-size: var(--h5-fontsize);
}

h6 {
 font-size: var(--h6-fontsize);
}

/* Layout alignments for the central content area */
main {
 display: block;
 position: relative;
 width: 80vw;
 margin: 0 auto;
 padding-top: 18vh; /* Leaves empty air at the top so text doesn't hide behind the valance */
 padding-bottom: 50vh; /* Leaves empty aut at the bottom so text can scroll into main view area */
 z-index: 1;
}
/* Glass panel frame configurations */
article {
 padding: 1.5rem;
 border-radius: 1.5rem;
 text-align: left;
 width: 100%;
 display: flex;
 flex-direction: column;
 gap: 3rem;
}

hr {
 margin: 2rem auto;
 width: 60%;
 border: none;
 border-top: 1px solid rgba(255, 255, 255, 0.15);
}

picture {
 display: inline-block;
 width: 100%;
 max-width: 50%;
 overflow: visible;
 float: inline-end;
}

 picture img {
  width: 100%;
  height: auto;
  display: inline-block;
  object-fit: scale-down;
  margin: 1rem;
 }

*, *::before, *::after {
 box-sizing: border-box;
}