/*
	Stylesheet for Diane Bostick's 'Yale Station: Letters Of Love' website. Heavily annotated. Website is now contained in the directory xampp/htdocs/studiomulduzi/1947/style. Updated 2026-003-24.

	To keep things simple, I use rem instead of em whenever I refer to font size.

	In his typewritten letters, Glyn (George) Bostick used double hyphens almost exclusively. I decided not to change them to em dashes--since em dashes don't look great in non-proportional fonts. Instead, every double hyphen is rendered as 'space-hyphen-hyphen-space'. (This means that some lines get an extra space at the end, but that's okay.) I have applied this styling to Emily's em dashes, also.
	
	When George adds underlining. I use the simple <u> element for this purpose.
	
	See the includes/functions.php script for additional notes.
	
	I found the source of the art in George's Yale letterhead. It is the coat of arms of Trumbull College, Yale University. It depicts three bull heads inside a shield.
*/

/* Site-wide styling constants. */
:root {
	--color-link-hover: goldenrod;
	/* Color of border added to pictures which are links. I wanted an 'antique' mood but I am not happy with this color. Maybe I should use the dominant color in Cher Jiang's artwork, which is a bright orange-ish yellow. */
	--foreground-color: black;
	--hairline-thick:   1px;
	/*Thickness of <hr> elements and also the border between .main_title_cell and .letterhead_logo_cell.
	Note: If I set this value to anything other than 1px, this will require me to also add code to every rule which applies to <hr> elements.*/
	--page-width:      48rem;
	/* Propotional to the maximum width of a line of text from George Bostick's typewriter. The actual maximum number of characters in a line is 70, non-proportional, so I don't know where this exact number comes from. Update: This value currently affects some img elements, but no text elements. */
	--smallest-font:   10pt sans-serif;
	/* Actually, this is no longer the smallest font. It is the font I use for captioning picture thumbnails and almost nothing else. The actual smallest font now appears as the last line of every page, the credit for FreeConvert.com. */
	--teeny-tiny:       5px;
	/* Thickness of border added to pictures which are links. */
	--thumbnail-height: 8rem;
	/* Height of thumbnails in the picture gallery. */

}

/* The next two rules prevent highlighted picture links from moving around. These rules were originally developed in 2025 for the TitusHeights.studio website. */

/* When we hover over them, draw a border around all pictures which are also links.
(All thumbnails and some other pictures on this website are links.) */
a img:hover {
	border: var(--teeny-tiny) solid var(--color-link-hover);
}

/* We don't want the hovered image links to move around, however, so we draw an equal size transparent border around them when they are not hovered. */
a img {
	border-width: var(--teeny-tiny);
	border-style: solid;
	border-color: transparent;
}

/*
	I think the background paper texture looks good. Unfortunately, the paper backgrounds of handwritten passages look bad. This is because the original pages are all over the place. To solve this, I basically have two choices.
		1. Make the handwritten backgrounds transparent. This looks great, but requires a ton of extra work in Photoshop.
		2. Draw borders around the handwritten pieces. I'm thinking this could make the boundaries less wonky. I am testing this now.
		
	The paper-texture-01 through 03 jpgs are based on a scan from an actual letter.
	paper-text-PS-256.gif was created in Photoshop, based on one of the Photoshop 'paper' patterns. It is extremely light; barely a texture at all. I think I want to go with something darker/stronger.
	So, currently I'm going with paper-texture-02.jpg.
	
	paper-texture-02.jpg looks okay, but I want to try a larger, more detailed image, something that with larger 'repeats'.
	
	Update. I am now going with a painterly background created by Cher Jiang, Diane's illustrator. I used Levels in Photoshop to blend it with white. There doesn't seem to be a way to employ this effect purely in CSS, unfortunately. Since I made this change, some of the handwritten letter illustrations may look bad. I will need to retouch them in Photoshop.
*/
body {
	background-image: url('bkgd-paint-floor-160.jpg');
	/*background-size: 75%;*/
	color:            var(--foreground-color);
	/* letter-spacing:   1px; used for American Typewriter font, only.  */
	line-height:      1.3;
	margin:           4rem;
	/* margin-bottom:   10rem; */
}

body table#layout_table td.ocr_cell .l2l_navigation {
	/* border: 1px solid red; */
	margin-top: 2rem;
}

body.hand table#layout_table td.ocr_cell {
	/* border: 3px solid green; */
	font-size: 28pt;
	line-height: 1.2;
}

