/* -----------------------------------------------------------------------
   Wyoming History News archive

   Rows, not cards. Seventy-four covers in a grid is a wall; what a reader
   does here is scan for a month, so the cover sits small at the left of a
   row and the month carries the line.

   The current issue above the archive is 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. The panel and that overhang are centred together as one
   object; nothing inside it is centred.

   The year heading, its count and the 2px rule beneath are the Governing
   Documents rhythm, so the two archives read as siblings.
   ----------------------------------------------------------------------- */

/* The archive is printed inside the page-intro prose module, which centres
   its text and sets a reading measure. Neither applies to a table of rows,
   so both are reset here, and the 60px echoes the gap the section index
   keeps from the same lead paragraph. */
.wyohs-whn {
	text-align: left;
	--whn-rule: rgba(26, 26, 26, .22);
	--whn-hair: rgba(26, 26, 26, .12);
	--whn-quiet: #5c5c5c;
	--whn-bar-x: 40px;
	--whn-cover-w: 300px;
	--whn-cover-out: 24px;
	--whn-cover-gap: 46px;
	/* Half the cover's total left overhang: 24px of offset plus the 11px
	   wedge the 3.4deg tilt throws past its own box. Centring the panel
	   alone would sit the composition half that distance left of centre. */
	--whn-cover-nudge: 18px;
	max-width: 1160px;
	margin: 60px auto 0;
	padding: 0 20px;
}

.wyohs-whn .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

/* Current issue ---------------------------------------------------------
   One issue gets room, because the newest one is what most people came for.
   Three bands, no centring, and the only piece of depth on the page.
   Everything below it is the archive proper. */

/* Sized to its own text, not to the page: a two-line panel beside a tall
   cover is what makes the overhang read as deliberate. Auto margins centre
   the panel's own box; the relative nudge then moves panel and cover
   together so what reads as centred is the composition, not the rectangle.
   The vertical margins are clearance for the cover's overhang. */
.wyohs-whn__featured {
	position: relative;
	left: var(--whn-cover-nudge);
	background: var(--wyohs-peach, #f6d7b3);
	text-align: left;
	width: fit-content;
	max-width: calc(100% - var(--whn-cover-out) - var(--whn-cover-nudge));
	margin: 84px auto;
	cursor: pointer;
}

/* Band one: the label bar. Left end names it, right end carries the
   volume, number and file size, so the reader knows the weight of the
   download before the button asks for the click.

   Its 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 over
   an empty stretch of bar rather than over the words. */
.wyohs-whn__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(--whn-bar-x) 13px;
	padding-left: calc(var(--whn-cover-w) - var(--whn-cover-out) + var(--whn-cover-gap));
}

/* Band two: the field. The cover is absolutely positioned, so the field's
   own left padding is what reserves room for it and the panel's height is
   set by the text alone. */
.wyohs-whn__featured-field {
	padding: 34px var(--whn-bar-x) 38px;
	padding-left: calc(var(--whn-cover-w) - var(--whn-cover-out) + var(--whn-cover-gap));
}

/* The tilt. 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-whn__featured-cover {
	display: block;
	position: absolute;
	left: calc(var(--whn-cover-out) * -1);
	top: 50%;
	width: var(--whn-cover-w);
	text-decoration: none;
	transform: translateY(-50%) rotate(-3.4deg);
	transform-origin: 50% 50%;
	transition: transform .25s ease;
	z-index: 2;
}

.wyohs-whn__featured-cover .wyohs-whn__cover {
	width: 100%;
	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;
}

/* Every hover state on this panel is driven from the panel, not from the
   thing being hovered, so the cover lifts and the button lights whichever
   part of the module the pointer is over. :focus-within does the same for
   the keyboard, where the button is the only stop. */
.wyohs-whn__featured:hover .wyohs-whn__featured-cover,
.wyohs-whn__featured:focus-within .wyohs-whn__featured-cover {
	transform: translateY(calc(-50% - 5px)) rotate(-1.1deg);
}

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

