/* FAM News & Insights - newspaper layout
   Everything is scoped under .fam-news so nothing leaks into other views.
   Swap the variables below to match the site; they are the only place colours
   and typefaces are declared. */

.fam-news {
	--fam-red:      #82231D;
	--fam-blue:     #1F4E79;
	--fam-ink:      #1A1A1A;
	--fam-ink-soft: #4F4F4D;
	--fam-rule:     #C9C2B8;
	--fam-paper:    #FAF7F2;

	/* Point these at the fonts the site already loads. */
	--fam-serif: Georgia, "Times New Roman", serif;
	--fam-sans:  Calibri, "Segoe UI", system-ui, sans-serif;

	--fam-gap: 1.75rem;

	/* Pulls the grid up over the hero the way the fund pages do.
	   Adjust these two to match the white block on a fund page. */
	position: relative;
	z-index: 2;
	border-radius: 16px 16px 0 0;
	margin-top: -40px;

	background: var(--fam-paper);
	color: var(--fam-ink);
	padding: 2rem clamp(1rem, 3vw, 2.5rem) 3rem;
}

/* ---------- masthead ---------- */

.fam-masthead {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"left right"
		"name name";
	column-gap: var(--fam-gap);
	row-gap: .5rem;
	padding-bottom: .9rem;
	margin-bottom: 1.1rem;
	border-bottom: 1px solid var(--fam-rule);
}

.fam-masthead__left,
.fam-masthead__right {
	font-family: var(--fam-sans);
	font-size: .6875rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fam-ink-soft);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fam-masthead__left  { grid-area: left; }

.fam-masthead__right {
	grid-area: right;
	text-align: right;
}

.fam-masthead__name {
	/* Same serif as the headlines and the rail headings, so the masthead
	   belongs to the page rather than sitting on top of it. */
	font-family: var(--fam-serif);
	font-weight: 400;
	font-size: clamp(2.5rem, 6.2vw, 4.6rem);
	line-height: 1.1;
	letter-spacing: .01em;
	margin: 0;
	white-space: nowrap;
	grid-area: name;
	text-align: center;
	color: #000;
}

@media (max-width: 767px) {
	.fam-masthead {
		grid-template-columns: 1fr 1fr;
		row-gap: .35rem;
	}
}

/* ---------- filter bar ---------- */

.fam-news__filterbar {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .6rem;
	padding-bottom: 1rem;
	border-bottom: 3px double var(--fam-red);
	margin-bottom: var(--fam-gap);
}

.fam-news__toggle,
.fam-news__reset {
	font-family: var(--fam-sans);
	font-size: .8125rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1;
	background: transparent;
	border: 1px solid var(--fam-rule);
	border-radius: 0;
	padding: .6rem .95rem;
	cursor: pointer;
	color: var(--fam-ink-soft);
	transition: color .12s, border-color .12s;
}

.fam-news__toggle:hover,
.fam-news__reset:hover {
	color: var(--fam-red);
	border-color: var(--fam-red);
}

.fam-news__toggle.is-open {
	color: var(--fam-red);
	border-color: var(--fam-red);
}

/* Caret that turns when the panel opens. */
.fam-news__toggle::after {
	content: "";
	display: inline-block;
	width: .45em;
	height: .45em;
	margin-left: .6em;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-.15em) rotate(45deg);
	transition: transform .15s ease;
}

.fam-news__toggle.is-open::after {
	transform: translateY(.1em) rotate(-135deg);
}

/* Number of active filters, so the count is visible when collapsed. */
.fam-news__badge {
	display: inline-block;
	min-width: 1.25em;
	margin-left: .55em;
	padding: .1em .3em;
	background: var(--fam-red);
	color: var(--fam-paper);
	font-variant-numeric: tabular-nums;
}

.fam-news__panel {
	padding-bottom: 1.2rem;
	margin-bottom: var(--fam-gap);
	border-bottom: 1px solid var(--fam-rule);
}

.fam-news__group + .fam-news__group {
	margin-top: 1rem;
}

.fam-news__grouptitle {
	font-family: var(--fam-sans);
	font-size: .6875rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fam-red);
	text-align: center;
	margin: 0 0 .5rem;
}

.fam-news__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .4rem .5rem;
}

.fam-news__chip {
	font-family: var(--fam-sans);
	font-size: .8125rem;
	line-height: 1;
	color: var(--fam-ink-soft);
	background: transparent;
	border: 1px solid var(--fam-rule);
	border-radius: 0;
	padding: .5rem .7rem;
	cursor: pointer;
	transition: color .12s, border-color .12s, background-color .12s, opacity .12s;
}