/*
font-family notes
I am specifying every font I can find which could resemble handwriting (except for Comic Sans, of course). I don't understand why the Script font doesn't work.
There are two sets of font-families: one for Emily ('feminine'), one for George ('masculine').
Most of these fonts look better with curly quotes and apostrophes. Exceptions to this rule include Courier and Segoe Script. Courier always looks better with straight quotes. I think Segoe Script looks good either way. Gabriola is another font where the difference is not a big deal.
*/
body.hand.Emily table#layout_table td.ocr_cell {
	/* border: 1px solid blue; */
	font-family: Shell, Ink Free, serif; /* 'Feminine' script fonts. */
	font-size: 30pt;
	font-weight: bold;
	line-height: 1.3;
}

body.hand.George table#layout_table td.ocr_cell {
	/* border: 1px solid blue; */
	font-family: Gabriola, Segoe Script, Script, serif; /* 'Masculine' script fonts. */
	font-size:  28pt;
	line-height: 1.2;
}

/* The .greeting_page class, and the page it appeared on, are deprecated. */
/*
body.greeting_page td.ocr_cell p {
	font-family: initial;
	font-size: 200%;
	margin:     -2.5rem 0 1rem 0;
	white-space: normal;
}

body.greeting_page td.ocr_cell p:last-child {
	margin-bottom: -4rem;
}
*/

code, .l2l_navigation ol {
	font-family: Consolas;
}

/*
	sans-serif is not great, but I need a default in case the other fonts are not available.
	font-size is set to display image descriptions nicely on three lines. I use non-breaking spaces to make this possible.

	I may decide to display this title as a gif.
	
	There is a weird bug in Notepad++ which sometimes causes part of the next line to display in the comment font. To fix the display, close this file and re-open it.
*/
h1#page_banner, p#image_description, .intro_text p, /*td*/#main_title_cell, p.THS_credit, .tooltip_text {
	font-family: American Typewriter, Courier, sans-serif;
}

/*h1#page_banner,*/ /*td*/#main_title_cell p.big_eli {
	font-size:     6vw;
	font-weight: 100;
	margin-top: 4rem;
	margin-bottom: 0;
	text-align:    center;
}

h2 {
	font-family: sans-serif;
	margin-top: -1rem;
}

.handwritten img {
	margin-top: -2rem;
}

.handwritten.border img {
	border: 2px solid black; /* See the body element comment. */
}

.handwritten.no_border img {
	border: none;
}

/* This style will re-size any image to the width of a typewritten letter. This rule is different from img.full_page_picture. */
.handwritten.width_full img {
	width: var(--page-width);
}

/* Same, half-width. */
.handwritten.width_half img {
	width: 30rem;
}

/* Same, quarter-width. */
.handwritten.width_quarter img {
	width: 15rem;
}

/* Same, sixth-width. */
.handwritten.width_sixth img {
	width: 6rem;
}

p#image_description {
	margin-bottom: -3rem; /* Always add a little vertical space below the image description (if applicable) to the bottom of a picture page, particularly for the one picture page that scrolls. */
}

/* Deprecated. */
/* img#big_E, img#big_G {
	border:      none;
	margin-top: -14rem;
	/*position:    absolute;* /
	height:     var(--thumbnail-height);
	z-index:    -1;
}

img#big_E {
	left: 2rem;
}

img#big_G {
	right: 2rem;
}
*/

/* This style will re-size any image wider than the browser window to the width of of the browser window. Narrower images will stretch to their maximum pixel width. This rule is different from .handwritten.width_full img.
Update: This rule doesn't work for all images. */
img.full_page_picture {
	display:     block;
	margin:      3rem auto 0 auto; /* top right bottom left */
	/* margin-top:  2rem; */
	/* max-width: 100%; */
	height:      94%; /* Prevent all pictures, even horizontals, from exceeding the window height. This is an estimate, maybe I should use calc() math to derive a better value. */
	/* text-align: center; */
}

/* This style will re-size any horizontal image to the width of of the browser window. This rule is different from .handwritten.width_full img. */
img.full_page_picture.horizontal {
	height: auto;
	width: 100%;
}

/* Special treatment for a specific picture. I want to display this one at maximum size. */
img.full_page_picture.vertical.class_1947-01-06-Attu-Gobs-Gals-story-v_jpg {
	height: auto;
	width: 100%;
}

/* Special treatment for another specific picture. */
img.full_page_picture.vertical.class_1942-NYDN-Christmas-tree-v_jpg {
	height: 90%;
	width: auto;
}

/* Special treatment for a specific subset of pictures. They are all in a narrow range of aspect ratios, so maybe I could apply some logic here and not just make a janky list of string literals. */
img.full_page_picture.horizontal:is(
.class_1939-Emily-Greatrex-NYC-h_jpg,
.class_1939-Emily-and-Millie-Gonzales-Coto-h_jpg,
.class_1959-03-25-arm-wrestling-h_jpg,
.class_1997-03_Glyn_and_Emily_Bostick-h_jpg
) {
	height: 94%;
	width: auto;
}

