@charset "utf-8";
address,
article,
aside,
button,
blockquote,
body,
dd,
dialog,
dl,
dt,
fieldset,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
li,
nav,
ol,
p,
pre,
section,
td,
th,
tr,
ul {
  margin: 0;
  padding: 0;
}
body{
  background: #fbfbf5;
  font-family: "W_Epson";
  margin: 0;
  padding: 0;
  width:100vw;
  overflow-x:hidden !important;	
  color: black;	
/*  -webkit-font-smoothing: antialiased;*/
/*  -moz-osx-font-smoothing: grayscale;*/
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
/*	-webkit-font-smoothing:antialiased;  */
}

html, body {
  overflow-x: hidden;
  width: 100vw;
}

@font-face {
  font-family: 'W_Epson'; 
  src: url('EPSON MX-80 W E Z.woff2') format('woff2'),
       url('EPSON MX-80 W E Z.woff') format('woff');

}


/*@font-face 	{ font-family: "Romain_2"; src: url("MonumentGrotesk-Semi-Mono.otf");}*/

a { color: black; text-decoration:none;}

html { -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */ } 

h1 {
  font-family: "W_Epson";
  font-size: 12px;
  line-height: 1.2em;	
  margin-bottom:0;
  margin-top:0;	
  font-weight:300;	
  text-transform:uppercase; 

}



.lazyload,
.lazyloading {
	opacity: 0;
}
.lazyloaded {
	opacity: 1;
	transition: opacity 450ms;
}

.transition-fade {
    transition: 0;
    opacity: 1;
}

html.is-animating .transition-fade{
    opacity: 0;
}


.mainframe 				{opacity:1; transition:opacity 1s;}
.mainframe.is-hidden    {opacity:0;}


* {
  box-sizing: border-box;
}

.frame2 {
width:99%; box-sizing: border-box;
}

.frame3 {
position:relative; width:99%; box-sizing: border-box;
}

/* FRAME */
.frame {
  position: relative;
  width: 99%;
  height: auto;
  overflow: hidden;
  will-change: height;
  box-sizing: border-box;	
}
.frame:first-child {
  border-bottom: none;
}

/* Update your existing .impressions class */
.impressions {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  padding-left: 20px;
  padding-right: 60px;		
  overflow: hidden; /* Added: Clips the pseudo-element to exact container height */
}


h2 {
  font-family: "W_Epson";
  margin: 0;
  padding: 0;
  font-size: 11.5px;
  text-shadow: 0px 0 0 currentColor;
  font-weight:bold;
  line-height: 1.2em;	
  text-align: left;
  /* Prevent weird breaking */
  word-wrap: break-word;
  text-transform:uppercase;
}

.megaTpe {
  font-family: "W_Epson";
  margin: 0;
  padding: 0;
  font-size: 60.5px;
  text-shadow: 0px 0 0 currentColor;
  font-weight:bold;
  line-height: 1.2em;	
  text-align: left;
  /* Prevent weird breaking */
  word-wrap: break-word;
  text-transform:uppercase;
}

/*
#frame-static .impressions::before,
#frame-static_2 .impressions::before {
  content: "|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A"; 
  white-space: pre;
  position: absolute;
  left: 0;
  top: 0;
  font-family: "W_Epson";
  font-size: 12.5px;
   text-shadow: 0.10px 0 0 currentColor;	
  font-weight: normal;
  line-height: 1.2em; 
  color: black;
}

#frame-static .impressions::after,
#frame-static_2 .impressions::after {
  content: "|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A"; 
  white-space: pre;
  position: absolute;
  right: 0; 
  top: 0;
	 text-shadow: 0.10px 0 0 currentColor;
  font-family: "W_Epson";
  font-size: 12.5px;
  font-weight: normal;
  line-height: 1.2em; 
  color: black;
}
*/



.content-wrapper {
  position: relative; /* Acts as the anchor for the absolute pipes */
  width:40%; 
	box-sizing: border-box;
}

.pipe-vertical {
  position: absolute;
  top: 0;
  font-family: "W_Epson";
  font-size: 12.5px;
  line-height: 1.2em;
  color: black;
  text-shadow: 0.10px 0 0 currentColor;
  white-space: pre;
  pointer-events: none; /* Allows clicking through the pipes */
}

.pipe-left { left: 0; }
.pipe-right { right: 0; }

.generalPadding {
	  padding-left: 20px;
}

.panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}

.frame:not(#frame-weather) .panel:first-child {
  position: relative;
  opacity: 1;
}

.caption3 {
  position: absolute;
  opacity: 0;
  display: none;
}

/* --- TYPOGRAPHY ANIMATION STYLES --- */

/* Wrapper for whole words to prevent mid-word breaks */
.word {
  display: inline-block;
  white-space: nowrap; /* Forces chars inside to stay together */
}

