/* -----------------------------------------------------------------------
   The Wyoming Historian

   Borrowed wholesale from Wyoming History News, because the two are the
   Society's two periodicals and a reader who knows one should recognise the
   other: a sand label bar over a peach field, sized to its own text rather
   than to the page, with the cover taken out of the flow and tilted so it
   hangs past the panel's top, bottom and left edges. Panel and overhang are
   centred together as one composition; nothing inside is centred.

   Three things diverge from whn.css, and all three follow from the fact that
   an issue of this journal is bought rather than downloaded:

   1. The panel is NOT a single stretched link. Two destinations — buy this
      issue, subscribe for a year — means two buttons, so there is no
      ::after overlay here. The cover keeps its own duplicate anchor.
   2. The label bar's right end carries volume and issue rather than a file
      size, because there is no file to weigh.
   3. The contents list below the panel has no counterpart on the newsletter
      page. A journal is chosen by what is in it.

   --hist-cover-nudge is arithmetic, not taste. It is half the cover's total
   left overhang: the 24px offset plus the wedge the 3.4deg tilt throws past
   the cover's own box, which is (w*cos + h*sin - w) / 2. This cover is
   687 x 1024, so 447px tall at 300px wide, and the wedge is 13px. Change the
   cover, its width, the offset or the angle and recompute it.
   ----------------------------------------------------------------------- */

.wyohs-hist {
	text-align: left;
	--hist-rule: rgba(26, 26, 26, .22);
	--hist-hair: rgba(26, 26, 26, .12);
	--hist-quiet: #5c5c5c;
	--hist-bar-x: 40px;
	--hist-cover-w: 300px;
	--hist-cover-out: 24px;
	--hist-cover-gap: 46px;
	--hist-cover-nudge: 19px;
	max-width: 1160px;
	margin: 0 auto;
	padding: 0;
}

/* Current issue ---------------------------------------------------------- */

.wyohs-hist__featured {
	position: relative;
	left: var(--hist-cover-nudge);
	background: var(--wyohs-peach, #f6d7b3);
	text-align: left;
	width: fit-content;
	max-width: calc(100% - var(--hist-cover-out) - var(--hist-cover-nudge));
	margin: 84px auto;
}

/* The bar's left padding clears the cover column, so the label starts on the
   same vertical line as the title below it and the tilted cover laps an
   empty stretch of bar rather than the words. */
.wyohs-hist__featured-bar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px 32px;
	background: var(--wyohs-sand, #d2a56c);
	padding: 15px var(--hist-bar-x) 13px;
	padding-left: calc(var(--hist-cover-w) - var(--hist-cover-out) + var(--hist-cover-gap));
}

.wyohs-hist__featured-field {
	padding: 34px var(--hist-bar-x) 38px;
	padding-left: calc(var(--hist-cover-w) - var(--hist-cover-out) + var(--hist-cover-gap));
}

/* Out of the flow and centred on the panel's height, so a cover taller than
   the panel hangs past both edges; rotated about its own centre so it reads
   as a sheet dropped on the box rather than a hinged element. Two shadows, a
   tight one for contact and a wide one for height. */
.wyohs-hist__featured-cover {
	display: block;
	position: absolute;
	left: calc(var(--hist-cover-out) * -1);
	top: 50%;
	width: var(--hist-cover-w);
	text-decoration: none;
	transform: translateY(-50%) rotate(-3.4deg);
	transform-origin: 50% 50%;
	transition: transform .25s ease;
	z-index: 2;
}

.wyohs-hist__cover-img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid rgba(26, 26, 26, .16);
	box-shadow:
		0 2px 4px rgba(26, 26, 26, .18),
		0 18px 34px rgba(26, 26, 26, .30);
	transition: box-shadow .25s ease;
}

/* Driven from the panel rather than from the thing hovered, so the cover
   lifts from anywhere in the module. :focus-within mirrors it for the
   keyboard, where the buttons are the only stops. */
.wyohs-hist__featured:hover .wyohs-hist__featured-cover,
.wyohs-hist__featured:focus-within .wyohs-hist__featured-cover {
	transform: translateY(calc(-50% - 5px)) rotate(-1.1deg);
}

.wyohs-hist__featured:hover .wyohs-hist__cover-img,
.wyohs-hist__featured:focus-within .wyohs-hist__cover-img {
	box-shadow:
		0 3px 6px rgba(26, 26, 26, .16),
		0 26px 46px rgba(26, 26, 26, .32);
}

.wyohs-hist__featured-kicker,
.wyohs-hist__featured-meta,
.wyohs-hist__head-count,
.wyohs-hist__entry-author,
.wyohs-hist__row-date,
.wyohs-hist__cta {
	font-family: var(--wyohs-display, 'Special Gothic Condensed One', sans-serif);
	text-transform: uppercase;
	letter-spacing: 2px;
}

