/* 
@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');
 */


/* NOTO SANS */
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/NotoSans-Regular.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans';
    font-style: italic;
    font-weight: 400;
    src: url('/fonts/NotoSans-Italic.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 500;
    src: url('/fonts/NotoSans-Medium.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 600;
    src: url('/fonts/NotoSans-SemiBold.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/NotoSans-Bold.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans';
    font-style: italic;
    font-weight: 700;
    src: url('/fonts/NotoSans-BoldItalic.ttf') format('truetype');
    font-display: swap;
}

/* NOTO SERIF */
@font-face {
    font-family: 'Noto Serif';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/NotoSerif-Regular.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Noto Serif';
    font-style: italic;
    font-weight: 400;
    src: url('/fonts/NotoSerif-Italic.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Noto Serif';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/NotoSerif-Bold.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Noto Serif';
    font-style: italic;
    font-weight: 700;
    src: url('/fonts/NotoSerif-BoldItalic.ttf') format('truetype');
    font-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;
}

h1.season {font-size: 1.4rem;}

h1.item-title {font-size: 1.4rem;}

.subtitle {
    font-family: 'Noto Sans', 'Arial', 'Helvetica', sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    text-align: center;
    margin-top: -0.3rem;
    margin-bottom: 1.5rem;
}

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

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

.author
{
	color: darkorchid;
	font-family: "Noto Sans";
	font-style: normal;
	font-size: 1em;
	text-align: right;
	padding-right:2em;
	/* border-top: 1px solid #e0d6c8; */
}

.missing
{
	background-color: #E0E0E0;
	color: black;
	border-radius: 8px;
	border: none;
	padding: 2px 8px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-family: 'Noto Sans', 'Arial', sans-serif;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 1.25px;
	margin: 0px;
}

.pencil, .alias
{
	color: #FF9300;
	font-family: "Noto Sans";
	font-style: normal;
	font-size: 1em;
}

.name
{
	color: darkorchid;
	font-family: "Noto Sans";
	font-style: normal;
}

.signature
{
    font-style: normal;
}

.dro
{
	color: maroon;
	font-family: "Noto Sans";
	font-style: normal;
}

.meeting
{
	color: navy;
	font-family: "Noto Sans";
	font-size: 1em;
	font-weight: bold;
}

.bottom

{ display: flex;
  justify-content: space-between;
  border-bottom: thin solid gray;
}


.green { color: #063; }
.red { color: red; }
.maroon { color: maroon; }
.grey { color: darkgrey; }
.small { font-size: 0.9em; }

sup {
  font-size: 0.9em;
  vertical-align: baseline;
  position: relative;
  top: -0.2em;
  line-height: 1;
}

/* ============================================
   BLOCKQUOTE FORMATTING
   ============================================ */

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; }

/* ============================================
   POETRY (stand-alone)
   ============================================ */

.poem {
    display: flex;
    justify-content: center;
    margin: 1.5rem 0;
}

.poem-content {
    max-width: 38em;
    text-align: left;
    font-family: "Noto Serif", "Times New Roman", Georgia, serif;
    line-height: 1.7;
}

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

.poem-content .line {
    display: block;
}

/* For poems with indented lines */
.poem-content .line.indent {
    padding-left: 2em;
}

.poem-content .line.indent-2 {
    padding-left: 4em;
}

/* For very short poems */
.poem-short .poem-content {
    max-width: 24em;
}

/* ============================================
   STANZA NUMBERS
   ============================================ */

.poem-content .stanza-number {
    display: block;
    text-align: center;
    font-family: "Noto Serif", "Times New Roman", Georgia, serif;
    font-size: 1rem;
    font-weight: 400;
    /* color: #800000; */
    margin-bottom: 0.2rem;
    letter-spacing: 0.5px;
}

/* Roman numerals (optional) */
.poem-content .stanza-number.roman {
    font-weight: 400;
    font-size: 0.9rem;
    color: #6c757d;
}

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;
	table-layout: fixed;
	margin-right: auto;
	margin-left: auto;
	font-family: "Noto Serif";
	font-size: 0.9rem;
}

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

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

.item-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;
}

/* Red#009051 */
.info-r { color: #ff0000; }

/* Blue */
.info-b { color: #0000ff; }

/* Orange */
.info-d { color: #d46b08; }

/* Moss Green */
.info-g { color: #009051; }

/* Shared hover/focus effects (applies to all) */
[class^="info-"]:hover,
[class^="info-"]:focus
{
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 2px;
}

/* Generic info indicator (for attribution notes, etc.) */
.info {
    color: #800000;              /* Maroon to match your theme */
    cursor: help;
    font-size: 0.85rem;
}

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;
}

/* ============================================
   BOTTOM NAVIGATION
   ============================================ */

#navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e9ecef;
}

.nav {
    font-family: 'Noto Sans', 'Arial', 'Helvetica', sans-serif;
    font-size: 0.9rem;
    color: #1a1a1a;
    text-decoration: none;
    padding: 0.3rem 0.8rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.nav:hover {
    color: #800000;
    border-color: #800000;
    background: rgba(128, 0, 0, 0.04);
    text-decoration: none;
}

/* ============================================
   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); }


/* ============================================
   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;
	}
}