/* -----------------------------------------------------------------------
   Annals of Wyoming

   Two components on one page, and they are meant to be read as a pair.

   The outbound links follow Governing Documents exactly: the same
   64px tile where a cover would sit, the same three-column row, the same
   quiet meta pushed right, the same sand chevron sliding 3px on hover.
   The tile carries an arrow instead of a file kind, because these rows
   leave the site rather than open a PDF.

   The volume grid is the other half. Seventy-seven rows would be a wall,
   and a reader here is not scanning for a title: they are looking for a
   year. So the volumes are plates in a grid under decade headings, and the
   heading keeps the Governing Documents rule and count so the two
   components sit on the same page without arguing.

   Class names are local (wyohs-annals__*) rather than shared with
   documents.css or whn.css. Those stylesheets load on other pages and
   nothing here should depend on them. The duplication is deliberate and is
   noted in all three files.

   The arrow in the tile is drawn in CSS, not set as an inline SVG. WP
   Engine's firewall rejects any theme-file save whose body contains a
   literal SVG opening tag and writes the file as zero bytes, which is a
   silent failure. Same reason post.css draws its arrow. Do not paste one
   into this file to "simplify" the arrow.
   ----------------------------------------------------------------------- */

/* Page furniture --------------------------------------------------------
   The section heads and the note are native Heading and Text Editor
   modules rendered with include_wrapper false, so each class sits ON the
   element. As flex items in their column they shrink-wrap unless width is
   set.

   The __lede rules are currently unused: this page keeps the site's
   standard intro row, so its opening paragraphs are a .wyohs-prose--lead
   module and take that module's centring. The rules are here for the day
   somebody rebuilds the top of the page in the Governing Documents idiom
   instead. */

/* The horizontal margins have to go with the width. The theme gives every
   module 20px of side margin above 992px, and `width: 100%` resolves
   against the column's content box, so module + margins comes to 40px
   wider than the column it sits in. Above about 1240px the row's own
   centring absorbs it and nothing shows; at 1200px it pushes the document
   20px wide and the whole page gains a horizontal scrollbar. Measured at
   1200, 1000, 900, 760, 600 and 390: clean at all six with these two
   lines, broken at 1200 without them. */