.wyohs-hist__featured-kicker {
	font-size: 14px;
	line-height: 1.2;
	color: var(--wyohs-navy, #1b3a5c);
	margin: 0;
}

.wyohs-hist__featured-meta {
	font-size: 14px;
	line-height: 1.2;
	color: rgba(27, 58, 92, .82);
	margin: 0;
}

.wyohs-hist__featured-body {
	padding-top: 2px;
}

.wyohs-hist__featured-title {
	font-family: var(--wyohs-serif, 'Young Serif', Georgia, serif);
	font-weight: 400;
	font-size: 46px;
	line-height: 1.08;
	text-align: left;
	color: var(--wyohs-navy, #1b3a5c);
	margin: 0 0 14px;
}

.wyohs-hist__featured-teaser {
	font-size: 19px;
	line-height: 1.55;
	text-align: left;
	color: var(--wyohs-ink, #1a1a1a);
	margin: 0 0 26px;
	max-width: 30em;
}

/* Two buttons, so they wrap rather than span. The second is outlined rather
   than filled: subscribing is the larger commitment, but buying this issue
   is the thing most readers came to do, and two solid navy blocks side by
   side make the reader choose before they have read either label. */
.wyohs-hist__buys {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0;
}

.wyohs-hist__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 16px;
	line-height: 1;
	color: var(--wyohs-cream, #fff8e7);
	background: var(--wyohs-navy, #1b3a5c);
	border: 2px solid var(--wyohs-navy, #1b3a5c);
	padding: 15px 24px 13px;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.wyohs-hist__cta--quiet {
	color: var(--wyohs-navy, #1b3a5c);
	background: transparent;
}

.wyohs-hist__cta:hover,
.wyohs-hist__cta:focus-visible {
	background: var(--wyohs-green, #4e9553);
	border-color: var(--wyohs-green, #4e9553);
	color: var(--wyohs-cream, #fff8e7);
}

.wyohs-hist__cta .wyohs-hist__chev {
	color: inherit;
	font-size: 20px;
	transition: transform .15s ease;
}

.wyohs-hist__cta:hover .wyohs-hist__chev,
.wyohs-hist__cta:focus-visible .wyohs-hist__chev {
	transform: translateX(4px);
}

/* Contents --------------------------------------------------------------
   The file-row idiom with the 64px kind tile taken off: serif title, quiet
   condensed-caps attribution pushed right, the whole list ruled top and
   bottom so it reads as one object rather than as loose lines.
   ----------------------------------------------------------------------- */

.wyohs-hist__contents {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1160px;
	border-top: 2px solid var(--hist-rule);
	border-bottom: 2px solid var(--hist-rule);
}

.wyohs-hist__entry {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px 32px;
	align-items: baseline;
	padding: 18px 4px;
}

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

/* Named parent and an explicit transform, because .fl-builder-content styles
   every heading-shaped thing inside builder content and a bare class loses.
   This is a span rather than a heading for exactly that reason. */
.wyohs-hist .wyohs-hist__entry-title {
	display: block;
	font-family: var(--wyohs-serif, 'Young Serif', Georgia, serif);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.3;
	text-transform: none;
	color: var(--wyohs-navy, #1b3a5c);
}

.wyohs-hist__entry-author {
	display: block;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 1.5px;
	color: var(--hist-quiet);
	white-space: nowrap;
}

/* Section head ----------------------------------------------------------- */

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

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

.wyohs-hist__head-count {
	font-size: 14px;
	letter-spacing: 1.6px;
	color: var(--hist-quiet);
	margin: 0;
}

/* Issue rows ------------------------------------------------------------- */

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

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

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

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

.wyohs-hist__row-cover {
	display: block;
	width: 64px;
	aspect-ratio: 687 / 1024;
	overflow: hidden;
	background: #e6e2d8;
	border: 1px solid var(--hist-hair);
	box-shadow: 0 1px 3px rgba(26, 26, 26, .14);
}

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

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

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

.wyohs-hist__row-teaser {
	display: block;
	font-size: 15px;
	line-height: 1.5;
	color: var(--hist-quiet);
	margin-top: 4px;
}

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

.wyohs-hist__row-date {
	font-size: 13px;
	color: var(--hist-quiet);
}

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

a.wyohs-hist__row:hover .wyohs-hist__chev {
	transform: translateX(3px);
}

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

@media (max-width: 980px) {
	.wyohs-hist {
		--hist-bar-x: 28px;
		--hist-cover-w: 216px;
		--hist-cover-out: 16px;
		--hist-cover-gap: 30px;
	}

	/* Full width from here down, so there is nothing left to centre. */
	.wyohs-hist__featured {
		left: 0;
		width: auto;
		max-width: none;
		margin: 64px 0 64px var(--hist-cover-out);
	}

	.wyohs-hist__featured-field {
		padding: 28px var(--hist-bar-x) 32px;
		padding-left: calc(var(--hist-cover-w) - var(--hist-cover-out) + var(--hist-cover-gap));
	}

	.wyohs-hist__featured-title {
		font-size: 34px;
	}

	.wyohs-hist__featured-teaser {
		font-size: 17px;
		margin-bottom: 22px;
	}
}

@media (max-width: 640px) {
	.wyohs-hist {
		--hist-bar-x: 20px;
	}

	/* Stacked, the cover comes back into the flow and sits inside the field.
	   There is no cover column left to indent the label past, and a tilted
	   sheet hanging over a 20px gutter reads as a mistake, not as depth. */
	.wyohs-hist__featured {
		left: 0;
		width: auto;
		max-width: none;
		margin: 24px 0 60px;
	}

	.wyohs-hist__featured-bar {
		padding-left: var(--hist-bar-x);
	}

	.wyohs-hist__featured-field {
		padding: 26px var(--hist-bar-x) 30px;
	}

	.wyohs-hist__featured-cover {
		position: static;
		width: 152px;
		margin: 0 0 22px 4px;
		transform: rotate(-3.4deg);
	}

	.wyohs-hist__featured:hover .wyohs-hist__featured-cover,
	.wyohs-hist__featured:focus-within .wyohs-hist__featured-cover {
		transform: rotate(-1.1deg) translateY(-5px);
	}

	.wyohs-hist__featured-title {
		font-size: 30px;
	}

	.wyohs-hist__cta {
		font-size: 15px;
		padding: 14px 20px 12px;
	}

	/* The attribution drops under its title rather than setting four words
	   wide in a column of its own. */
	.wyohs-hist__entry {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
		padding: 16px 4px;
	}

	.wyohs-hist__entry-author {
		white-space: normal;
	}

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

	.wyohs-hist__row-cover {
		width: 52px;
	}

	.wyohs-hist__row-meta {
		grid-column: 2;
		gap: 14px;
		margin-top: 6px;
	}

	.wyohs-hist__row .wyohs-hist__chev {
		display: none;
	}
}

/* Undoing the host module ------------------------------------------------
   Insurance only: these shortcodes sit in their own HTML modules beside the
   prose rather than inside it, which is the arrangement Our Books had to be
   moved to after its buy buttons rendered navy on navy. If one is ever moved
   back into a .wyohs-prose module, this block is what keeps it legible.
   ----------------------------------------------------------------------- */

.wyohs-prose .wyohs-hist__featured-title { font-size: 46px; text-align: left; }
.wyohs-prose .wyohs-hist__featured-teaser { font-size: 19px; text-align: left; }
.wyohs-prose .wyohs-hist__head-title { font-size: 32px; text-align: left; }

.wyohs-prose .wyohs-hist__featured-bar,
.wyohs-prose .wyohs-hist__featured-field,
.wyohs-prose .wyohs-hist__featured-body,
.wyohs-prose .wyohs-hist__entry,
.wyohs-prose .wyohs-hist__row { text-align: left; }

.wyohs-prose a.wyohs-hist__cta,
.wyohs-prose a.wyohs-hist__cta:hover {
	color: var(--wyohs-cream, #fff8e7);
	text-decoration: none;
}

.wyohs-prose a.wyohs-hist__cta--quiet {
	color: var(--wyohs-navy, #1b3a5c);
}

.wyohs-prose a.wyohs-hist__cta--quiet:hover {
	color: var(--wyohs-cream, #fff8e7);
}

.wyohs-prose a.wyohs-hist__row,
.wyohs-prose a.wyohs-hist__row:hover,
.wyohs-prose a.wyohs-hist__featured-cover,
.wyohs-prose a.wyohs-hist__featured-cover:hover {
	text-decoration: none;
	color: inherit;
}

@media (max-width: 980px) {
	.wyohs-prose .wyohs-hist__featured-title { font-size: 34px; }
}

@media (max-width: 640px) {
	.wyohs-prose .wyohs-hist__featured-title { font-size: 30px; }
}

/* Page furniture ---------------------------------------------------------
   The heading and note modules on the page itself rather than inside the
   components, matched to the interior section head used on History of the
   Society, Contact and all five Partner Archives pages: Young Serif 34px,
   weight 400, left aligned over the same 1160px measure the components use.

   width:100% needs margin-left:0 / margin-right:0 beside it. The theme gives
   every module 20px of side margin above 992px and the percentage resolves
   against the column's content box, so module plus margins runs 40px wider
   than the column. Above roughly 1240px the row's own centring absorbs the
   overhang and nothing shows; at 1200px the document gains a horizontal
   scrollbar. Auto margins are used here instead, which sidesteps it.
   ----------------------------------------------------------------------- */

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

.wyohs-historian-page__note {
	font-size: 17px;
	line-height: 1.6;
	text-align: left;
	color: #5c5c5c;
	width: 100%;
	max-width: 1160px;
	margin: 14px auto 0;
}

.wyohs-historian-page__note p {
	margin: 0 0 12px;
}

.wyohs-historian-page__note p:last-child {
	margin-bottom: 0;
}

/* One column holding a grid rather than three columns, because Beaver
   Builder deletes a column the moment it is empty. */
.wyohs-historian-page--cards .fl-col-content {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

@media (max-width: 1000px) {
	.wyohs-historian-page--cards .fl-col-content {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.wyohs-historian-page--cards .fl-col-content {
		grid-template-columns: 1fr;
	}

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