body { padding: 0; margin: 0; font-family: 'Lato', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
			
			#main-container {  
				position: relative; 
			  	width: 100%; 
			  	overflow: hidden;  
			  	display: block;
			}
			
			.video-head {
				position: relative;
				background-color: #000;
				background-image: url('https://mcmillonstudio.uark.edu/_resources/images/hero_video_thumb_1.jpg');
				background-size: cover;
				overflow: hidden;
				padding: 0;
				box-shadow: rgba(0, 0, 0, 0.811) 2px .5px 1px 1px;
			}

			.ambient-video { 
				position: relative;
				width: 100%;
				z-index: 0;
			}

			.ambient-video iframe {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				z-index: 1;		
			}

			.video-head::before { 
				content: ""; 
				position: absolute;
				inset: 0; 
				background:
					radial-gradient(80% 60% at 50% 40%, rgba(8,13,30,0.1), rgba(8,13,30,0.75)),
					linear-gradient(180deg, rgba(8,13,30,0.15) 0%, rgba(8,13,30,0.85) 100%);
				z-index: 1;
				pointer-events: none;
			}

			.overlay-inner {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 90%;
				padding-top: 60px;
				padding-bottom: 120px;
				text-align: left;
				color: #fff;
				z-index: 2;
			}			
			
			.content-wrap { 
			  	text-align: center; 
			  	display: grid; 
			  	gap: 1rem; 
			  	justify-items: center; 
			}
			
			/* SVG title drawing effect */
			#titleSVG {
			  width: min(1200px, 95vw);
			  height: auto;
			  display: block;
			}

			/* Shared text styles */
			#titleSVG text {
			  font-family: 'Lato', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* sans-serif — Lato */
			  font-weight: 900;
			  letter-spacing: 0.02em;
			  fill: transparent; /* Start transparent; we fill after stroke animation */
			  paint-order: stroke fill;
			}

			/* First line larger than second line for visual hierarchy */
			#titleSVG text.line-1 { font-size: 180px; }
			#titleSVG text.line-2 { font-size: 130px; }

			/* Draw effect for each letter */
			#titleSVG .draw-letter {
			  stroke: rgba(255, 255, 255, 0.95);
			  stroke-width: 2.5;
			  stroke-linecap: round;
			  stroke-linejoin: round;
			  stroke-dasharray: 1000; /* Big number to cover any outline length */
			  stroke-dashoffset: 1000;
			  animation: draw 0.85s ease forwards; /* delay is assigned per-letter via JS */
			  filter: drop-shadow(0 6px 24px rgba(0,0,0,0.45));
			}

			@keyframes draw {
			  to { stroke-dashoffset: 0; }
			}

			/* After all letters in a line finish, gently fill the text */
			#titleSVG text.filled {
			  animation: fillIn 0.9s ease forwards;
			}
			@keyframes fillIn {
			  from { fill: rgba(255,255,255,0); }
			  to   { fill: rgba(255,255,255,1); }
			}

			/* Accessibility: respect reduced motion */
			@media (prefers-reduced-motion: reduce) {
			  #titleSVG .draw-letter {
				animation: none !important;
				stroke-dashoffset: 0;
			  }
			  #titleSVG text {
				fill: #fff;
			  }
			}

			/* CTA styles */
			.btn-ghost {
			  --bs-btn-color: #ffffff;
			  --bs-btn-border-color: rgba(255,255,255,0.6);
			  --bs-btn-hover-bg: rgba(255,255,255,0.1);
			  --bs-btn-hover-border-color: rgba(255,255,255,0.9);
			  --bs-btn-active-bg: rgba(255,255,255,0.2);
			  --bs-btn-active-border-color: #ffffff;
			  backdrop-filter: saturate(140%) blur(2px);
			}		

			.dropping-lead {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 0.5rem;
				text-align: center;
				width: 100%;
				font-size: 30px;
			}

			.dropping-texts {
				display: inline-block;
				position: relative;
				height: 1em;
				min-width: 200px; 
				text-align: left;
			}

			.dropping-texts > div {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				opacity: 0;
				line-height: 1em;
  				font-weight:400;  			
				animation: dropIn 8s infinite; /* Adjust timing as needed */
			}

			.dropping-texts > div:nth-child(1) { animation: roll 5s linear infinite 0s; }
			.dropping-texts > div:nth-child(2) { animation: roll 5s linear infinite 1s; }
			.dropping-texts > div:nth-child(3) { animation: roll 5s linear infinite 2s; }
			.dropping-texts > div:nth-child(4) { animation: roll2 5s linear infinite 3s; }

			@keyframes roll {
				0% { font-size:0px; opacity:0; margin-left:-30px; margin-top:0px; transform: rotate(-25deg); }
				3% { opacity:1; transform: rotate(0deg); }
				5% { font-size:inherit; opacity:1; margin-left:0px; margin-top:0px; }
				20% { font-size:inherit; opacity:1; margin-left:0px; margin-top:0px; transform: rotate(0deg); }
				27% { font-size:0px; opacity:0.5; margin-left:20px; margin-top:100px; }
				100% { font-size:0px; opacity:0; margin-left:-30px; margin-top:0px; transform: rotate(15deg); }
			}

			@keyframes roll2 { 
				0% { font-size:0px; opacity:0; margin-left:-30px; margin-top:0px; transform: rotate(-25deg); }
				3% { opacity:1; transform: rotate(0deg); }
				5% { font-size:inherit; opacity:1; margin-left:0px; margin-top:0px; }
				30% { font-size:inherit; opacity:1; margin-left:0px; margin-top:0px; transform: rotate(0deg); }
				37% { font-size:1500px; opacity:0; margin-left:-1000px; margin-top:-800px; }
				100% { font-size:0px; opacity:0; margin-left:-30px; margin-top:0px; transform: rotate(15deg); }
			}			
			
			@media (max-width: 576px) { .dropping-lead { display: none;} }

			@import url('https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap');

			.embossed { font-family: "Syne Mono", cursive !important; 
				font-size: 1.2em; 
				box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); 
				text-shadow: 
					-1px 1px 2px rgba(0, 0, 0, 0.5), 
					1px -1px 0 rgba(255, 255, 255, 0.9);
			}	

			/* button movement effects */

			.btn:hover {
            	text-decoration: none;
            	letter-spacing: 1px;
            	transform: translateY(-1px) rotate(-1deg);
            	padding-left: 13px;
            	padding-right: 13px;
			}

			/* Polaroid Pictures */
			polaroid {
				background: #ffffff;
				display: inline-block;
				margin: 55px 75px 30px;
				padding: 15px 15px 30px;
				text-align: center;
				text-decoration: none;
				-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
				-moz-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
				box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
				-webkit-transition: all .20s linear;
				-moz-transition: all .20s linear;
				transition: all .20s linear;
				cursor: pointer;
				position: relative;
				transform: translate(-3px) rotate(-3deg);
			  }
			
			polaroid img {
				display: block;
				width: 400px;
			  }

			polaroid:hover {
            	text-decoration: none;
            	letter-spacing: 1px;
            	transform: translateY(2px) rotate(2deg);
            	padding-left: 13px;
            	padding-right: 13px;
			}

	/* Feed Styles for Blog Module
-------------------------------------------------- */
			.postfeed article { margin-top: 20px; margin-bottom: 20px; }
			.thestory { margin-bottom: 5px;	border-radius: 6px; }
			.thestory h2 a {  color: #3f3f3f !important; font-size: 26px; font-weight: 700; line-height: 1 !important; text-decoration: none !important; }		
			.thestory img {width: 250px; border-radius: 0px;} 	
			.thestory .whodat { font-size: 11px !important; color: #2f2f2f!important; font-weight: 800;  }
			#main-content .postfeed h2 { margin-top: 0px; line-height: 1; }