/* This style will re-size any vertical image to the height of of the browser window. This rule is different from .handwritten.width_full img. */
img.full_page_picture.vertical {
	width: auto;
}

.intro_text p {
	font-size: 125%;
	margin:     -1rem 0 0 0; /* top right bottom left */
	white-space: normal;
}

.intro_text p:last-child {
	margin-bottom: -1.5rem;
}

.l2l_navigation {
	font:        initial;
	white-space: initial; /* Undo preformatting of .ocr class. */
}

.l2l_navigation hr {
	color:   initial;
	margin: -1rem 0 2rem 0; /* top right bottom left */
	width:   initial;
}

.l2l_navigation ol {
	margin-bottom: 3rem;
}
	
li.current_letter {
	font-weight: bold;
}

/* This rule undoes the 'pre' effect of .ocr_cell. It requires paragraph elements, just like normal text. */
.long_typewriter_lines p {
	margin:     -1rem 0 0 0; /* top right bottom left, same leading as .ocr_cell. */
	white-space: normal;
}

.long_typewriter_lines p:last-child {
	margin-bottom: -1rem;
}

/* This element represents a page break in typed and handwritten letters. It is a transparent nothing, a scaffold for the ::after rule which follows. */
.ocr_cell hr {
	color:    rgba(0,0,0,0); /* Invisible. */
	left:     4rem; /* Aligned with left edge of page body text. */
	position: absolute;
}

/* This rule draws the fancy text figure that stands in for a page break in typewritten and handwritten letters. To display properly, we must insert an extra blank line after the <hr> element in the text. I can't find a way to use CSS to insert this extra vertical space.*/
.ocr_cell hr::after {
	color:      black; /* Override color:rgba(0,0,0,0) from previous rule. */
	content:    "\2014\2014[page break]\2014\2014"; /* Em dashes. */
	font:       initial;
	font-size: 16pt;
}

/* The next two rules return the hr element to its original look and feel. */
.ocr_cell .l2l_navigation hr {
	color:    initial;
	display:  block;
	margin:  -1rem auto 2rem auto; /* top right bottom left */
	position: initial;
	width:    initial; 
}

.ocr_cell .l2l_navigation hr::after {
	content:    none;
	font:       inherit;
	font-size:  inherit;
	text-align: inherit;
}

/* I decided to go all-in on the 'pre-format' text, not even <p>aragraph tags are inserted. */
/*.ocr p {
	margin-bottom: -1rem;
}*/

.one_thumb {
	width: 16rem; /* Wide enough to accommodate widest picture shrunk to 10rem high. Deprecated. */
}

/*
p#image_description {
	background-color: lightyellow;
}
*/

p.picture_cell {
	/* width: 0; */
	/* margin-right: 2rem; */
 }

p.return_to_index {
	font-size: 16pt;
	margin:    -2rem 0 3rem 2.5rem; /* top right bottom left */
}

p.THS_credit {
	margin-top:    -1rem;
	margin-bottom: -7rem;
}

/*/ The next two rules are copied over from TitusHeights.studio.css.
Use <span class='quotate'></span> when you forget how to type &ldquo; and &rdquo;. */
.quotate:before {
	content: '\0201C';
}

.quotate:after {
	content: '\0201D';
}

table#big_letter_positioner {
	margin-top: 4rem;
	position: relative;
}

table#big_letter_positioner td {
	/* border: 1px solid black; */
}

table#big_letter_positioner td:nth-child(1) {
	text-align: left;
}

table#big_letter_positioner td:nth-child(2) {
	text-align: right;
}

table#big_letter_positioner td p {
	margin-top: 0;
	padding: 0;
}

/* table td {
	/* border: 1px solid black; * /
	/* width: 100%; * /
}

table.illo td {
	/* border: 1px solid black;  * /
	vertical-align: top;
	white-space: initial;
}

table.illo img {
	width: 100%;
}

table.illo td p:nth-child(1) {
	margin-top: -3rem;
	/* padding-top: 0; * /
}

/*table.illo td p:nth-child(2) {
	padding: 0;
}*/

/* The next two rules allow me to make the entire table cell which contains the 'YS:LoL' headline into a link. I got this trick from https://stackoverflow.com/questions/3966027/make-link-in-table-cell-fill-the-entire-row-height/3966257#3966257. */
/*table#layout_table td*/#main_title_cell {
    overflow: hidden;
}

/*table#layout_table td*/#main_title_cell a {
	color:           var(--foreground-color);
    display:         block;
    margin:        -10em;
    padding:        10em;
	text-decoration: none;
}

