/* ---------------------------------------------------------------
   Informal Shrine Society
   Structure and typographic system adapted from the Cargo-built
   Schools of Salmon Creek site (salmoncreekfarm-arts.org):
   Courier body copy, Young Serif headings, pale tinted ground per
   section, deep-red link family, 50% text column, justified image
   galleries, closing full-viewport photo panel, pinned footer link.
   Copy and photographs are placeholders.
   --------------------------------------------------------------- */

/* --- body face ---------------------------------------------------------
   Courier Prime (SIL Open Font License) via Google Fonts. It stands in for
   JMH Typewriter, which is free for personal use only and may not be served
   from a public site. Buy a license from the author to put JMH back.
   ---------------------------------------------------------------------- */

:root {
	--body-font: "Courier Prime", Courier, "Courier New", monospace;
	--body-size: 1.15rem;
}

/* --- reset / root ------------------------------------------------ */

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

html {
	/* the reference site runs a ~90% root scale; rem values below match it */
	font-size: 14.44px;
	-webkit-text-size-adjust: 100%;
}

@media (max-width: 700px) {
	html { font-size: 15.5px; }
}

body {
	margin: 0;
	background-color: #e6eadf;
	color: #000;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

img { border: 0; padding: 0; max-width: 100%; vertical-align: bottom; }

ul, ol { margin: 0; padding: 0 0 0 2.5em; }

hr { background: rgba(0,0,0,.15); border: 0; height: 1px; display: block; }

:focus-visible { outline: 2px solid var(--accent, #6e1208); outline-offset: 2px; }

/* --- type -------------------------------------------------------- */

.bodycopy {
	font-family: var(--body-font);
	font-size: var(--body-size);
	font-weight: normal;
	font-style: normal;
	line-height: 1.5;
	color: rgb(0, 0, 0);
}

.bodycopy a {
	color: var(--link, #6e1208);
	padding-bottom: 0.1em;
	text-decoration: none;
	border-bottom: 0;
}

.bodycopy a:hover { text-decoration: underline; }
.bodycopy a:active { opacity: .7; }

h1 {
	font-family: "Young Serif", Georgia, "Times New Roman", serif;
	font-size: 3rem;
	line-height: 0.9;
	font-weight: 400;
	font-style: normal;
	padding: 0;
	margin: 0;
	color: var(--h1, #d21a06);
}

h2 {
	font-family: "Young Serif", Georgia, "Times New Roman", serif;
	font-size: 1.7rem;
	line-height: 1.4;
	font-weight: 400;
	font-style: normal;
	padding: 0;
	margin: 0;
	color: var(--h2, #3c1408);
}

h2 a { color: var(--h2-link, #5d0303); }

small {
	display: inline-block;
	font-family: var(--body-font);
	font-size: calc(var(--body-size) * 0.84);
	line-height: 1.3;
	font-weight: normal;
	color: rgba(0,0,0,.85);
}

small a { color: var(--link, #6e1208); }

i, em { font-style: italic; }
b, strong { font-weight: bolder; }

/* --- page sections ----------------------------------------------- */

.page_container {
	position: relative;
	overflow: hidden;
	width: 100%;
	background-color: var(--ground, #e6eadf);
}

.page {
	position: relative;
	z-index: 2;
	width: 100%;
	min-height: auto;
	text-align: left;
}

.content_padding { padding: 2rem; }

.page_content::after { content: ""; display: table; clear: both; }

/* --- grid (Cargo x11 = half width, stacking on small screens) ----- */

.grid_row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin: 0 -0.4rem;
}

.grid_col {
	width: 50%;
	padding: 0 0.4rem;
	min-width: 0;
}

.grid_col.wide { width: 100%; }

@media (max-width: 900px) {
	.grid_col, .grid_col.wide { width: 100%; }
}

/* --- placeholder marking ----------------------------------------------
   Everything still to be written or shot carries .ph. Delete the two
   rules below (or the class) once the real copy is in.
   ---------------------------------------------------------------------- */

.ph {
	color: rgba(0,0,0,.55);
	background: rgba(0,0,0,.025);
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.12);
}

.ph-note {
	display: block;
	font-size: calc(var(--body-size) * 0.84);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(0,0,0,.35);
	background: none;
	box-shadow: none;
	margin: .4em 0;
}

/* --- images ------------------------------------------------------- */

.single_image { display: block; margin-bottom: .5em; }
.single_image img { width: 100%; height: auto; }

/* portrait images would otherwise run the full column height */
.single_image.tall { max-width: 27rem; }

.image_caption {
	margin-top: .3rem;
	margin-bottom: .5rem;
	font-family: var(--body-font);
	font-size: calc(var(--body-size) * 0.84);
	line-height: 1.3;
	color: rgba(0,0,0,.4);
}

/* Justified gallery. Each figure carries its own aspect ratio as --ar.
   Growing each item in proportion to that ratio, from a basis that is also
   in proportion to it, makes every item in a row settle at the same height
   with no cropping at all -- a real justified row, in CSS only.
   --row is the height a row would take before it grows to fill. */
.gallery {
	--row: 11rem;
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin-bottom: .5em;
}

.gallery figure {
	margin: 0;
	flex-grow: var(--ar);
	flex-shrink: 1;
	flex-basis: calc(var(--ar) * var(--row));
	aspect-ratio: var(--ar);
}

.gallery img {
	display: block;
	height: 100%;
	width: 100%;
	object-fit: cover;
}

@media (max-width: 900px) {
	.gallery { --row: 9rem; }
}

/* --- closing full-viewport photo panel ---------------------------- */

.page_container.splash {
	min-height: 100vh;
	background-color: #dee3d4;
	display: flex;
}

.splash .backdrop {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

.splash .backdrop img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.splash .page { min-height: 100vh; }

/* --- subpage wordmark ---------------------------------------------
   Subpages carry the Society's name as a small link home rather than
   repeating the full 3rem masthead. */

.subhead .content_padding { padding-bottom: 0; }

.wordmark {
	font-family: "Young Serif", Georgia, "Times New Roman", serif;
	font-size: 1.7rem;
	line-height: 1.2;
	color: var(--h1);
	text-decoration: none;
	display: inline-block;
}

.wordmark:hover { text-decoration: underline; }

/* the last block on a page needs clearance for the fixed footer link */
main > .page_container:last-child .content_padding { padding-bottom: 7rem; }
main > .page_container.splash:last-child .content_padding { padding-bottom: 2rem; }

/* --- pinned footer overlay ---------------------------------------- */

.pinned_bottom {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 4;
	pointer-events: none;
}

.pinned_bottom .content_padding { padding: 1.4rem 2rem; }

.pinned_bottom a {
	pointer-events: auto;
	display: inline-block;
	padding: .3em .7em;
	font-family: var(--body-font);
	font-size: var(--body-size);
	font-weight: bold;
	color: #7a1f0c;
	background: rgba(244, 248, 238, .85);
	text-decoration: none;
}

.pinned_bottom a:hover { text-decoration: underline; }

/* --- site menu ---------------------------------------------------- */

#site_menu_button {
	position: fixed;
	top: 3rem;
	right: 3rem;
	z-index: 10;
	padding: 6px;
	margin: -6px;
	font-family: var(--body-font);
	font-size: 24px;
	line-height: 1;
	color: rgba(0,0,0,.75);
	background: none;
	border: 0;
	cursor: pointer;
}

#site_menu_button:hover { opacity: .6; }

@media (max-width: 700px) {
	#site_menu_button { top: 1.5rem; right: 1.5rem; font-size: 28px; }
}

#site_menu {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 11;
	display: flex;
	flex-direction: column;
	max-width: 400px;
	min-width: 300px;
	padding: 20px 30px 90px 30px;
	background: rgba(20,20,20,.95);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	font-size: 20px;
	font-weight: 400;
	text-align: left;
	overflow-y: auto;
}

#site_menu[hidden] { display: none; }

body.mobile-menu #site_menu { width: 100%; }

@media (max-width: 500px) {
	#site_menu { width: 100%; max-width: none; }
}

#site_menu .close {
	align-self: flex-start;
	background: none;
	border: 0;
	padding: 0;
	margin-bottom: .4em;
	font-size: 45px;
	line-height: .85em;
	color: rgba(255,255,255,.4);
	cursor: pointer;
}

#site_menu a {
	display: block;
	padding: .12em 0;
	color: rgba(255,255,255,.75);
	text-decoration: none;
}

#site_menu a:hover { color: #fff; }
#site_menu a:active { opacity: .7; }
#site_menu a.active { color: rgba(255,255,255,.35); }
#site_menu .set-link { font-weight: bold; }
#site_menu .break { height: 28px; }

/* --- print -------------------------------------------------------- */

@media print {
	#site_menu_button, #site_menu, .pinned_bottom { display: none; }
	.page_container { break-inside: avoid; }
}

small { vertical-align: top; }

#site_menu_button[aria-expanded="true"] { display: none; }