/*
Theme Name: FRSN
Theme URI: https://github.com/jasonmonster/frsn-theme
Author: Overtime Agency
Author URI: https://overtimeagency.com
Description: Block theme for Front Range Sports Net. News-first Colorado sports coverage with galleries. Pairs with the FRSN Core plugin, which owns the content architecture.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version: 0.1.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: frsn
Tags: news, blog, block-theme, full-site-editing, custom-colors, custom-menu

Montserrat is licensed under the SIL Open Font License 1.1.
See assets/fonts/OFL.txt.
*/

/*
 * Everything expressible in theme.json lives there. This file covers the
 * things it cannot say: grid behaviour, the section-heading rule, sticky
 * header state, and the accessibility affordances.
 */

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */

:root {
	--frsn-card-min: 280px;
	--frsn-card-gap: 1.5rem;
	--frsn-radius: 8px;
	--frsn-border: #E4E2DD;
	--frsn-transition: 160ms ease;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Gold is the brand accent but fails contrast as text on light, so it marks
   links as an underline rather than colouring them. */
.wp-block-post-content a:where(:not(.wp-element-button)),
.entry-content a:where(:not(.wp-element-button)) {
	text-decoration-color: var(--wp--preset--color--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: text-decoration-color var(--frsn-transition);
}

.wp-block-post-content a:where(:not(.wp-element-button)):hover,
.entry-content a:where(:not(.wp-element-button)):hover {
	text-decoration-color: var(--wp--preset--color--navy);
}

/* A visible focus ring everywhere, in brand colours rather than the browser
   default, which disappears against navy. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
	border-radius: 2px;
}

.frsn-skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy);
	font-weight: 700;
	text-decoration: none;
	border-radius: 0 0 var(--frsn-radius) var(--frsn-radius);
}

.frsn-skip-link:focus {
	top: 0;
}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */

.frsn-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--navy);
	transition: background var(--frsn-transition), box-shadow var(--frsn-transition);
}

.frsn-header.is-scrolled {
	background: var(--wp--preset--color--navy-deep);
	box-shadow: 0 2px 12px rgba(17, 20, 24, 0.18);
}

.frsn-header .wp-block-site-logo img {
	height: 40px;
	width: auto;
}

/* Nav sits on navy, so white passes at 12.85:1 and gold marks the active
   item at 7.47:1. The colour is set on the Navigation block itself in
   header.html; this only handles the parts theme.json cannot reach. */
.frsn-header .wp-block-navigation,
.frsn-header .wp-block-navigation a,
.frsn-header .wp-block-navigation button {
	color: var(--wp--preset--color--white);
}

.frsn-header .wp-block-navigation {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.frsn-header .wp-block-navigation-item__content {
	text-decoration: none;
	padding-block: 0.5rem;
	border-bottom: 3px solid transparent;
	transition: border-color var(--frsn-transition);
}

.frsn-header .wp-block-navigation-item__content:hover,
.frsn-header .current-menu-item > .wp-block-navigation-item__content,
.frsn-header .current-menu-ancestor > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--gold);
}

.frsn-header .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--navy-deep);
	border: 0;
	border-top: 3px solid var(--wp--preset--color--gold);
	min-width: 220px;
	padding-block: 0.5rem;
}

.frsn-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-bottom: 0;
	padding: 0.5rem 1rem;
	text-transform: none;
	letter-spacing: 0.02em;
	font-weight: 500;
	font-size: 0.875rem;
}

.frsn-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--gold);
}

/* ---------------------------------------------------------------------------
   Section headings
   The ruled "HIGH SCHOOL ———— ALL HIGH SCHOOL →" row.
   --------------------------------------------------------------------------- */

.frsn-section-heading {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-block-end: 1.75rem;
}

.frsn-section-heading__title {
	flex-shrink: 0;
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 900;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
}

.frsn-section-heading__rule {
	flex: 1;
	height: 3px;
	background: var(--wp--preset--color--gold);
}

.frsn-section-heading__link {
	flex-shrink: 0;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--navy);
	white-space: nowrap;
}

.frsn-section-heading__link:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* On a dark band the whole row inverts. */
.has-navy-background-color .frsn-section-heading__title,
.has-navy-deep-background-color .frsn-section-heading__title,
.has-navy-background-color .frsn-section-heading__link,
.has-navy-deep-background-color .frsn-section-heading__link {
	color: var(--wp--preset--color--white);
}

/* ---------------------------------------------------------------------------
   Cards
   Four across at full width, degrading to 3 / 2 / 1 on intrinsic size rather
   than on breakpoints.
   --------------------------------------------------------------------------- */