/*
body#index table#layout_table td#main_title_cell a {
	margin-top:    -7rem;
	margin-bottom: -3rem;
	position: relative;
}
*/

body#picture_page table {
	width: 100%;
}

body#picture_page #main_title_cell {
	display:        block; /* Required in order for margins to affect table cell elements. */
	margin-top:    -7rem;
	margin-bottom: -3rem;
}

table#layout_table td {
	/* border: 1px solid black; */
}

/* Note regarding the letterhead image. Not all George letters were typed on this letterhead, but I display them all under this letterhead. There is another letterhead design which George used on a few letters, which I call the 'Yale bottlecap'. The scans I was able to pull from paper letters look really bad, and I can't find a clean version of it anywhere, so I am not using it.
If I complete my designs for pretty logos to represent George and Emily, then maybe I will use them instead.*/
table#layout_table td#letterhead_logo_cell {
	border-top:  var(--hairline-thick) solid black;
	padding-top: 3rem;
	text-align:  center;
}

table#layout_table td#letterhead_logo_cell img {
	width: 33%;
}

/* Only letters from George show the (George at Yale) letterhead.
.Emily and .George are classes because elements are not allowed to have more than one ID. */
body:not(.George) td#letterhead_logo_cell img {
	display: none;
}

/* Remove the vertical space above the letter on pages which do not show the Yale letterhead. */
body.Emily table#layout_table td.ocr_cell {
	/*border: 1px solid black;*/
	display:     inline-block; /* Required for margin-top to have an effect inside a table cell. */
	margin-top: -4rem;
}

p.smallest, div.thumbnails {
	font: var(--smallest-font);
	/* width: 6rem; */
}

td#main_title_cell p.credit {
	font-size: 12pt;
	margin:    -1.5rem 0 -3rem 0; /* top right bottom left */
	text-align: left;
}

/* The American Typewriter font is deliberately commented out here. I decided to use it in just a few places.
	1. I don't think many browsers will have this font installed.
	2. It looks too different from Courier; I can't set letter-spacing the same for both.
	3. I wanted a font with wide em dashes, but these are still not wide enough.
*/
table#layout_table td.ocr_cell {
	font-family: /*American Typewriter,*/ Courier, monospace;
	font-size:  14pt;
	white-space: pre;
	/* width:       var(--page-width); */
}

td.empty_cell {
	display: none;
}

td#main_title_cell {
	padding-bottom: 1rem;
}

td#main_title_cell img {
	border: none;
	padding: 0;
	width: 100%;
}

/* I think this link looks better without underline. I use this style on all of my websites. */
.THS_credit a {
	text-decoration: none;
}

table table {
	width: 100%;
}

table table td {
	/*border: 1px solid black;*/
	/*padding-top: 3rem;*/
	font-size: 12pt;
	text-align: left;
}

table table td:last-child {
	text-align: right;
}

table table td {
	padding-top: 3rem;
	font-size: 12pt;
}

div.thumbnails {
	display:   flex;
	flex-wrap: wrap; /* I don't know why the name of this attribute displays in a different color in Notepad++. */
	margin:    0.25rem 0 2rem 0; /* top right bottom left */
}

div.thumbnails img {
	height:       9rem;
	margin-right: 0 0.5rem 0.5rem 0; /* For images that are links, always use margin instead of padding. */
}

/* img.float_right {
	display: block;
	margin-left: auto; /* Pushes the image to the right * /
	margin-right: 0; /* Ensures no right margin pushes it back * /
	width: 50%;
}*/

/* The following three rules are from Google's AI Overview responding to 'css tool tip'. */
/* Container for the element to hover over */
.tooltip {
	cursor:   help; /* Changes the cursor to indicate interactivity */
	display:  inline-block; /* Allows the container to wrap its content */
	position: relative; /* Essential for positioning the inner text relative to this container */
}

/* The actual tooltip text */
.tooltip .tooltip_text {
	background-color: lightyellow;
	border:           1px solid black;
	color:            var(--foreground-color);
	font-size:       94%;
	margin-top:       calc(var(--thumbnail-height) * -1 + 4rem);
	opacity:          0; /* Starts with zero opacity for a fade effect */
	padding:          0.25rem; /* top right bottom left */
	position:         absolute; /* Positions the tooltip text */
	transition:       opacity 0.3s; /* Smooth transition for the fade-in */
	visibility:       hidden; /* Hides the tooltip by default */
	z-index:          1; /* Ensures the tooltip appears on top of other content */
}

/* Show the tooltip when hovering over the parent container */
.tooltip:hover .tooltip_text {
	opacity:    1;
	visibility: visible;
}

/* Additional tooltip style rule. */
.tooltip h1 {
	font-size: 125%;
}