/* ROOT */

:root {
	--news-icon-size: 200px;
	--rubbish-icon-size: 140px;
}



/* ==========================================================================
   0. FONT LOADING ENGINE
   ========================================================================== */


@font-face {
	font-family: 'MitteFont';
	src: url('fonts/WymanWackFont-Regular.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

/* ==========================================================================
   1. GLOBAL ENGINE SETTINGS
   ========================================================================== */
body {
	background-color: #232425;
	background-image: url('images/chapter1-2.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	color: #ffffff;
	font-family: 'MitteFont', serif;
	margin: 0;
	padding: 0;
	position: relative;
	min-height: 100vh;
}

/* Background panel borders */
body::before {
	content: "";
	position: fixed;
	top: 0;
	bottom: 0;
	left: 80px;
	right: 80px;
	background-color: #594822;

	/*background-image: url('images/chapter2-3.jpg');
	background-size: cover;
	background-repeat: no-repeat; */

	z-index: -2; /* Keeps background behind all content blocks */
}

/* ==========================================================================
   2. BRANDING & HEADER NAVIGATION
   ========================================================================== */
/* ==========================================================================
   2. BRANDING & HEADER NAVIGATION
   ========================================================================== */
.logo {
    text-align: center;
    margin-top: 38px;
    width: 100%;
    display: block;
    transition: transform 0.3s ease;
}

.logo a {
    display: inline-block;
    text-decoration: none;
    position: relative;
    z-index: 30;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.logo a img {
    display: block;
    max-width: 500px; /* Adjust this to your preferred logo size */
    height: auto;
    width: 100%;
    margin: 0 auto; /* Centers the image */
}

.logo a:hover {
    opacity: 0.7;
    transform: scale(1.1);
}

/* Dynamic Skewed Navigation Banner */
nav {
	position: relative;
	font-family: 'MitteFont', serif;
	text-align: center;
	padding: 20px 20px;
	margin: 10px auto;
	transform: skewY(-6deg);
	z-index: 1;
}

nav::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url('images/chapter1-7.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	transform: skewY(-0.5deg);
	z-index: -1;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

nav a {
	display: inline-block;
	color: #ffffff;
	text-decoration: none;
	margin: 0 15px;
	font-size: 18px;
	font-weight: bold;
	z-index: 10;
	transition: transform 0.3s ease;
}

nav a:hover {
	opacity: 0.7;
	transition: opacity 0.3s ease;
	transform: scale(1.08);
}

/* ==========================================================================
   3. THE FLEXBOX HOME PAGE ENGINE (PC VIEW)
   ========================================================================== */
.homepage-layout {
	display: flex;
	flex-direction: row;        /* Side-by-side arrangement on wide screens */
	justify-content: center;    /* Center the layout engine blocks */
	align-items: flex-start;    /* Top-align components natively */
	gap: 100px;                  /* The browser calculates perfect column spacing */
	max-width: 1200px;
	margin: 30px auto;
	padding: 0 40px;
}

/* THE SIDEBAR CARD CONTAINER: Replaces old .newsletter::before math completely */
.newsletter-card {
	background-image: url('images/paper1.jpg');
	background-size: contain;     /* Or keep cover/100% depending on your graphic */
	background-repeat: no-repeat;
	background-position: top center;
	transform: translate(-15px, 0px);	
	max-width: 320px;
	width: 100%;
	
	  /*THE LOCK: Forces the card box to stay exactly this height, no matter the text!
	   ========================================================================== */
	height: 450px; /* Adjust this to match the exact height of your drawn asset */
	
	/* If you accidentally write too much text, this adds a clean scrollbar 
	   inside the card so it never overflows or breaks your layout frame */
	overflow-y: auto; 
	
	padding: 30px;
	display: flex;
	flex-direction: column;   
	gap: 15px;             

}

.paper-card {
	background-image: url('images/UI/banner.png');
	
	/* ==========================================================================
	   THE CHANGES: Scale up the background asset framework
	   ========================================================================== */
	background-size: 100% 100%;   /* Force the image to perfectly stretch to all 4 corners of the box */
	background-repeat: no-repeat;
	background-position: center;
	transform: rotate(3deg) translate(75px, 0px);	  
	
	max-width: 320px;             /* INCREASED from 320px: Gives the banner more room to stretch horizontally */
	width: 100%;
	position: relative;
	height: auto;                 /* Keeps it scaling perfectly based on content */
	
	padding: 40px 30px;           /* INCREASED top/bottom padding to give your text breathing room inside the image */
	display: flex;
	flex-direction: column;   
	gap: 15px;     
	z-index: 10;       
}

.boxmountain {
	max-width: 600px;
	width: 100%;
	position: relative;
	margin-left: -60px;
	margin-top: 110px;
	padding: -30px;
}

.boxmountain img {
	width: 100%;         
	height: auto;
	object-fit: contain;
	position: relative;
	z-index: 12;
}

.newhere {
	transform: rotate(0deg) translate(4px, 0px); /* FIXED: Removed the -650px vertical jump */	  
	max-width: 450px;
	width: 100%;                  /* Changed from 300% so it fits your column width */
	position: relative;
	
	/* Pulls the image up slightly so it layers right underneath the header card border */
	margin-top: 60px;            
	
	padding: 30px;
	display: flex;
	flex-direction: column;
	gap: 15px;     
	z-index: 14;   
	transform: rotate(4deg)   
}

.newhere img{
	width: 100%;                  /* Changed from 600px to scale cleanly inside the card wrapper */
	height: auto;
	object-fit: contain;
	position: relative;
	z-index: 14;
}

.newhere a img{
	width: 100%;                  /* Changed from 600px to scale cleanly inside the card wrapper */
	height: auto;
	object-fit: contain;
	position: relative;
	border-radius: 40px;
	z-index: 14;
	margin-top: -90px;
	margin-left: -130px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
	transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.newhere a img:hover {
	/* FIXED: Pulls the image UP (-15px) into your cursor so the hover state doesn't glitch out */
	transform: scale(1.05) rotate(2deg);
	cursor: pointer;
}

.latestchapter {
	transform: rotate(3deg) translate(4px, 0px); /* FIXED: Removed the -650px vertical jump */	  
	max-width: 450px;
	width: 100%;                  /* Changed from 300% so it fits your column width */
	position: relative;
	
	/* Pulls the image up slightly so it layers right underneath the header card border */
	margin-top: -60px;            
	
	padding: 30px;
	display: flex;
	flex-direction: column;   
	gap: 15px;     
	z-index: 2;      
}

.latestchapter a img {
    width: 100%;
    height: 450px; /* Tall enough to show a good preview */
    object-fit: cover;
    object-position: center 25%; /* Shows the top portion of the comic */
    /* OR for a more dynamic look: */
    /* object-position: 20% 30%; /* Focus on a specific area */
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Make them bounce up slightly on hover just like your comic style! */
.latestchapter a img:hover {
	/* FIXED: Pulls the image UP (-15px) into your cursor so the hover state doesn't glitch out */
	transform: scale(1.05) translateY(30px) rotate(-3deg);
	cursor: pointer;
}
/* Clean text styles inside the card block */
.newsletterheading {
	font-size: 26px;
	text-decoration: underline;
	font-weight: bold;
	margin: 0;
}

/* Clean text styles inside the card block */
.paperheading {
	font-size: 28px;
	text-decoration: underline;
	margin: 0;
	text-align: center;
	transform: translateX(-10px);
}

.normal-card {
	background-image: url('images/UI/banner.png');
	
	/* ==========================================================================
	   THE CHANGES: Scale up the background asset framework
	   ========================================================================== */
	background-size: 100% 100%;   /* Force the image to perfectly stretch to all 4 corners of the box */
	background-repeat: no-repeat;
	background-position: center;
	transform: rotate(-3deg) translate(10px, 0px);	  
	
	max-width: 320px;             /* INCREASED from 320px: Gives the banner more room to stretch horizontally */
	width: 100%;
	position: relative;
	height: auto;                 /* Keeps it scaling perfectly based on content */
	
	padding: 30px 30px;           /* INCREASED top/bottom padding to give your text breathing room inside the image */
	display: flex;
	flex-direction: column;   
	gap: 15px;     
	z-index: 10;       
}

.normalheading {
	font-size: 26px;
	text-decoration: underline;
	margin: 0;
	text-align: center;
	transform: translateX(-10px);
}

.creditsheading {
	padding-top: 30px;
	font-size: 46px;
	text-decoration: underline;
	margin: 0;
	text-align: center;
	transform: translateX(-10px);
}

.newsletter-title {
	font-size: 22px;
	font-weight: bold;
	margin: 0;
}

.newsletterdate {

	font-size: 14px;
	color: #ffffff;
	margin: 0;
}

.newsletterbody {
	font-size: 18px;
	line-height: 1.5;
	margin: 0;
}

.readmore a {
	display: inline-block;
	color: #ffffff;
	text-decoration: underline;
	font-weight: bold;
	font-size: 16px;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.readmore a:hover {
	opacity: 0.7;
	transform: scale(1.08);
}

/* MAIN CONTENT BLOCK (RIGHT COLUMN) */
.main-content {
	flex: 1;                    /* Allows content block to naturally claim remaining space */
	max-width: 400px;
}


/* ==========================================================================
   4. GRID SHAPE PATTERNS (SKETCHBOOK & COMMUNICATOR LABELS)
   ========================================================================== */
.news, .rubbish {
	background-color: #a9986a;
	border-radius: 0;

	padding: 20px;
	margin-bottom: 30px 0px;
	width: 135%;
	background-image: url('images/paper1.jpg');
	background-size: cover;     /* Or keep cover/100% depending on your graphic */
	background-repeat: no-repeat;
	transform: translateX(-100px);
	z-index: -5;
}

/* Activated unified grid system layout rules for artwork */
.news.grid, .rubbish.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, max-content));
	justify-content: center;
	gap: 130px;
}

.news.grid a img {
	display: inline-block;
	max-width: var(--news-icon-size, 120px);
	max-height: var(--news-icon-size, 120px);
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform 0.2s ease;
}


.news.grid a img:hover {
	transform: scale(1.15) rotate(-4deg);
	cursor: pointer;       
}

.rubbish.grid a img {
	display: inline-block;
	width: var(--rubbish-icon-size, 64px);
	height: var(--rubbish-icon-size, 64px);
	object-fit: cover;
	object-position: center;
	transition: transform 0.2s ease;
}

.rubbish.grid a img:hover {
	transform: scale(1.15) rotate(-4deg);
	cursor: pointer;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.content {
	font-size: 28px;
	width: 150%;
	max-width: 800px;
	font-weight: normal;
	transform: translateX(-110px);
}

.credit_text {
	padding-top: 20px;
	font-size: 28px;
	width: 150%;
	max-width: 800px;
	transform: translateX(-55px);
}

/* ==========================================================================
   5. COPYRIGHT PANEL (FOOTER)
   ========================================================================== */
.copyright {
	position: relative;
	font-family: 'MitteFont', serif;
	text-align: center;
	padding: 20px;
	margin: 60px auto 30px;
	z-index: 5;
	transform: skewY(6deg);
}

.copyright::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #111111;
	background-image: url('images/chapter1-7.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	transform: skewY(-0.5deg);
	z-index: -1;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.socials {
	display: flex;
	position: relative;
	gap: 16px;
	max-width: 1200px;
	margin: 20px auto 0 auto;
	padding: 0px 40px; /* Perfectly matches your sidebar's alignment */
	transform: rotate(-6deg) translate(0px, -45px);
	z-index: 150;
}

.socials a img {
	width: 94px; /* Keeps them neat and compact like your square sketch layout */
	height: 94px;
	object-fit: contain;
	transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	border-radius: 10px;
}

/* Make them bounce up slightly on hover just like your comic style! */
.socials a img:hover {
	transform: scale(1.1) translateY(-5px) rotate(-3deg);
	cursor: pointer;
}

.centralheading {
	position: relative;
	display: flex;
	text-align: center;
	text-decoration: underline;
	align-items: center;
	flex-direction: column;
	padding: 30px;
	margin: 30px 0px;
	font-size: 32px;
	z-index: 5;
}

/* ==========================================================================
   6. RESPONSIVE PHONE TRANSLATION ENGINE (THE SMART FLIPPER)
   ========================================================================== */
@media screen and (max-width: 740px) {
	/* Bring layout panels inward so text blocks have room on narrow mobile viewports */
	body::before {
		left: 15px;
		right: 15px;
}

	/* MAGIC TRICK: Converts horizontal columns into a vertical column stack */
	.homepage-layout {
		flex-direction: column;
		align-items: center;
		padding: 0 20px;
		gap: 35px;
}

	/* Expand cards to perfectly frame mobile view dimensions naturally */
	.newsletter-card,
	.paper-card,
	.normal-card,
	.main-content {
		max-width: 100%;
		width: 100%;
		box-sizing: border-box;
}