.frsn-cards .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--frsn-card-min), 1fr));
	gap: var(--frsn-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Core's flow layout sets margin-block-start on every child except the first.
   Overriding the template to display:grid leaves those margins in place, which
   pushes items 2..n down and leaves the first card sitting high. Every rail had
   a staggered top edge because of it. */
.frsn-cards .wp-block-post-template > li,
.frsn-hero__side .wp-block-post-template > li {
	margin-block: 0;
	align-self: stretch;
}

.frsn-cards.is-cols-4 .wp-block-post-template {
	grid-template-columns: repeat(auto-fill, minmax(var(--frsn-card-min), 1fr));
}

.frsn-cards.is-cols-3 .wp-block-post-template {
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.frsn-card {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--frsn-border);
	border-radius: var(--frsn-radius);
	overflow: hidden;
	transition: transform var(--frsn-transition), box-shadow var(--frsn-transition);
}

.frsn-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(28, 48, 94, 0.12);
}

.frsn-card .wp-block-post-featured-image {
	margin: 0;
}

.frsn-card .wp-block-post-featured-image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
	height: auto;
	display: block;
}

.frsn-card__body {
	padding: 1rem 1.125rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
}

.frsn-card .wp-block-post-title {
	font-size: 1.125rem;
	line-height: 1.15;
	margin: 0;
}

.frsn-card .wp-block-post-title a {
	text-decoration: none;
}

.frsn-card .wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Headline normalisation

   Card heights already match because the grid stretches them, but the text
   inside did not: a one-line headline left the byline floating halfway up the
   card while a three-line headline pushed it to the floor. Clamping the title
   to a fixed line count gives every card the same text block, and pushing the
   byline to the bottom means the meta line sits at the same height across a
   whole row whatever the headlines do.
   --------------------------------------------------------------------------- */

.frsn-card .wp-block-post-title,
.frsn-side-card .wp-block-post-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.frsn-card .wp-block-post-title {
	-webkit-line-clamp: 3;
	/* Floor as well as ceiling: a short headline still reserves three lines, so
	   short and long cards in the same row line up. */
	min-height: calc(3 * 1.15em);
}

.frsn-side-card .wp-block-post-title {
	-webkit-line-clamp: 3;
}

/* A long path like "College · CU Women's Volleyball" wraps to two lines and
   shunts the headline down on that one card only. */