/* Individual characters */
.char {
  display: inline-block;
  white-space: pre;
  opacity: 0;
}

.footerStyle {
  position: relative;
  bottom: 0.25em;
  right: 0;
  padding-top: 1em;
  padding-left: 1vw;
  display: flex;
  width: 30vw;
  gap: 10px;
}

#NYtime {
  /* Forces all numbers to be the same width */
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;

  /* Optional: Set a min-height/width to reserve space before JS loads */
  min-height: 1.2em;
}

.headHolder{box-sizing: border-box; position:absolute; top:0; left:0; min-height:100dvh; padding:1%; width:100vw; display: flex; justify-content:end; align-items:center; flex-wrap:wrap;flex-direction:column; z-index:1000;}


.glitch-container {box-sizing: border-box; position:absolute; top:0; min-height:100dvh; padding:1%; width:100vw; display: flex; justify-content:end; align-items:start; flex-wrap:wrap;flex-direction:column; z-index:1000;}

.forecastHolder {
box-sizing: border-box; position:fixed; bottom:0; left:0; min-height:100dvh; padding:1%; width:100vw; display: flex; justify-content:end; align-items:center; flex-wrap:wrap;flex-direction:column; z-index:1000;
}

.castArchive {min-height:50dvh; position:relative;  top:0; box-sizing: border-box; left:0; padding:1%; width:100vw; z-index:100000; background: #fbfbf5;}

.archiveFlex {width:100%; display:flex; gap:10px; flex-direction:row;}

@media only screen and (max-height: 1000px) {
		
}	

@media only screen and (max-width: 800px) {
	
.archiveFlex {width:100%; display:flex; gap:10px; flex-direction:row;}
	
	
.castArchive {min-height:100dvh; position:relative;  top:0; box-sizing: border-box; left:0; padding:1%; width:100vw; z-index:100000; background: #fbfbf5;}	
	
.forecastHolder {
box-sizing: border-box; position:fixed; bottom:0; left:0; min-height:100dvh; padding:1%; width:100vw; display: flex; justify-content:end; align-items:center; flex-wrap:wrap;flex-direction:column; z-index:1000;
}	
	
.frame2 {
width:99%; box-sizing: border-box;
}

/* FRAME */
.frame {
  box-sizing: border-box;	
  position: relative;
  width: 99%;
  height: auto;
  overflow: hidden;
  will-change: height;
}
.frame:first-child {
  border-bottom: none;
}
	
	
.impressions {
  box-sizing: border-box;
  position: relative;
  width: 99%;
  padding-left: 20px;
  padding-right: 40px;	
}	
	
.generalPadding {
	  padding-left: 20px;
}	
	
/*
#frame-static .impressions::before,
#frame-static_2 .impressions::before {
  content: "|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A"; 
  white-space: pre;
  position: absolute;
  left: 0;
  top: 0;
  font-family: "W_Epson";
  font-size: 9.5px;
   font-weight:bold;
text-shadow: 0.10px 0 0 currentColor;	
  line-height: 1.2em; 
  color: black;
}
	
#frame-static .impressions::after,
#frame-static_2 .impressions::after  {
  content: "|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A"; 
  white-space: pre;
  position: absolute;
  right: 0; 
  top: 0;
  font-family: "W_Epson";
  font-size: 9.5px;
  text-shadow: 0.10px 0 0 currentColor;	
   font-weight:bold;
  line-height: 1.2em; 
  color: black;
}	*/	
	
	
h2 {
  font-family: "W_Epson";
  margin: 0;
  padding: 0;
  font-size: 10.5px;
  text-shadow: 0.10px 0 0 currentColor;
  font-weight:bold;
  line-height: 1.2em;
  text-align: left;
  /* Prevent weird breaking */
  word-wrap: break-word;
  text-transform:uppercase;
}
	

}

@media screen and (max-width: 932px) and (orientation: landscape) {
	
.frame2 {
width:97%; box-sizing: border-box;
}

/* FRAME */
.frame {
  box-sizing: border-box;	
  position: relative;
  width: 97%;
  height: auto;
  overflow: hidden;
  will-change: height;
}
.frame:first-child {
  border-bottom: none;
}
	
.frame3 {
position:relative; width:97%; box-sizing: border-box;
}	
	
.impressions {
  box-sizing: border-box;
  position: relative;
  width: 99%;
  padding-left: 20px;
  padding-right: 40px;	
}	
	
.generalPadding {
	  padding-left: 20px;
}	
	
	
	
h2 {
  font-family: "W_Epson";
  margin: 0;
  padding: 0;
  font-size: 10px;
  text-shadow: 0.10px 0 0 currentColor;
  font-weight:bold;
  line-height: 1.2em;
  text-align: left;
  /* Prevent weird breaking */
  word-wrap: break-word;
  text-transform:uppercase;
}


	
}	

*:focus {
outline: 0;
outline: none;
}