.fam-news__chip:hover {
	color: var(--fam-red);
	border-color: var(--fam-red);
}

.fam-news__chip.is-active {
	color: var(--fam-paper);
	background: var(--fam-red);
	border-color: var(--fam-red);
}

/* Combining with this tag would leave nothing, so it is out of reach -
   greyed rather than removed, so the panel does not jump around. */
.fam-news__chip.is-disabled {
	opacity: .32;
	cursor: default;
	color: var(--fam-ink-soft);
	border-color: var(--fam-rule);
}

.fam-news__chip-n {
	margin-left: .45rem;
	opacity: .6;
	font-variant-numeric: tabular-nums;
}

.fam-news__chip:focus-visible,
.fam-news__toggle:focus-visible,
.fam-news__reset:focus-visible,
.fam-news__morebtn:focus-visible,
.fam-story__headline a:focus-visible {
	outline: 2px solid var(--fam-blue);
	outline-offset: 2px;
}

/* ---------- grid ---------- */

.fam-news__grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--fam-gap);
	/* Sparse flow keeps the articles in date order; the template plans
	   placement so no gaps are left. */
	grid-auto-flow: row;
}

.fam-story {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .85rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--fam-rule);
	min-width: 0;
}

.fam-story--lead    { grid-column: span 9; }
.fam-story--feature { grid-column: span 4; }
.fam-story--brief   { grid-column: span 3; }

/* Promoted briefs: wide takes two slots, tall runs down two rows. Which
   articles get them is decided in the template, from image availability. */
/* Every article renders its picture; briefs simply do not show it, so the
   filter script can promote one to wide or tall without fetching anything. */
.fam-story--brief .fam-story__figure {
	display: none;
}

.fam-story--wide { grid-column: span 6; }
.fam-story--tall { grid-column: span 3; grid-row: span 2; }

/* Wide merges two slots into one cell and splits it: picture on the left,
   text on the right. The picture is one slot wide, so the cell ends up the
   same height as the briefs beside it and nothing has to be cropped. */
.fam-story--wide {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--fam-gap);
	align-items: start;
}

/* The rail sits in the last three columns beside the lead story only. */
.fam-rail {
	grid-column: span 3;
	border-top: 1px solid var(--fam-rule);
	border-left: 1px solid var(--fam-rule);
	padding: 1.1rem 0 0 var(--fam-gap);
	margin-left: calc(var(--fam-gap) / -2);
	min-width: 0;
}

.fam-rail__title {
	font-family: var(--fam-sans);
	font-size: .6875rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fam-red);
	margin: 0 0 .9rem;
}

/* ---------- quarterly report, above the factsheets ---------- */

.fam-rail__report {
	padding-bottom: 1.4rem;
	margin-bottom: 1.4rem;
	border-bottom: 3px double var(--fam-rule);
}

.fam-rail__cover {
	display: block;
	margin-bottom: .7rem;
	background: #EDE8E0;
}

.fam-rail__cover img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--fam-rule);
}

.fam-rail__reporttitle {
	font-family: var(--fam-serif);
	font-size: 1.0625rem;
	line-height: 1.25;
	margin: 0;
}

.fam-rail__reporttitle a {
	color: var(--fam-ink);
	text-decoration: none;
}

.fam-rail__reporttitle a:hover {
	color: var(--fam-red);
}

.fam-rail__reportnote {
	font-family: var(--fam-sans);
	font-size: .75rem;
	color: var(--fam-ink-soft);
	margin: .2rem 0 0;
}

/* The section heading repeats above the factsheet list. */
.fam-rail__report + .fam-rail__title {
	margin-top: 0;
}

.fam-rail__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fam-rail__item + .fam-rail__item {
	border-top: 1px solid var(--fam-rule);
}

.fam-rail__item a {
	display: block;
	padding: .7rem 0;
	text-decoration: none;
	color: inherit;
}

.fam-rail__fund {
	display: block;
	font-family: var(--fam-serif);
	font-size: .9375rem;
	line-height: 1.25;
	color: var(--fam-ink);
}

.fam-rail__month {
	display: block;
	font-family: var(--fam-sans);
	font-size: .75rem;
	color: var(--fam-ink-soft);
	margin-top: .15rem;
}

.fam-rail__item a:hover .fam-rail__fund {
	color: var(--fam-red);
}

.fam-rail__item a:focus-visible {
	outline: 2px solid var(--fam-blue);
	outline-offset: 2px;
}