.wyohs-whn__featured-kicker,
.wyohs-whn__year-count,
.wyohs-whn__no,
.wyohs-whn__size,
.wyohs-whn__featured-meta,
.wyohs-whn__featured-cta {
	font-family: var(--wyohs-display, 'Special Gothic Condensed One', sans-serif);
	text-transform: uppercase;
	letter-spacing: 2px;
}

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

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

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

.wyohs-whn__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-whn__featured-teaser {
	font-size: 19px;
	line-height: 1.55;
	text-align: left;
	color: var(--wyohs-ink, #1a1a1a);
	margin: 0 0 26px;
	max-width: 30em;
}

/* The button sits under the cover story rather than spanning the box, so the
   panel can end where the text ends. */
.wyohs-whn__featured-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);
	padding: 17px 26px 15px;
	text-decoration: none;
	transition: background-color .15s ease;
}

/* The button's own box is small, but its hit area is the whole panel: the
   pseudo-element has no positioned ancestor nearer than .wyohs-whn__featured,
   so inset:0 stretches it over the entire box. The cover keeps its own
   anchor, which is what makes the part hanging outside the panel clickable
   too. Both point at the same PDF, and the cover's anchor is aria-hidden and
   untabbable, so this is still one link to a reader. */
.wyohs-whn__featured-cta::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
}

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

.wyohs-whn__featured:hover .wyohs-whn__featured-cta .wyohs-whn__chev,
.wyohs-whn__featured-cta:focus-visible .wyohs-whn__chev {
	transform: translateX(4px);
}

/* Year ------------------------------------------------------------------ */

.wyohs-whn__year {
	margin: 0 0 56px;
}

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

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

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

/* Rows ------------------------------------------------------------------ */

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

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

.wyohs-whn__link {
	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;
}

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

.wyohs-whn__cover {
	display: block;
	width: 64px;
	aspect-ratio: 17 / 22;
	overflow: hidden;
	background: #e6e2d8;
	border: 1px solid var(--whn-hair);
	box-shadow: 0 1px 3px rgba(26, 26, 26, .14);
}

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

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

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

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

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

.wyohs-whn__no,
.wyohs-whn__size {
	font-size: 13px;
	color: var(--whn-quiet);
}

.wyohs-whn__size {
	min-width: 62px;
	text-align: right;
}

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

.wyohs-whn__link:hover .wyohs-whn__chev {
	transform: translateX(3px);
}

.wyohs-whn__featured-cta .wyohs-whn__chev {
	color: inherit;
	font-size: 20px;
}

.wyohs-whn__empty {
	font-size: 17px;
	color: var(--whn-quiet);
}

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

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

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

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

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

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

@media (max-width: 640px) {
	.wyohs-whn {
		--whn-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-whn__featured {
		left: 0;
		width: auto;
		max-width: none;
		margin: 24px 0 60px;
	}

	.wyohs-whn__featured-bar {
		padding-left: var(--whn-bar-x);
	}

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

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

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

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

	/* The chevron and the file size both stop earning their space here.
	   The month and the cover are enough to pick an issue by. */
	.wyohs-whn__link {
		grid-template-columns: 52px minmax(0, 1fr);
		gap: 16px;
		padding: 16px 4px;
	}

	.wyohs-whn__cover {
		width: 52px;
	}

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

	.wyohs-whn__link .wyohs-whn__chev {
		display: none;
	}

	.wyohs-whn__size {
		min-width: 0;
		text-align: left;
	}
}

/* Undoing the host module ------------------------------------------------
   The archive prints inside a .wyohs-prose--lead rich-text module, which
   centres paragraphs, sizes every h2 at 38px and colours every link navy.
   Right for prose, wrong for an archive, so undone at a specificity that
   beats them.
   ----------------------------------------------------------------------- */

.wyohs-prose .wyohs-whn__year-title { font-size: 32px; text-align: left; }

.wyohs-prose .wyohs-whn__featured-title {
	font-size: 46px;
	text-align: left;
}

.wyohs-prose .wyohs-whn__featured-teaser {
	text-align: left;
	font-size: 19px;
}

.wyohs-prose .wyohs-whn__featured-bar,
.wyohs-prose .wyohs-whn__featured-field,
.wyohs-prose .wyohs-whn__featured-body {
	text-align: left;
}

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

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

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

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