.frsn-card .wp-block-post-terms,
.frsn-side-card .wp-block-post-terms {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.frsn-card .frsn-byline {
	margin-top: auto;
	padding-top: 0.5rem;
}

/* Kickers are navy, not gold. Gold on white is 1.72:1 and fails AA at any
   size, and a kicker is 11px. */
.frsn-card .wp-block-post-terms {
	margin: 0;
}

.frsn-card .wp-block-post-terms a {
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Gallery card badge
   --------------------------------------------------------------------------- */

.frsn-card__media {
	position: relative;
	line-height: 0;
}

.frsn-card--gallery .wp-block-post-featured-image {
	position: relative;
	margin: 0;
}

.frsn-photo-count {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 4px;
	background: var(--wp--preset--color--navy-deep);
	color: var(--wp--preset--color--white);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

.frsn-photo-count::before {
	content: "";
	width: 12px;
	height: 10px;
	background: var(--wp--preset--color--gold);
	clip-path: polygon(0 25%, 28% 25%, 38% 8%, 62% 8%, 72% 25%, 100% 25%, 100% 100%, 0 100%);
}

/* ---------------------------------------------------------------------------
   Article
   Gray title band, then a two column body: story left, sidebar right.
   --------------------------------------------------------------------------- */

.wp-site-blocks > .frsn-flush {
	margin-block-start: 0;
}

/* Gray rather than navy. Against the navy nav the old band read as one
   continuous block with no break between chrome and content. At 9.93:1 for
   navy type this is comfortably readable, but gold is 1.33:1 on it, so the
   kicker here is navy. Gold stays on dark surfaces only. */
.frsn-article-header {
	background: #E4E2DD;
	border-bottom: 1px solid #D5D2CB;
	padding-top: 2rem !important;
	padding-bottom: 1.75rem !important;
	margin-bottom: var(--wp--preset--spacing--50);
}

.frsn-article-header__inner {
	max-width: 1140px;
	margin-inline: auto;
}

.frsn-article-header .wp-block-post-terms,
.frsn-article-header .wp-block-post-terms a {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.frsn-article-header .wp-block-post-title {
	color: var(--wp--preset--color--navy);
	font-size: clamp(1.75rem, 3.4vw, 2.625rem);
	line-height: 1.06;
	margin: 0.4rem 0 0.6rem;
	max-width: 24ch;
}

.frsn-article-header .frsn-byline,
.frsn-article-header .frsn-byline a {
	color: #3A3F47;
}

/* Two columns, both capped. The story column stays at a readable measure
   instead of stretching to whatever the container leaves over. */
.frsn-article {
	display: grid;
	grid-template-columns: minmax(0, 760px) 320px;
	justify-content: center;
	gap: 3rem;
	align-items: start;
}

@media (max-width: 1120px) {
	.frsn-article {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 2rem;
	}
}

@media (max-width: 880px) {
	.frsn-article {
		grid-template-columns: 1fr;
	}
}

.frsn-article__main {
	min-width: 0;
}

/* Natural aspect ratio, column width. Cropping to a fixed height was cutting
   the tops off the frames, and a full-container 16:9 was 787px tall. Sitting
   in a 760px column solves both without touching the image. */
.frsn-article-hero {
	margin: 0 0 var(--wp--preset--spacing--40);
}

.frsn-article-hero img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--frsn-radius);
}

.frsn-article-hero figcaption {
	font-size: 0.75rem;
	color: var(--wp--preset--color--muted);
	margin-top: 0.5rem;
}

.wp-block-post-content > * {
	margin-block: 1.1rem;
}

.wp-block-post-content > h2 {
	margin-block-start: 2rem;
	font-size: 1.375rem;
}

.wp-block-post-content > h3 {
	margin-block-start: 1.75rem;
}

.wp-block-post-content > p:first-of-type {
	font-size: 1.0625rem;
	line-height: 1.6;
}

.frsn-article__teams {
	margin-top: var(--wp--preset--spacing--50);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
}

.wp-block-post-content .wp-block-quote {
	margin-block: 1.75rem;
}

.wp-block-post-content .wp-block-quote cite,
.wp-block-quote cite {
	display: block;
	margin-top: 0.5rem;
	font-style: normal;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------------------
   Article sidebar
   --------------------------------------------------------------------------- */

.frsn-article__side {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.frsn-side__heading {
	font-size: 0.6875rem !important;
	font-weight: 900;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
	margin: 0 0 0.875rem;
	padding-bottom: 0.5rem;
	border-bottom: 3px solid var(--wp--preset--color--gold);
}

.frsn-side__heading a {
	color: inherit;
	text-decoration: none;
}

.frsn-side__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.frsn-side__item a {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 0.75rem;
	align-items: start;
	text-decoration: none;
}

.frsn-side__thumb {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

.frsn-side__title {
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--navy);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.frsn-side__item a:hover .frsn-side__title {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
}

/* Gallery card */

.frsn-side__gallery {
	display: block;
	text-decoration: none;
}

.frsn-side__gallery-media {
	position: relative;
	display: block;
	line-height: 0;
}

.frsn-side__gallery-media img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--frsn-radius);
	display: block;
}

.frsn-side__gallery-title {
	display: block;
	margin-top: 0.6rem;
	font-size: 0.9375rem;
	font-weight: 900;
	line-height: 1.2;
	color: var(--wp--preset--color--navy);
}

.frsn-side__gallery:hover .frsn-side__gallery-title {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Headlines */

.frsn-side__headlines {
	list-style: none;
	margin: 0;
	padding: 0;
}

.frsn-side__headlines li {
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--frsn-border);
}

.frsn-side__headlines li:last-child {
	border-bottom: 0;
}

.frsn-side__kicker {
	display: block;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.15rem;
}

.frsn-side__headlines a {
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.frsn-side__headlines a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
}

/* Sticky ad. position:sticky needs a scrollable run above it, so it is the
   last item in the column and sticks once the rest has scrolled past. */
.frsn-article__sticky {
	position: sticky;
	top: calc(var(--wp--custom--header--height, 72px) + 1rem);
}

@media (max-width: 880px) {
	.frsn-article__sticky {
		position: static;
	}
}

/* ---------------------------------------------------------------------------
   Byline
   --------------------------------------------------------------------------- */

.frsn-byline {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wp--preset--color--muted);
}

.frsn-byline a {
	color: inherit;
	text-decoration: none;
	font-weight: 700;
}

.frsn-byline a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.frsn-article-header .frsn-byline,
.frsn-article-header .frsn-byline a {
	color: var(--wp--preset--color--navy-tint);
}

/* ---------------------------------------------------------------------------
   Footer
   Five columns: brand, then the coverage tree, then sections, then the pages
   that make the outlet look like an outlet. Those last four live here and
   nowhere else, so the header stays purely about coverage.
   --------------------------------------------------------------------------- */

.frsn-footer {
	background: var(--wp--preset--color--navy-deep);
	color: var(--wp--preset--color--navy-tint);
}

.frsn-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr repeat(4, 1fr);
	gap: 2rem;
	align-items: start;
}

@media (max-width: 1100px) {
	.frsn-footer__grid {
		grid-template-columns: 1fr 1fr 1fr;
		row-gap: 2.5rem;
	}

	.frsn-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.frsn-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.frsn-footer a {
	color: var(--wp--preset--color--navy-tint);
	text-decoration: none;
	transition: color var(--frsn-transition);
}

.frsn-footer a:hover {
	color: var(--wp--preset--color--gold);
}

.frsn-footer .wp-block-site-logo img {
	height: 46px;
	width: auto;
}

.frsn-footer__blurb {
	margin: 1rem 0 0.5rem;
	font-size: 0.875rem;
	line-height: 1.6;
	max-width: 32ch;
	color: #fff;
}

.frsn-footer__meta {
	margin: 0 0 1.25rem;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gray);
}

.frsn-footer__social {
	margin: 0;
}

/* Column headings. Gold would fail contrast as small text on almost anything,
   but it clears 7.47:1 on navy, so this is one of the two places it carries
   type. */
.frsn-footer__heading,
.frsn-coverage-list__title {
	font-size: 0.6875rem !important;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin: 0 0 0.75rem;
}

.frsn-coverage-list__title a {
	color: inherit;
}

.frsn-footer__links,
.frsn-coverage-list__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: 0.875rem;
}