/* Column rules between stories in the same row. */
.fam-story--feature + .fam-story--feature,
.fam-story--brief + .fam-story--brief,
.fam-story--brief + .fam-story--wide,
.fam-story--brief + .fam-story--tall,
.fam-story--wide + .fam-story--brief,
.fam-story--tall + .fam-story--brief {
	border-left: 1px solid var(--fam-rule);
	padding-left: var(--fam-gap);
	margin-left: calc(var(--fam-gap) / -2);
}

/* The lead runs full-width image on top, then headline left / text right. */
.fam-story--lead {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fam-gap) 0;
	align-content: start;
	border-top-width: 0;
	padding-top: 0;
}

/* Kicker, headline and meta stack on the left; the deck runs down the right. */
.fam-story--lead .fam-story__text {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--fam-gap);
	align-content: start;
}

.fam-story--lead .fam-story__section {
	grid-column: 1;
	grid-row: 1;
}

.fam-story--lead .fam-story__headline {
	grid-column: 1;
	grid-row: 2;
}

.fam-story--lead .fam-story__meta {
	grid-column: 1;
	grid-row: 3;
}

.fam-story--lead .fam-story__deck {
	grid-column: 2;
	grid-row: 1 / 4;
	margin-top: 0;
	border-left: 1px solid var(--fam-rule);
	padding-left: var(--fam-gap);
}

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

.fam-story__figure {
	margin: 0;
}

/* No fixed box: the width is set by the column, the height follows the
   image's own proportions. Nothing is cropped and there are no filled gaps,
   so tiles in a row end up at different heights - which is how a printed
   page behaves anyway. */
.fam-story__figure img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- text ---------- */

.fam-story__text {
	min-width: 0;
}

.fam-story__section {
	font-family: var(--fam-sans);
	font-size: .6875rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fam-red);
	margin: 0 0 .5rem;
}

.fam-story__headline {
	font-family: var(--fam-serif);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.01em;
	margin: 0;
	text-wrap: balance;
}

.fam-story--lead .fam-story__headline    { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
.fam-story--feature .fam-story__headline { font-size: clamp(1.15rem, 1.6vw, 1.4rem); }
.fam-story--brief .fam-story__headline   { font-size: 1.0625rem; }
.fam-story--wide .fam-story__headline,
.fam-story--tall .fam-story__headline    { font-size: 1.0625rem; }

.fam-story__headline a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--fam-red), var(--fam-red));
	background-size: 0 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .2s ease;
}

.fam-story:hover .fam-story__headline a {
	background-size: 100% 1px;
}

