/* ===========================
   Base layout / global resets
   =========================== */

html, body
{
	height: 100%;
	margin: 0;
	overflow-y: hidden;
	overflow-x: hidden;
}

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

ul, ol
{
	list-style: none;
	margin: 0;
	padding: 0;
}

figure
{
	margin: 0;
}

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

a:hover
{
    border: 3px outset white;
}

a:active
{
    border: 3px inset white;
}

body
{
	display: flex;
	flex-direction: column;
	min-height: 100vh;

	align-items: center;          /* horizontal centering for framed pages */
	text-align: center;

	background: radial-gradient(circle at center, #222 0%, #000 70%);
	color: #ffffff;

	font-family: "Lato", Helvetica, Arial, sans-serif;
}

/* ===========================
   Framed content panel pages
   (About / Contact default)
   =========================== */

body.contact main, body.about main
{
	border: 2px solid #444;
	border-radius: 15px;

	padding: 2rem 3rem;
	background: rgba(0, 0, 0, 0.6);

	box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);

	max-width: 700px;
	margin: 2rem 1rem;
}

/* Contact-only: vertically center panel */
body.contact
{
	justify-content: center;
}

body.contact main
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

/* About-only: vertically center panel */
body.about
{
	justify-content: center;
}

body.about main
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

/* Long email wrapping helper */
#email
{
	overflow-wrap: anywhere;
	word-break: break-word;
	margin: 0;
}

/* Typography */
h1
{
	margin-top: 0;
}

p
{
	color: #e0e0e0;
}

/* Button-style links INSIDE the framed panel */
body.contact main a, body.about main a
{
	color: #808080;
	font-size: 1.25rem;

	border: 3px solid black;
	border-radius: 25px;
	padding: .5rem 1.5rem;
	display: inline-block;
}

body.series main a
{
	color: #808080;
	font-size: 1.25rem;

	border: 3px solid #404040;
	border-radius: 12px;
	padding: .5rem .1rem;
	display: inline-block;
}


body.contact main a:hover
{
	color: #ffffff;
	border: 3px outset #ffffff;
}

/* Plain bottom-center footer link (Home) */
body > footer
{
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	transform: translateX(-50%);
	margin: 0;
	padding: 0;
	z-index: 20;
}

footer a
{
	color: #ffffff;
	font-size: 1rem;
}

/* ===========================
   Series pages
   Fixed header/footer. Main scrolls under.
   =========================== */

body.series
{
	--series-header-h: 100px;
	--series-footer-h: 56px;

	overflow-y: auto;           /* prevent body scroll; main will scroll */
}

/* Fixed header */
body.series > header
{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;

	
	background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,1) 100%);
	
	padding: 1rem 1.25rem;
	min-height: var(--series-header-h);

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

body.series > header h1
{
	margin: 0 0 .25rem 0;
}

body.series > header p
{
	margin: 0;
	color: #d0d0d0;
}

/* Main scroll region (under chrome) */
body.series > main
{
	/* let it stretch but not overflow */
	width: 90%;                 /* take up most of the viewport */
	max-width: 80rem;           /* ≈1280px, but only as an upper bound */
	min-width: 20rem;           /* don’t shrink past readability */

	margin: 0 auto;             /* center horizontally */

	/* padding clears header/footer */
	padding:
		calc(var(--series-header-h) + 1rem)
		1rem
		calc(var(--series-footer-h) + 1rem);

	
	
	background: rgba(0, 0, 0, 0.6);
	box-shadow: 0 0 20px rgba(0,0,0,0.8);
}

/* Fixed footer */
body.series > footer
{
	position: fixed;
	left: 50%;
	bottom: 0rem;
	transform: translateX(-50%);
	z-index: 10;
}

/* ===========================
   Series list: one book per row
   Image left, details right
   =========================== */

/* Series list items: strict row height */
body.series main nav ul > li
{
	border: 2px solid #444;
	border-radius: 25px;
	background: rgba(0, 0, 0, 0.55);
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);

	padding: 1rem;

	display: grid;
	grid-template-columns: 20rem 1fr;  /* fixed left column, flexible right column */
	gap: 1rem;

	height: 29.4rem;        /* fixed height */
	overflow: hidden;       /* no scrollbars */
}

/* Flatten figure to grid children */
body.series main nav ul > li > figure
{
	display: contents;
}