.frsn-footer__col > .frsn-coverage-list {
	margin-bottom: 1.75rem;
}

.frsn-footer__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(221, 224, 231, 0.16);
}

.frsn-footer__copy,
.frsn-footer__legal {
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--gray);
}

/* ---------------------------------------------------------------------------
   Contributor index
   --------------------------------------------------------------------------- */

.frsn-contributor-index {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1rem;
}

.frsn-contributor-index__item a {
	display: grid;
	grid-template-columns: 64px 1fr;
	grid-template-rows: auto auto;
	column-gap: 1rem;
	align-items: center;
	padding: 1rem;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--frsn-border);
	border-radius: var(--frsn-radius);
	text-decoration: none;
	transition: box-shadow var(--frsn-transition);
}

.frsn-contributor-index__item a:hover {
	box-shadow: 0 6px 20px rgba(28, 48, 94, 0.12);
}

.frsn-contributor-index__photo {
	grid-row: span 2;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.frsn-contributor-index__photo--empty {
	background: var(--wp--preset--color--navy-tint);
}

.frsn-contributor-index__name {
	font-weight: 900;
	font-size: 1rem;
	color: var(--wp--preset--color--navy);
	line-height: 1.2;
}

.frsn-contributor-index__role {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.frsn-contributor-index__count {
	display: none;
}

/* ---------------------------------------------------------------------------
   Pagination and utility
   --------------------------------------------------------------------------- */

.wp-block-query-pagination {
	margin-block-start: 3rem;
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
}

.wp-block-query-pagination .page-numbers {
	padding: 0.5rem 0.85rem;
	border-radius: 4px;
	text-decoration: none;
}

.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.frsn-screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
   Homepage hero
   Lead image with three stacked beside it, flush to the header and sitting on
   the page canvas rather than its own coloured band.

   Height is fixed rather than driven by content. The lead image crops to fill
   and the three side cards divide the same height into equal thirds, so the
   block is as tall as the design says regardless of headline length.
   --------------------------------------------------------------------------- */

/* Now that the hero sits on the canvas rather than its own coloured band, the
   gap under the nav reads as deliberate whitespace instead of a seam. Setting
   it explicitly rather than inheriting core's default block gap, so it is a
   decision and not an accident. */
.wp-site-blocks > .frsn-hero {
	margin-block-start: var(--wp--preset--spacing--40);
}

.frsn-hero {
	background: transparent;
	padding: 0 !important;
}

.frsn-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 460px;
	gap: 0;
	height: 460px;
}

@media (max-width: 1200px) {
	.frsn-hero__grid {
		grid-template-columns: minmax(0, 1fr) 380px;
		height: 420px;
	}
}

@media (max-width: 900px) {
	.frsn-hero__grid {
		grid-template-columns: 1fr;
		height: auto;
	}
}

.frsn-hero__lead,
.frsn-hero__lead .wp-block-post-template,
.frsn-hero__lead .wp-block-post-template > li {
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.frsn-lead-card {
	height: 100%;
	min-height: 0;
	border-radius: 0;
}

@media (max-width: 900px) {
	.frsn-lead-card {
		min-height: 320px;
	}
}

.frsn-lead-card .wp-block-cover__inner-container {
	width: 100%;
	max-width: 40rem;
}

.frsn-lead-card .wp-block-post-title {
	margin: 0.4rem 0 0.5rem;
	line-height: 1.06;
	font-size: clamp(1.625rem, 2.6vw, 2.25rem) !important;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.frsn-lead-card .wp-block-post-title a {
	color: #fff;
	text-decoration: none;
}

.frsn-lead-card .wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--gold);
	text-decoration-thickness: 3px;
	text-underline-offset: 5px;
}

.frsn-lead-card .wp-block-post-terms,
.frsn-lead-card .wp-block-post-terms a {
	color: var(--wp--preset--color--gold);
	text-decoration: none;
}

.frsn-lead-card .wp-block-post-excerpt {
	margin: 0 0 0.4rem;
	font-size: 0.875rem;
	line-height: 1.5;
}

.frsn-lead-card .frsn-byline,
.frsn-lead-card .frsn-byline a {
	color: var(--wp--preset--color--navy-tint);
	font-size: 0.75rem;
}

/* Side column: light cards on the canvas, hairline dividers, no floating. */

.frsn-hero__side,
.frsn-hero__side .wp-block-post-template {
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.frsn-hero__side .wp-block-post-template {
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	gap: 0;
	border-left: 1px solid var(--frsn-border);
}

.frsn-side-card {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	align-items: center;
	gap: 1rem;
	height: 100%;
	padding: 0 1rem;
	background: var(--wp--preset--color--white);
	border: 0;
	border-bottom: 1px solid var(--frsn-border);
	border-radius: 0;
	overflow: hidden;
	transition: background var(--frsn-transition);
}

.frsn-side-card:last-child {
	border-bottom: 0;
}

.frsn-side-card:hover {
	background: var(--wp--preset--color--surface);
	transform: none;
	box-shadow: none;
}

.frsn-side-card .wp-block-post-featured-image {
	margin: 0;
}

/* 4:3 rather than 16:9. In a 153px row a 16:9 crop leaves a band of dead space
   above and below; 4:3 fills the row without stealing width from the headline. */
.frsn-side-card .wp-block-post-featured-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	display: block;
	border-radius: 3px;
}

.frsn-side-card__body {
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.frsn-side-card .wp-block-post-title {
	font-size: 0.9375rem;
	line-height: 1.25;
	margin: 0;
}

.frsn-side-card .wp-block-post-title a {
	text-decoration: none;
}

.frsn-side-card .wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

@media (max-width: 900px) {
	.frsn-hero__side .wp-block-post-template {
		border-left: 0;
		border-top: 1px solid var(--frsn-border);
	}

	.frsn-side-card {
		padding: 1rem;
	}
}

/* ---------------------------------------------------------------------------
   Contributor archive
   --------------------------------------------------------------------------- */

.frsn-contributor {
	display: flex;
	gap: 1.5rem;
	align-items: center;
	flex-wrap: wrap;
}

.frsn-contributor__photo img {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.frsn-contributor__name {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.frsn-contributor__title {
	margin: 0.25rem 0 0;
	color: var(--wp--preset--color--gold);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.frsn-contributor__bio {
	margin: 0.75rem 0 0;
	color: var(--wp--preset--color--navy-tint);
	max-width: 60ch;
	font-size: 0.9375rem;
}

.frsn-contributor__links {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
}

.frsn-contributor__links a {
	color: var(--wp--preset--color--gold);
	text-decoration: none;
}

.frsn-contributor__links a:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Gallery single
   Same gray header and sidebar as a story, but the photo column is not capped
   at a reading measure. A 760px column is right for prose and wrong for a grid
   of photographs, which is the whole reason anyone opens this page.
   --------------------------------------------------------------------------- */

.frsn-article--wide {
	grid-template-columns: minmax(0, 1fr) 320px;
	justify-content: stretch;
}

@media (max-width: 880px) {
	.frsn-article--wide {
		grid-template-columns: 1fr;
	}
}

/* The gallery block is the page content here, so it should not inherit the
   article's paragraph rhythm. */
.frsn-article--wide .wp-block-post-content > * {
	margin-block: 0;
}

.frsn-article-header__meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* The count badge is absolutely positioned over a card thumbnail elsewhere.
   In the header it is a plain inline label. */
.frsn-article-header .frsn-photo-count {
	position: static;
	background: transparent;
	color: var(--wp--preset--color--navy);
	padding: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
}

.frsn-article-header .frsn-photo-count::before {
	background: var(--wp--preset--color--navy);
}

.frsn-article-header .frsn-photo-count span[aria-hidden="true"] {
	display: none;
}

.frsn-article-header .frsn-photo-count .frsn-screen-reader-text {
	position: static !important;
	width: auto;
	height: auto;
	clip: auto;
	margin: 0;
	overflow: visible;
	white-space: normal;
	font-weight: 700;
}

.frsn-linked-story {
	display: block;
	padding: 1.25rem 1.5rem;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--frsn-border);
	border-left: 4px solid var(--wp--preset--color--gold);
	border-radius: var(--frsn-radius);
	text-decoration: none;
}

.frsn-linked-story__kicker {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.35rem;
}

.frsn-linked-story__title {
	display: block;
	font-size: 1.125rem;
	font-weight: 900;
	line-height: 1.2;
	color: var(--wp--preset--color--navy);
}

.frsn-linked-story:hover .frsn-linked-story__title {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Pagination and utility
   --------------------------------------------------------------------------- */

.wp-block-query-pagination {
	margin-block-start: 3rem;
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
}

.wp-block-query-pagination .page-numbers {
	padding: 0.5rem 0.85rem;
	border-radius: 4px;
	text-decoration: none;
}

.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.frsn-screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
   Homepage hero
   Lead image with three stacked beside it, flush to the header and sitting on
   the page canvas rather than its own coloured band.

   Height is fixed rather than driven by content. The lead image crops to fill
   and the three side cards divide the same height into equal thirds, so the
   block is as tall as the design says regardless of headline length.
   --------------------------------------------------------------------------- */

/* Now that the hero sits on the canvas rather than its own coloured band, the
   gap under the nav reads as deliberate whitespace instead of a seam. Setting
   it explicitly rather than inheriting core's default block gap, so it is a
   decision and not an accident. */
.wp-site-blocks > .frsn-hero {
	margin-block-start: var(--wp--preset--spacing--40);
}

.frsn-hero {
	background: transparent;
	padding: 0 !important;
}

.frsn-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 460px;
	gap: 0;
	height: 460px;
}

@media (max-width: 1200px) {
	.frsn-hero__grid {
		grid-template-columns: minmax(0, 1fr) 380px;
		height: 420px;
	}
}

@media (max-width: 900px) {
	.frsn-hero__grid {
		grid-template-columns: 1fr;
		height: auto;
	}
}

.frsn-hero__lead,
.frsn-hero__lead .wp-block-post-template,
.frsn-hero__lead .wp-block-post-template > li {
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.frsn-lead-card {
	height: 100%;
	min-height: 0;
	border-radius: 0;
}

@media (max-width: 900px) {
	.frsn-lead-card {
		min-height: 320px;
	}
}

.frsn-lead-card .wp-block-cover__inner-container {
	width: 100%;
	max-width: 40rem;
}

.frsn-lead-card .wp-block-post-title {
	margin: 0.4rem 0 0.5rem;
	line-height: 1.06;
	font-size: clamp(1.625rem, 2.6vw, 2.25rem) !important;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.frsn-lead-card .wp-block-post-title a {
	color: #fff;
	text-decoration: none;
}

.frsn-lead-card .wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--gold);
	text-decoration-thickness: 3px;
	text-underline-offset: 5px;
}

.frsn-lead-card .wp-block-post-terms,
.frsn-lead-card .wp-block-post-terms a {
	color: var(--wp--preset--color--gold);
	text-decoration: none;
}

.frsn-lead-card .wp-block-post-excerpt {
	margin: 0 0 0.4rem;
	font-size: 0.875rem;
	line-height: 1.5;
}

.frsn-lead-card .frsn-byline,
.frsn-lead-card .frsn-byline a {
	color: var(--wp--preset--color--navy-tint);
	font-size: 0.75rem;
}

/* Side column: light cards on the canvas, hairline dividers, no floating. */

.frsn-hero__side,
.frsn-hero__side .wp-block-post-template {
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.frsn-hero__side .wp-block-post-template {
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	gap: 0;
	border-left: 1px solid var(--frsn-border);
}

.frsn-side-card {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	align-items: center;
	gap: 1rem;
	height: 100%;
	padding: 0 1rem;
	background: var(--wp--preset--color--white);
	border: 0;
	border-bottom: 1px solid var(--frsn-border);
	border-radius: 0;
	overflow: hidden;
	transition: background var(--frsn-transition);
}

.frsn-side-card:last-child {
	border-bottom: 0;
}

.frsn-side-card:hover {
	background: var(--wp--preset--color--surface);
	transform: none;
	box-shadow: none;
}

.frsn-side-card .wp-block-post-featured-image {
	margin: 0;
}

/* 4:3 rather than 16:9. In a 153px row a 16:9 crop leaves a band of dead space
   above and below; 4:3 fills the row without stealing width from the headline. */
.frsn-side-card .wp-block-post-featured-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	display: block;
	border-radius: 3px;
}

.frsn-side-card__body {
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.frsn-side-card .wp-block-post-title {
	font-size: 0.9375rem;
	line-height: 1.25;
	margin: 0;
}

.frsn-side-card .wp-block-post-title a {
	text-decoration: none;
}

.frsn-side-card .wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

@media (max-width: 900px) {
	.frsn-hero__side .wp-block-post-template {
		border-left: 0;
		border-top: 1px solid var(--frsn-border);
	}

	.frsn-side-card {
		padding: 1rem;
	}
}

/* ---------------------------------------------------------------------------
   Contributor archive
   --------------------------------------------------------------------------- */

.frsn-contributor {
	display: flex;
	gap: 1.5rem;
	align-items: center;
	flex-wrap: wrap;
}

.frsn-contributor__photo img {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.frsn-contributor__name {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.frsn-contributor__title {
	margin: 0.25rem 0 0;
	color: var(--wp--preset--color--gold);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.frsn-contributor__bio {
	margin: 0.75rem 0 0;
	color: var(--wp--preset--color--navy-tint);
	max-width: 60ch;
	font-size: 0.9375rem;
}

.frsn-contributor__links {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
}

.frsn-contributor__links a {
	color: var(--wp--preset--color--gold);
	text-decoration: none;
}

.frsn-contributor__links a:hover {
	text-decoration: underline;
}


.frsn-linked-story {
	display: block;
	padding: 1.25rem 1.5rem;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--frsn-border);
	border-left: 4px solid var(--wp--preset--color--gold);
	border-radius: var(--frsn-radius);
	text-decoration: none;
}

.frsn-linked-story__kicker {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.35rem;
}

.frsn-linked-story__title {
	display: block;
	font-size: 1.125rem;
	font-weight: 900;
	line-height: 1.2;
	color: var(--wp--preset--color--navy);
}

.frsn-linked-story:hover .frsn-linked-story__title {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * Team sports strip
 *
 * Only rendered when a team has coverage in more than one sport, so this never
 * shows a single lonely chip. Counts come from published content, which is what
 * keeps a school that does not field a sport from advertising an empty archive.
 * ---------------------------------------------------------------------- */

.frsn-team-sports {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 2rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--wp--preset--color--navy-tint, #DDE0E7);
}

.frsn-team-sports__item {
	display: inline-flex;
	align-items: baseline;
	gap: .4em;
	padding: .4rem .8rem;
	border: 1px solid var(--wp--preset--color--navy-tint, #DDE0E7);
	border-radius: 999px;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.2;
	color: var(--wp--preset--color--navy, #1C305E);
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}

.frsn-team-sports__item:hover,
.frsn-team-sports__item:focus-visible {
	background: var(--wp--preset--color--navy-tint, #DDE0E7);
	border-color: var(--wp--preset--color--navy, #1C305E);
}

.frsn-team-sports__item.is-current {
	background: var(--wp--preset--color--navy, #1C305E);
	border-color: var(--wp--preset--color--navy, #1C305E);
	color: #fff;
}

.frsn-team-sports__count {
	font-size: .6875rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	opacity: .65;
}

/* -------------------------------------------------------------------------
 * Team page header
 *
 * Reuses .frsn-article-header for the warm grey band and flush placement, the
 * same treatment as a story header. The band was navy at first, which put a
 * near-black mark like the Colorado buffalo at 1.61:1 against it.
 * ---------------------------------------------------------------------- */

.frsn-team-band {
	margin-bottom: var(--wp--preset--spacing--50);
}

.frsn-team-header {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	max-width: 1140px;
	margin-inline: auto;
}

.frsn-team-header__logo {
	flex: 0 0 auto;
}

.frsn-team-header__logo img {
	display: block;
	width: 88px;
	height: 88px;
	object-fit: contain;
}

.frsn-team-header__body {
	flex: 1 1 20ch;
	min-width: 0;
}

.frsn-team-header__kicker {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy, #1C305E);
}

.frsn-team-header__name {
	margin: 0.25rem 0 0;
	color: var(--wp--preset--color--navy, #1C305E);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.06;
}

.frsn-team-header__blurb {
	margin: 0.5rem 0 0;
	color: #3A3F47;
	max-width: 60ch;
}

@media (max-width: 600px) {
	.frsn-team-header__logo img {
		width: 64px;
		height: 64px;
	}
}

/* -------------------------------------------------------------------------
 * Equal-height cards
 *
 * Grid stretches the list item but not what is inside it, so a two-line
 * headline next to a three-line one left the rail ragged. The card fills its
 * cell, the body grows, and the byline is pinned to the bottom so the meta line
 * sits on one baseline across the row.
 * ---------------------------------------------------------------------- */

.frsn-cards .wp-block-post-template > li {
	display: flex;
	align-items: stretch;
}

.frsn-cards .frsn-card {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.frsn-cards .frsn-card__media {
	flex: 0 0 auto;
}

.frsn-cards .frsn-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* Headline takes the slack; everything under it stays put. */
.frsn-cards .frsn-card .wp-block-post-title {
	flex: 1 1 auto;
}

.frsn-cards .frsn-card .frsn-byline {
	margin-top: auto;
	padding-top: 0.75rem;
}

/* -------------------------------------------------------------------------
 * Category archive header
 *
 * Same warm grey band as a story and a team, flush to the nav. It was navy and
 * floating below a white strip, which read as a different site.
 * ---------------------------------------------------------------------- */

.frsn-archive-header {
	max-width: 1140px;
	margin-inline: auto;
}

.frsn-archive-header__title {
	margin: 0;
	color: var(--wp--preset--color--navy, #1C305E);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.06;
}

.frsn-archive-header__desc {
	margin: 0.5rem 0 0;
	color: #3A3F47;
	max-width: 60ch;
}

/* -------------------------------------------------------------------------
 * Page header bands, everywhere
 *
 * Every archive opens the same way: the header part, then one full-width group
 * holding the title. They were navy with white type and a block gap above them,
 * which read as a stripe of white between the nav and the page.
 *
 * Matched structurally rather than by class, so archive.html, the gallery
 * archive, the byline archive and anything added later all pick it up without
 * being edited. The homepage hero is not this shape and is unaffected.
 * ---------------------------------------------------------------------- */

.wp-site-blocks > header + .wp-block-group.alignfull.has-navy-background-color,
.wp-site-blocks > header + main > .wp-block-group.alignfull.has-navy-background-color:first-child {
	margin-block-start: 0 !important;
	background-color: #E4E2DD !important;
	border-bottom: 1px solid #D5D2CB;
	padding-top: 2rem !important;
	padding-bottom: 1.75rem !important;
}

/* Type inside the band was written for navy. */
.wp-site-blocks > header + .wp-block-group.alignfull.has-navy-background-color,
.wp-site-blocks > header + .wp-block-group.alignfull.has-navy-background-color .has-white-color,
.wp-site-blocks > header + .wp-block-group.alignfull.has-navy-background-color .wp-block-query-title,
.wp-site-blocks > header + .wp-block-group.alignfull.has-navy-background-color h1,
.wp-site-blocks > header + .wp-block-group.alignfull.has-navy-background-color .frsn-contributor__name {
	color: var(--wp--preset--color--navy, #1C305E) !important;
}

.wp-site-blocks > header + .wp-block-group.alignfull.has-navy-background-color .wp-block-term-description,
.wp-site-blocks > header + .wp-block-group.alignfull.has-navy-background-color .frsn-contributor__title,
.wp-site-blocks > header + .wp-block-group.alignfull.has-navy-background-color .frsn-contributor__bio,
.wp-site-blocks > header + .wp-block-group.alignfull.has-navy-background-color .has-navy-tint-color {
	color: #3A3F47 !important;
}

/* A headshot or logo knocked out for navy needs a light backdrop here. */
.wp-site-blocks > header + .wp-block-group.alignfull.has-navy-background-color .frsn-contributor__photo img {
	background: #fff;
}

/* -------------------------------------------------------------------------
 * Homepage rails: exactly one row
 *
 * The grid is auto-fill, so the column count changes with the viewport while
 * perPage does not. Four cards is one row at desktop and two at tablet, and
 * Latest asks for six against three columns. Capping by query count cannot fix
 * that because the query does not know how wide the browser is.
 *
 * So the column count is pinned per breakpoint and anything past the first row
 * is removed. display:none rather than clipping, so a hidden card is out of the
 * tab order too. Archives still wrap and paginate; this is homepage only.
 * ---------------------------------------------------------------------- */

.home .frsn-cards .wp-block-post-template {
	grid-template-columns: repeat(4, 1fr);
}

.home .frsn-cards.is-cols-3 .wp-block-post-template {
	grid-template-columns: repeat(3, 1fr);
}

.home .frsn-cards .wp-block-post-template > li:nth-child(n + 5),
.home .frsn-cards.is-cols-3 .wp-block-post-template > li:nth-child(n + 4) {
	display: none;
}

@media (max-width: 1100px) {
	.home .frsn-cards .wp-block-post-template,
	.home .frsn-cards.is-cols-3 .wp-block-post-template {
		grid-template-columns: repeat(3, 1fr);
	}

	.home .frsn-cards .wp-block-post-template > li:nth-child(n + 4),
	.home .frsn-cards.is-cols-3 .wp-block-post-template > li:nth-child(n + 4) {
		display: none;
	}
}

@media (max-width: 820px) {
	.home .frsn-cards .wp-block-post-template,
	.home .frsn-cards.is-cols-3 .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}

	.home .frsn-cards .wp-block-post-template > li:nth-child(n + 3),
	.home .frsn-cards.is-cols-3 .wp-block-post-template > li:nth-child(n + 3) {
		display: none;
	}
}

/* Single column is the one case where a rail may run long: two cards stacked
   is still a glance, and cutting to one would waste the section heading. */
@media (max-width: 560px) {
	.home .frsn-cards .wp-block-post-template,
	.home .frsn-cards.is-cols-3 .wp-block-post-template {
		grid-template-columns: 1fr;
	}

	.home .frsn-cards .wp-block-post-template > li:nth-child(n + 3),
	.home .frsn-cards.is-cols-3 .wp-block-post-template > li:nth-child(n + 3) {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Card byline: always two lines
 *
 * It was one flex row that wrapped only when the name was long, so "Photos by
 * Sam Ackerman · April 4, 2026" took two lines and "By admin · May 31, 2025"
 * took one, and the cards sat at different heights for no reason a reader
 * could see. Stacking it makes the break deliberate rather than incidental,
 * and the reserved height keeps a short credit from pulling its card up.
 *
 * Card only. The article header byline stays on one line.
 * ---------------------------------------------------------------------- */

.frsn-card .frsn-byline {
	display: grid;
	justify-items: start;
	gap: 0.15rem;
	min-height: 2.7em;
	align-content: end;
}

/* Credit leads, date underneath — source order, the news-card convention. */

/* A middot between two stacked lines is just noise. */
.frsn-card .frsn-byline__sep {
	display: none;
}

.frsn-card .frsn-byline__group {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
 * Photo captions and credits: hidden
 *
 * Every frame in a gallery is shot by the photographer already credited on the
 * gallery itself, so repeating the name under each image, and again under each
 * lightbox frame, is noise. Hidden rather than removed from the markup: the
 * data stays on the attachment, the schema keeps emitting creditText for
 * search, and turning it back on is deleting this block.
 *
 * The lightbox counter is left alone. That is navigation, not attribution.
 * ---------------------------------------------------------------------- */

.frsn-gallery__caption,
.frsn-gallery__credit,
.frsn-lightbox__caption,
.frsn-lightbox__credit {
	display: none !important;
}

/* The meta strip held only those two; without them it is an empty bar. */
.frsn-lightbox__meta:not(:has(.frsn-lightbox__counter)) {
	display: none !important;
}