/* Whole card is the click target. */
.fam-story__headline a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.fam-story__deck {
	font-family: var(--fam-serif);
	color: var(--fam-ink-soft);
	margin: .7rem 0 0;
	line-height: 1.55;
	max-width: 68ch;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.fam-story--lead .fam-story__deck {
	font-size: 1.0625rem;
	-webkit-line-clamp: 9;
}

.fam-story--feature .fam-story__deck {
	font-size: .9375rem;
	-webkit-line-clamp: 3;
}

.fam-story--brief .fam-story__deck {
	font-size: .875rem;
	-webkit-line-clamp: 3;
}

.fam-story--wide .fam-story__deck {
	font-size: .875rem;
	-webkit-line-clamp: 3;
}

/* The tall tier has two rows of room, so it can show more of the teaser. */
.fam-story--tall .fam-story__deck {
	font-size: .875rem;
	-webkit-line-clamp: 5;
}

.fam-story--lead .fam-story__deck::first-letter {
	float: left;
	font-size: 3.2em;
	line-height: .82;
	padding: .04em .1em 0 0;
	color: var(--fam-red);
	font-weight: 700;
}

.fam-story__meta {
	font-family: var(--fam-sans);
	font-size: .75rem;
	color: var(--fam-ink-soft);
	margin: .85rem 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .35rem .6rem;
}

.fam-story__tags {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .35rem .6rem;
}

.fam-story__tag {
	color: var(--fam-ink-soft);
}

.fam-story__tag::before {
	content: "";
	display: inline-block;
	width: .5rem;
	border-top: 1px solid currentColor;
	margin-right: .35rem;
	vertical-align: .22em;
}

/* ---------- filtered + folded states ---------- */

.fam-story.is-hidden,
.fam-story.is-folded {
	display: none;
}

/* While a tag filter is on the script re-plans the tiers over whatever is
   still visible, so the picture rhythm survives filtering. Only the rail
   goes, since it belongs to the front page rather than to a result list. */
.fam-news.is-filtered .fam-rail {
	display: none;
}

.fam-news__empty {
	font-family: var(--fam-sans);
	color: var(--fam-ink-soft);
	padding: 2rem 0;
	margin: 0;
}

.fam-news__more {
	margin-top: 2.25rem;
	padding-top: 1.25rem;
	border-top: 3px double var(--fam-rule);
	text-align: center;
}

.fam-news__morebtn {
	font-family: var(--fam-sans);
	font-size: .875rem;
	letter-spacing: .04em;
	color: var(--fam-paper);
	background: var(--fam-red);
	border: 0;
	border-radius: 0;
	padding: .75rem 1.6rem;
	cursor: pointer;
}

.fam-news__morebtn:hover {
	background: var(--fam-ink);
}

/* ---------- responsive ---------- */

@media (max-width: 991px) {
	/* Single column below the desktop breakpoint. */
	.fam-story--lead .fam-story__text {
		grid-template-columns: 1fr;
	}

	.fam-story--lead .fam-story__section { grid-row: 1; }
	.fam-story--lead .fam-story__headline { grid-row: 2; }
	.fam-story--lead .fam-story__deck {
		grid-column: 1;
		grid-row: 3;
		border-left: 0;
		padding-left: 0;
		margin-top: .7rem;
	}
	.fam-story--lead .fam-story__meta { grid-row: 4; }

	.fam-story--lead    { grid-column: span 12; }
	.fam-story--feature { grid-column: span 6; }
	.fam-story--brief   { grid-column: span 6; }
	.fam-story--wide    { grid-column: span 12; }
	.fam-story--tall    { grid-column: span 6; grid-row: auto; }

	.fam-rail {
		grid-column: span 12;
		border-left: 0;
		padding-left: 0;
		margin-left: 0;
	}

	.fam-rail__list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0 var(--fam-gap);
	}

	.fam-rail__item:nth-child(2) {
		border-top: 0;
	}
}

@media (max-width: 575px) {
	.fam-news { padding-left: 1rem; padding-right: 1rem; }

	.fam-story--lead,
	.fam-story--feature,
	.fam-story--brief,
	.fam-story--wide,
	.fam-story--tall {
		grid-column: span 12;
	}

	.fam-story--feature + .fam-story--feature,
	.fam-story--brief + .fam-story--brief {
		border-left: 0;
		padding-left: 0;
		margin-left: 0;
	}

	.fam-story--wide {
		grid-template-columns: 1fr;
		row-gap: .85rem;
	}

	.fam-rail__list {
		grid-template-columns: 1fr;
	}

	.fam-rail__item:nth-child(2) {
		border-top: 1px solid var(--fam-rule);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fam-news * { transition: none !important; }
}

/* ---------- overrides for the template's global rules ----------
   custom.css sets `p, li { font-family: 'open_sanslight' !important; }`
   and `h3 { font-family: 'pt_serifregular' !important; }` site-wide, which
   beats everything above regardless of order. These selectors are more
   specific and carry !important so the module keeps its own typography.
   Scoped under .fam-news, so nothing outside this page is touched. */

.fam-news .fam-masthead__name {
	font-family: var(--fam-serif) !important;
	/* custom.css sets body { font-weight: 600 }, which the masthead inherits. */
	font-weight: 400 !important;
	color: #000 !important;
}

.fam-news .fam-masthead__left,
.fam-news .fam-masthead__right,
.fam-news .fam-story__section,
.fam-news .fam-story__meta,
.fam-news .fam-rail__reportnote,
.fam-news .fam-news__empty {
	font-family: var(--fam-sans) !important;
}

.fam-news .fam-story__deck,
.fam-news .fam-rail__reporttitle {
	font-family: var(--fam-serif) !important;
}

.fam-news .fam-story__headline,
.fam-news .fam-rail__title {
	font-family: var(--fam-serif) !important;
}

/* custom.css also forces h3 to 30px bottom margin and the brand red. */
.fam-news .fam-rail__title {
	margin-bottom: .9rem;
}

.fam-news .fam-story__headline {
	margin-bottom: 0;
	/* custom.css forces h3 to the brand red; only the lead keeps it. */
	color: var(--fam-ink) !important;
}

.fam-news .fam-story--lead .fam-story__headline {
	color: var(--fam-red) !important;
}

/* custom.css pads every <section> inside .article-details by 65px. The
   module uses none, but guard against it reaching anything nested here. */
.fam-news section {
	padding-top: 0;
	padding-bottom: 0;
}