/* Left column (thumbnail link) */
body.series main nav ul > li > figure > a
{
	grid-column: 1;
	display: flex;           /* center image in its box */
	align-items: center;
	justify-content: center;

	height: 100%;
	overflow: hidden;

	border: 3px solid #404040;
	border-radius: 25px;
}

body.series main nav ul > li > figure > a:hover
{
	border: 3px outset #ffffff;
}

/* Image fits the 29.4rem height, no scroll */
body.series main nav ul > li > figure > a > img {
	height: 100%;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: center;
	display: block;            /* avoid inline whitespace gaps */
	aspect-ratio: 295 / 413;   /* matches your intended box; reduces CLS & sizing warnings */
	opacity: .5;
	transition: opacity .2s ease;
}

body.series main nav ul > li > figure > a:hover > img
{
	opacity: 1;
}

/* Right column (figcaption fills full row) */
/* Figcaption wrapper */
body.series main nav ul > li > figure > figcaption
{
	grid-column: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;  /* header top, footer bottom */
	height: 100%;
	overflow: hidden;
	padding: .5rem;

	border: 3px solid #404040;
	border-radius: 25px;

	/* remove conflicting doubles; keep figcaption itself neutral */
	text-align: left;
}

/* Header at top */
body.series main nav ul > li > figure > figcaption > header
{
	flex: 0 0 auto;
	margin-bottom: 0;
	border: 1px solid #404040;
	border-radius: 12px;
	text-align: center;
	margin-bottom: .5rem;
}

/* Middle <p>: center text horizontally (and vertically if you want) */
body.series main nav ul > li > figure > figcaption > p
{
	flex: 1 1 auto;           /* take up remaining vertical space */
	align-items: flex-start;  /* text sits at the top */
	justify-content: left;  /* center horizontally */
	margin: 0rem;            /* breathing room */
	color: #e0e0e0;
	padding: .5rem;

	border: 1px solid #404040;
	border-radius: 12px;
	text-align: Left;       /* center-align multiline text */
}

/* Footer at bottom */
body.series main nav ul > li > figure > figcaption > footer
{
	flex: 0 0 auto;
	margin-top: 0;
	color: #c8c8c8;
	font-style: italic;

	border: 1px solid #404040;
	border-radius: 12px;
	text-align: center;
	margin-top: .5rem;
}




/* ===========================
   Responsive: stack on mobile
   =========================== */

@media (max-width: 720px)
{
	body.series main nav ul > li
	{
		grid-template-columns: 1fr;       /* image above details */
	}

	body.series main nav ul > li > figure > a,
	body.series main nav ul > li > figure > figcaption
	{
		grid-column: 1;
	}

	body.series main nav ul > li > figure > a > img
	{
		height: auto;                      /* natural height on narrow screens */
		width: 100%;
		object-fit: contain;
	}
}

/* Page footer only (not figcaption footers) */
body > footer
{
	position: fixed;
	left: 50%;
	right: 0;
	bottom: 0;
	z-index: 10;
	width: 100%;

	/* Gradient background: black at bottom → transparent at top */
	background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,.75) 100%);

	text-align: center;
	
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	
}

/* Home link styling (yours, untouched) */
body > footer a
{
	color: #808080;
	text-decoration: none;
	font-size: 1.25rem;
	border: 3px solid black;
	border-radius: 25px;
	padding: .5rem 1.5rem;
	margin-bottom: 1.5rem;
}

body > footer a:hover
{
	color: white;
	border: 3px outset white;
}

/* Mobile: unlock height and stacking to avoid text clipping */
@media (max-width: 720px)
{
	body.series main nav ul > li
	{
		grid-template-columns: 1fr; /* image above text */
		height: auto; /* unlock fixed height */
		overflow: visible; /* allow text to flow */
		padding: 1rem;
	}

	body.series main nav ul > li > figure > a,
	body.series main nav ul > li > figure > figcaption
	{
		grid-column: 1;
		height: auto;
	}

	body.series main nav ul > li > figure > a > img
	{
		width: 100%;
		height: auto;
		object-fit: contain;
		opacity: .5;
	}

	body.series main nav ul > li > figure > figcaption
	{
		display: flex;
		flex-direction: column;
		gap: .5rem;
		text-align: left;
	}

	/* Middle paragraph: your stable behavior on mobile */
	body.series main nav ul > li > figure > figcaption > p
	{
		flex: 0 0 auto; /* do not stretch vertically on mobile */
		padding: .5rem;
		text-align: left;
	}
}