@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* ============================================
   BASE
   ============================================ */

body
{
	font-family: 'Noto Serif', 'Georgia', 'Times New Roman', serif;
	font-size: 1.05rem;
	line-height: 1.8;
	color: #1a1a1a;
	background: #fafafa;
}

/* ============================================
   LAYOUT
   ============================================ */

.container
{
	max-width: 800px;
	margin: 2rem auto;
	padding: 2rem;
	background: white;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6
{
	font-family: 'Noto Sans', 'Arial', 'Helvetica', sans-serif;
	font-weight: 600;
	color: #1a1a1a;
}

h1, h2, h3, h4 { text-align: center; }

h1
{
	font-size: 1.8rem;
	margin-bottom: 1rem;
}

h2
{
	font-size: 1.4rem;
	margin: 2rem 0 1rem 0;
}

h3
{
	font-size: 1.1rem;
	margin: 1.5rem 0 0.5rem 0;
}

p { margin-bottom: 1.25rem; }
.center { text-align: center; }
.large { font-size: 1.1em; }

.separator
{
	text-align: center;
	color: #0433FF;
}

.poem
{
	margin-right: 3em;
	margin-left: 6em;
	line-height: 1.45em;
	font-family: "Noto Serif","Times New Roman",Georgia,serif;
}

blockquote.poem
{
	margin: 1.5em 2em;
	padding: 0.5em 0;
	font-family: "Noto Serif","Times New Roman",Georgia,serif;
	line-height: 1.8;
	color: #2c2c2c;
}

blockquote.poem .stanza { margin-bottom: 1.2em; }

blockquote.letter p
{
	margin: 0.3em 0;
}

blockquote.letter p:first-child { margin-top: 0; }

blockquote.letter p:last-child { margin-bottom: 0; }

ul
{
	text-decoration: none;
	list-style-type: none;
}

.bibliography li
{
	padding-left: 1.5em;
	text-indent: -1.5em;
}

.hang li
{
	padding-left: 1.5em;
	text-indent: -1.5em;
}

table
{
	border-collapse: collapse !important;
	/* Overrides all parent styles */
	table-layout: fixed;
	margin-right: auto;
	margin-left: auto;
	font-family: "Noto Serif";
	font-size: 0.9rem;
}

.no-wrap { white-space: nowrap; }

.novel-title
{
	margin-bottom: 0.5rem;
	/* Pushes the subtitle just a little bit below */
	/*  font-weight: normal;   Literary titles often look better not overly bold */
}

.novel-subtitle
{
	font-size: 1.25rem;
	/* Significantly smaller than the H1 */
	font-style: italic;
	/* Classic book typography trait for subtitles */
	color: #555555;
	/* Slightly softer than pure black to reduce visual weight */
	margin-top: 0;
	/* Prevents default paragraph spacing from pushing it too far */
	text-align: center;
}

/* Unique color and hover effects for tippy asterisks */
.info-r { color: #ff0000; }

/* Your existing red */
.info-b { color: #0000ff; }

/* Your existing blue */
.info-d { color: #d46b08; }

/* DeepSeek orange */
.info-g { color: #009051; }

/*Moss Green */
/* Shared hover/focus effects (applies to all) */
[class^="info-"]:hover,
[class^="info-"]:focus
{
	opacity: 1;
	text-shadow: 0 0 2px currentColor;
	/* Uses each class's color */
}

p.caption
{
	text-align: center;
	font-family: 'Noto Sans', 'Arial', 'Helvetica', sans-serif;
}

.stage
{
	font-variant: small-caps;
	color: maroon;
}

.namecaps
{
	font-variant: small-caps;
	color: maroon;
	font-size: 1.1em;
}

/* ============================================
   Lists
   ============================================ */

ul.a { list-style-type: circle; }
ul.b { list-style-type: disc; }
ul.c { list-style-type: square; }
ol.f { list-style-type: decimal; }
ol.g { list-style-type: decimal-leading-zero; }
ol.n { list-style-type: lower-alpha; }
ol.o { list-style-type: lower-greek; }
ol.p { list-style-type: lower-latin; }
ol.q { list-style-type: lower-roman; }
ol.r { list-style-type: upper-alpha; }
ol.s { list-style-type: upper-latin; }
ol.t { list-style-type: upper-roman; }
ol.u { list-style-type: none; }
ol.v { list-style-type: inherit; }
ol p,ul p { margin-bottom: 0; }

/* ============================================
   TOP NAVIGATION
   ============================================ */

.top-nav
{
	font-family: 'Noto Sans', 'Arial', 'Helvetica', sans-serif;
	font-size: 0.9rem;
	padding-bottom: 0.75rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid #e9ecef;
	color: #666;
}

.top-nav a
{
	color: #4a6fa5;
	text-decoration: none;
	transition: color 0.15s;
}

.top-nav a:hover
{
	color: #2a4a7a;
	text-decoration: underline;
}

.top-nav .sep
{
	margin: 0 0.4rem;
	color: #ccc;
}

/* ============================================
   DETAILS / SUMMARY
   ============================================ */

details { margin-top: 1.5rem; }

summary
{
	cursor: pointer;
	font-weight: 600;
	padding: 0.75rem 1rem;
	background: #eef2f6;
	border-radius: 6px;
	user-select: none;
	transition: background 0.2s;
	font-size: 1.1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

summary:hover { background: #e2e8f0; }

details[open] summary
{
	background: #dbe4ee;
	border-radius: 6px 6px 0 0;
}

/* Custom arrow */
summary::after
{
	content: "▸";
	font-size: 1.2rem;
	transition: transform 0.25s ease;
	color: #4a6fa5;
}

details[open] summary::after { transform: rotate(90deg); }

/* ============================================
   AUTHOR GRID
   ============================================ */

.author-grid
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 0.5rem 1.5rem;
	padding: 1.25rem 1rem;
	background: #f8f9fa;
	border-radius: 0 0 6px 6px;
	border: 1px solid #e9ecef;
	border-top: none;
}

.author-grid span
{
	font-family: 'Noto Sans', 'Arial', 'Helvetica', sans-serif;
	padding: 0.4rem 0.5rem;
	border-radius: 4px;
	transition: background 0.15s;
}

.author-grid span:hover { background: #e9ecef; }

/* ============================================
   COUNT BADGE
   ============================================ */

.count-badge
{
	background: #4a6fa5;
	color: white;
	font-size: 0.8rem;
	padding: 0.1rem 0.6rem;
	border-radius: 20px;
	font-weight: 500;
}

/* ============================================
   BREADCRUMB (if using)
   ============================================ */

.breadcrumb
{
	font-size: 0.9rem;
	padding: 0.5rem 0 1rem 0;
	margin-bottom: 1rem;
	border-bottom: 1px solid #e9ecef;
	color: #666;
}

.breadcrumb a
{
	color: #4a6fa5;
	text-decoration: none;
	transition: color 0.15s;
}

.breadcrumb a:hover
{
	color: #2a4a7a;
	text-decoration: underline;
}

.breadcrumb .separator
{
	margin: 0 0.4rem;
	color: #aaa;
}

.breadcrumb .current
{
	color: #1a1a1a;
	font-weight: 500;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px)
{
	.container
	{
		margin: 1rem;
		padding: 1.5rem;
	}
	
	h1 { font-size: 1.5rem; }
	
	.author-grid
	{
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		gap: 0.4rem 1rem;
		padding: 1rem;
	}
}

@media (max-width: 600px)
{
	.container
	{
		margin: 0.5rem;
		padding: 1rem;
		border-radius: 8px;
	}
	
	h1 { font-size: 1.3rem; }
	p { font-size: 1rem; }
	
	.author-grid
	{
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
		gap: 0.3rem 0.8rem;
		padding: 0.75rem;
	}
	
	summary
	{
		font-size: 1rem;
		padding: 0.6rem 0.8rem;
	}
}

@media (max-width: 400px)
{
	.author-grid { grid-template-columns: 1fr 1fr; }
	
	.container
	{
		margin: 0.25rem;
		padding: 0.75rem;
	}
}

/* ============================================
   TIPPY
   ============================================ */

/* In style.css - Minimal tippy light theme */
.tippy-box[data-theme~='light']
{
	background: #fff;
	color: #26323d;
	box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.tippy-box[data-theme~='light'] .tippy-content { padding: 10px 14px; }

/* Arrow colors for each position */
.tippy-box[data-theme~='light'][data-placement^='top'] > .tippy-arrow::before { border-top-color: #fff; }
.tippy-box[data-theme~='light'][data-placement^='bottom'] > .tippy-arrow::before { border-bottom-color: #fff; }
.tippy-box[data-theme~='light'][data-placement^='left'] > .tippy-arrow::before { border-left-color: #fff; }
.tippy-box[data-theme~='light'][data-placement^='right'] > .tippy-arrow::before { border-right-color: #fff; }

/* ============================================
   IMAGES
   ============================================ */

img
{
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
	filter: grayscale(100%);
}

figure
{
	margin: 1.5rem 0;
	text-align: center;
}

figure img
{
	max-width: 100%;
	height: auto;
	filter: grayscale(100%);
}

figure figcaption
{
	text-align: center;
	font-size: 0.85rem;
	color: #666;
	margin-top: 0.5rem;
	font-style: italic;
}

img.resize30 { max-width: 30%; }
img.resize40 { max-width: 40%; }
img.resize50 { max-width: 50%; }
img.resize60 { max-width: 60%; }
img.resize70 { max-width: 70%; }

/* ============================================
   FLEX CONTAINER
   ============================================ */

.flex-container
{
	display: flex;
	justify-content: center;
}

.flex-container > div
{
	background-color: #fff;
	font-family: "Noto Serif", Cambria, serif;
	margin: 1rem;
	text-align: left;
	font-size: 1rem;
}

/* End Flex Container */

/* ============================================
   PRINT
   ============================================ */

@media print
{
	body { background: white; }
	
	.container
	{
		box-shadow: none;
		margin: 0;
		padding: 1.5rem;
		max-width: 100%;
	}
	
	summary
	{
		background: #f0f0f0 !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	
	.author-grid
	{
		background: #f8f8f8 !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}