.wyohs-annals-page .wyohs-annals-page__lede,
.wyohs-annals-page .wyohs-annals-page__head,
.wyohs-annals-page .wyohs-annals-page__note,
.wyohs-annals-page .wyohs-annals-page__links,
.wyohs-annals-page .wyohs-annals-page__grid,
.wyohs-annals-page .wyohs-annals-page__next-head {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.wyohs-annals-page .wyohs-annals-page__lede {
	max-width: 760px;
	margin: 0 auto;
}

.wyohs-annals-page .wyohs-annals-page__lede p {
	font-family: var(--wyohs-body, 'Special Gothic', sans-serif);
	font-size: 18px;
	line-height: 1.68;
	color: var(--wyohs-ink, #1a1a1a);
	margin: 0 0 18px;
}

.wyohs-annals-page .wyohs-annals-page__lede p:last-child {
	margin-bottom: 0;
}

.wyohs-annals-page .wyohs-annals-page__lede em {
	font-style: italic;
}

/* Section heads run at the interior-page value measured off History of the
   Society: Young Serif 34px, left aligned, ink. The closing "Where to go
   next" is the larger 38px, as on Governing Documents. */

.wyohs-annals-page .wyohs-annals-page__head {
	font-family: var(--wyohs-serif, 'Young Serif', Georgia, serif);
	font-weight: 400;
	font-size: 34px;
	line-height: 1.18;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wyohs-ink, #1a1a1a);
	text-align: left;
	max-width: 1160px;
	margin: 0 auto;
}

.wyohs-annals-page .wyohs-annals-page__note {
	font-family: var(--wyohs-body, 'Special Gothic', sans-serif);
	font-size: 17px;
	line-height: 1.6;
	color: #5c5c5c;
	text-align: left;
	max-width: 1160px;
	margin: 14px auto 0;
}

.wyohs-annals-page .wyohs-annals-page__next-head {
	font-family: var(--wyohs-serif, 'Young Serif', Georgia, serif);
	font-weight: 400;
	font-size: 38px;
	line-height: 1.05;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wyohs-ink, #1a1a1a);
	text-align: left;
}

/* Where to go next ------------------------------------------------------
   Three WHS Link Card instances in ONE Beaver Builder column, laid out by
   grid. Beaver Builder deletes a column the moment it is empty, which
   makes a three-column row a fragile place to keep Component instances;
   one column and a grid holds its shape whatever the builder does. Copied
   from documents.css, where the same problem was solved first. */

.wyohs-annals-page--cards .fl-col-group {
	display: block;
}

.wyohs-annals-page--cards .fl-col {
	width: 100%;
	max-width: 100%;
	flex: 1 1 100%;
}

.wyohs-annals-page--cards .fl-col-content {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	align-items: stretch;
}

.wyohs-annals-page--cards .fl-col-content > .wyohs-next {
	margin: 0;
	width: 100%;
}

/* Shared shell ---------------------------------------------------------- */

.wyohs-annals {
	text-align: left;
	--an-rule: rgba(26, 26, 26, .22);
	--an-hair: rgba(26, 26, 26, .12);
	--an-quiet: #5c5c5c;
	max-width: 1160px;
	margin: 0 auto;
}

/* The outbound rows ----------------------------------------------------- */

.wyohs-annals__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wyohs-annals__item + .wyohs-annals__item {
	border-top: 1px solid var(--an-hair);
}

.wyohs-annals--links {
	border-top: 2px solid var(--an-rule);
	border-bottom: 2px solid var(--an-rule);
}

.wyohs-annals__link {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	gap: 24px;
	align-items: center;
	padding: 22px 16px 22px 8px;
	text-decoration: none;
	color: inherit;
	transition: background-color .15s ease;
}

a.wyohs-annals__link:hover,
a.wyohs-annals__link:focus-visible {
	background: rgba(246, 215, 179, .45);
	text-decoration: none;
}

.wyohs-annals__kind {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	aspect-ratio: 17 / 22;
	background: var(--wyohs-navy, #1b3a5c);
	border: 1px solid var(--an-hair);
	box-shadow: 0 1px 3px rgba(26, 26, 26, .14);
	color: var(--wyohs-sand, #d2a56c);
}

/* Arrow, drawn: a shaft rotated 45 degrees and a two-sided box for the
   head. currentColor throughout, so the tile's colour is the only thing
   that has to change. */

.wyohs-annals__arrow {
	position: relative;
	display: block;
	width: 20px;
	height: 20px;
}

.wyohs-annals__arrow::before {
	content: '';
	position: absolute;
	left: 1px;
	bottom: 1px;
	width: 25px;
	height: 2px;
	background: currentColor;
	transform-origin: 0 50%;
	transform: rotate(-45deg);
}

.wyohs-annals__arrow::after {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	width: 11px;
	height: 11px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.wyohs-annals__text {
	display: block;
	min-width: 0;
}

.wyohs-annals__title {
	display: block;
	font-family: var(--wyohs-serif, 'Young Serif', Georgia, serif);
	font-size: 22px;
	line-height: 1.25;
	color: var(--wyohs-navy, #1b3a5c);
}

.wyohs-annals__teaser {
	display: block;
	font-family: var(--wyohs-body, 'Special Gothic', sans-serif);
	font-size: 15px;
	line-height: 1.5;
	color: var(--an-quiet);
	margin-top: 4px;
}

.wyohs-annals__meta {
	display: flex;
	align-items: baseline;
	gap: 18px;
	white-space: nowrap;
}

.wyohs-annals__where {
	font-family: var(--wyohs-display, 'Special Gothic Condensed One', sans-serif);
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--an-quiet);
}

.wyohs-annals__chev {
	font-size: 22px;
	line-height: 1;
	color: var(--wyohs-sand, #d2a56c);
	transition: transform .15s ease;
}

a.wyohs-annals__link:hover .wyohs-annals__chev {
	transform: translateX(3px);
}

/* Decade bands ---------------------------------------------------------- */

.wyohs-annals__group {
	margin: 0 0 54px;
}

.wyohs-annals__group:last-child {
	margin-bottom: 0;
}

.wyohs-annals__group-head {
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
	border-bottom: 2px solid var(--an-rule);
	padding-bottom: 14px;
	margin: 0 0 28px;
}

/* The decade heading is an h3 because it sits under the section's own h2,
   and the theme carries `.fl-builder-content h3` at Special Gothic
   Condensed, uppercase. That is (0,1,1) and beats a bare class, so the
   parent has to be named here. Governing Documents never hit this: its
   category headings are h2. Keep the parent on the responsive rule too. */

.wyohs-annals .wyohs-annals__group-title {
	font-family: var(--wyohs-serif, 'Young Serif', Georgia, serif);
	font-weight: 400;
	font-size: 32px;
	line-height: 1.15;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	color: var(--wyohs-ink, #1a1a1a);
	margin: 0;
}

.wyohs-annals__group-count {
	font-family: var(--wyohs-display, 'Special Gothic Condensed One', sans-serif);
	font-size: 14px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--an-quiet);
}

/* The volume grid -------------------------------------------------------
   auto-fill rather than a fixed column count: the last band holds six
   volumes and the middle ones hold ten, and a fixed grid would leave the
   short bands looking broken. */

.wyohs-annals__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
	gap: 34px 26px;
}

.wyohs-annals__cell {
	margin: 0;
}

.wyohs-annals__vol {
	display: block;
	text-decoration: none;
	color: inherit;
}

a.wyohs-annals__vol:hover,
a.wyohs-annals__vol:focus-visible {
	text-decoration: none;
}

/* The plate.

   The volume number is set into a navy field and the Internet Archive's
   own thumbnail is laid over it. That order matters: the number is what a
   reader sees while the scan loads, what they see if archive.org is slow
   or unreachable, and what a printed page shows. The picture is the
   decoration; the number is the information. */

.wyohs-annals__plate {
	position: relative;
	display: block;
	aspect-ratio: 17 / 22;
	background: var(--wyohs-navy, #1b3a5c);
	border: 1px solid var(--an-hair);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(26, 26, 26, .16), 0 6px 16px rgba(26, 26, 26, .1);
	transition: transform .18s ease, box-shadow .18s ease;
}

.wyohs-annals__plate-num {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wyohs-serif, 'Young Serif', Georgia, serif);
	font-size: 40px;
	line-height: 1;
	color: var(--wyohs-sand, #d2a56c);
}

.wyohs-annals__plate-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

a.wyohs-annals__vol:hover .wyohs-annals__plate,
a.wyohs-annals__vol:focus-visible .wyohs-annals__plate {
	transform: translateY(-4px);
	box-shadow: 0 2px 4px rgba(26, 26, 26, .18), 0 14px 26px rgba(26, 26, 26, .18);
}

.wyohs-annals__vol-label {
	display: block;
	font-family: var(--wyohs-serif, 'Young Serif', Georgia, serif);
	font-size: 19px;
	line-height: 1.2;
	color: var(--wyohs-navy, #1b3a5c);
	margin-top: 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--an-hair);
	transition: border-color .18s ease;
}

a.wyohs-annals__vol:hover .wyohs-annals__vol-label,
a.wyohs-annals__vol:focus-visible .wyohs-annals__vol-label {
	border-bottom-color: var(--wyohs-sand, #d2a56c);
}

.wyohs-annals__vol-meta {
	display: block;
	margin-top: 8px;
	font-family: var(--wyohs-display, 'Special Gothic Condensed One', sans-serif);
	font-size: 13px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--an-quiet);
}

.wyohs-annals__vol-years {
	display: block;
	color: var(--wyohs-ink, #1a1a1a);
}

.wyohs-annals__vol-nos {
	display: block;
	margin-top: 2px;
}

/* Narrow ---------------------------------------------------------------- */

@media (max-width: 900px) {

	.wyohs-annals-page--cards .fl-col-content {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.wyohs-annals__grid {
		grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
		gap: 28px 20px;
	}

	.wyohs-annals__plate-num {
		font-size: 32px;
	}
}

/* At phone width the chevron and the where-it-goes label stop earning
   their space on the outbound rows: the title says it. The volume grid
   holds at two columns, which is the narrowest a plate can be and still
   read as a book rather than a swatch. */

@media (max-width: 640px) {

	.wyohs-annals-page .wyohs-annals-page__head {
		font-size: 28px;
	}

	.wyohs-annals-page .wyohs-annals-page__next-head {
		font-size: 30px;
	}

	.wyohs-annals .wyohs-annals__group-title {
		font-size: 26px;
	}

	.wyohs-annals__link {
		grid-template-columns: 52px minmax(0, 1fr);
		gap: 16px;
		padding: 18px 4px;
	}

	.wyohs-annals__kind {
		width: 52px;
	}

	.wyohs-annals__arrow {
		width: 17px;
		height: 17px;
	}

	.wyohs-annals__arrow::before {
		width: 21px;
	}

	.wyohs-annals__arrow::after {
		width: 9px;
		height: 9px;
	}

	.wyohs-annals__title {
		font-size: 20px;
	}

	.wyohs-annals__meta {
		display: none;
	}

	.wyohs-annals__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px 16px;
	}

	.wyohs-annals__vol-label {
		font-size: 17px;
		margin-top: 12px;
	}

	.wyohs-annals__vol-meta {
		font-size: 12px;
	}
}

/* Undoing the host module ----------------------------------------------
   These two shortcodes sit in their own HTML modules, siblings of the
   prose rather than inside it, so nothing here has to fight a Text Editor
   module's centring or type scale. The three lines below are a guard, not
   a fix: if either shortcode is ever moved into a .wyohs-prose module,
   they are what stops the whole component going centred. Add to them
   rather than restructuring in a hurry. */

.wyohs-prose .wyohs-annals,
.wyohs-prose .wyohs-annals * {
	text-align: left;
}

/* Kept level with the prose-link rule in home.css rather than above it: same
   specificity, and this sheet loads later, so the volume links stay bare. */
.fl-builder-content .wyohs-prose a.wyohs-annals__link,
.fl-builder-content .wyohs-prose a.wyohs-annals__vol {
	color: inherit;
	text-decoration: none;
	background: none;
}