/* ============================================================================
   Pentagon Response Series — additions on top of podcast.css.
   Loaded only on page-templates/template-pentagon.php, after podcast.css
   (whose .lv-podcast design system this page shares).
   ============================================================================ */

/* Coming-soon ghost cards: same footprint as a real episode card, visibly
   inert - dashed border, muted body, no hover lift, no pointer. */
.lv-pentagon .lv-episode-card.lvp-coming {
	border: 1px dashed rgba(21, 36, 63, 0.28);
	background: rgba(240, 244, 248, 0.55);
	box-shadow: none;
	cursor: default;
}
.lv-pentagon .lv-episode-card.lvp-coming:hover {
	transform: none;
	box-shadow: none;
}
.lv-pentagon .lvp-coming .lv-placeholder.lvp-coming-number {
	background: rgba(21, 36, 63, 0.06);
	display: flex;
	/* Top-aligned so the label and the centered play icon don't overlap. */
	align-items: flex-start;
	justify-content: center;
	padding-top: 26px;
}
.lv-pentagon .lvp-coming .lvp-coming-number span {
	color: rgba(21, 36, 63, 0.45);
	font-family: var(--lv-serif, "Ibarra Real Nova", serif);
	font-size: 22px;
	font-weight: 700;
	position: static;
	transform: none;
	margin: 0;
	padding: 0;
	background: none;
}
.lv-pentagon .lvp-coming-chip {
	background: rgba(21, 36, 63, 0.55);
}
.lv-pentagon .lvp-coming .lv-episode-title {
	color: rgba(21, 36, 63, 0.55);
}
.lv-pentagon .lvp-coming-link {
	color: rgba(21, 36, 63, 0.4);
}

/* Hero fallback card when no parts are published yet - looks like the video
   card but is not clickable. */
.lv-pentagon .lvp-video-card-static {
	cursor: default;
}

/* Play affordance on non-playable cards (trailer placeholder, coming-soon
   parts): present so every card reads as video, muted so it doesn't promise
   a click. */
.lv-pentagon .lvp-video-card-static .lv-play,
.lv-pentagon .lvp-coming .lv-play {
	opacity: 0.45;
	filter: grayscale(1);
}

/* Hero credit line: one line on desktop (the shared 720px cap wraps it
   mid-phrase); wraps normally again below 992px where one line can't fit. */
@media (min-width: 992px) {
	.lv-pentagon .lv-hero-caption {
		max-width: none;
		white-space: nowrap;
	}
}

/* Hero title: one line without going small. The intro column is widened from
   the shared 920px to 1080px (this page only), which lifts the measured
   one-line ceiling (~12.6px of set width per font px for this title) to
   ~85px - the 82px cap keeps a safety margin. The 7vw slope tracks the
   padded container below the cap so it stays one line down to tablet;
   phones wrap normally, as intended. */
.lv-pentagon .lv-hero-intro {
	max-width: 1080px;
	width: min(1080px, 100%);
}
.lv-pentagon .lv-hero h1 {
	font-size: clamp(34px, 7vw, 82px);
}

/* Hero subtitle: smaller than the podcast scale and freed from its 820px cap
   so it sets as (at most) two balanced lines instead of three gappy ones. A
   true single line would need ~16px type for this sentence length - below
   readable hierarchy, so two lines is the design floor. */
.lv-pentagon .lv-civic {
	font-size: clamp(17px, 1.5vw, 26px);
	line-height: 1.35;
	max-width: none;
}

/* ---------------------------------------------------------------------------
   Contributor collection layout
   Mirrors the Our Nation's Promise contributors format the client pointed to
   (rule above each card, small round portrait, name, uppercase story line,
   short bio) rendered in this site's own type system rather than that site's.
--------------------------------------------------------------------------- */
.lv-pentagon .lvp-contributor-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 48px;
	margin-top: 44px;
}
.lv-pentagon .lvp-contributor {
	border-top: 1px solid rgba(21, 36, 63, 0.16);
	padding-top: 20px;
}
.lv-pentagon .lvp-contributor-btn {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	display: block;
	text-align: left;
	cursor: pointer;
	font: inherit;
	color: inherit;
}
.lv-pentagon .lvp-contributor-photo {
	display: block;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: 14px;
	background: rgba(21, 36, 63, 0.08);
}
.lv-pentagon .lvp-contributor-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.lv-pentagon .lvp-contributor-initial {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-family: var(--lv-serif, "Ibarra Real Nova", serif);
	font-size: 26px;
	font-weight: 700;
	color: rgba(21, 36, 63, 0.45);
}
.lv-pentagon .lvp-contributor h3 {
	font-family: var(--lv-serif, "Ibarra Real Nova", serif);
	font-size: 23px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--lv-navy, #15243f);
	margin: 0;
}
.lv-pentagon .lvp-contributor-role {
	display: block;
	font-family: "IBM Plex Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--lv-red, #b45454);
	margin: 6px 0 0;
}
.lv-pentagon .lvp-contributor-story {
	display: block;
	font-family: var(--lv-serif, "Ibarra Real Nova", serif);
	font-size: 16px;
	font-style: italic;
	line-height: 1.4;
	color: rgba(21, 36, 63, 0.78);
	margin: 10px 0 0;
}
.lv-pentagon .lvp-contributor-bio {
	display: block;
	font-size: 15px;
	line-height: 1.65;
	color: rgba(21, 36, 63, 0.72);
	margin: 10px 0 0;
	text-wrap: pretty;
}
.lv-pentagon .lvp-contributor-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: "IBM Plex Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lv-red, #b45454);
	margin-top: 14px;
}
.lv-pentagon .lvp-contributor-link::after {
	content: "→";
}
.lv-pentagon .lvp-contributor-btn:hover h3 {
	color: var(--lv-red, #b45454);
}

@media (max-width: 980px) {
	.lv-pentagon .lvp-contributor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 36px; }
}
@media (max-width: 600px) {
	.lv-pentagon .lvp-contributor-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* Share Your Story band: the form on the left so the ask leads the row, the
   About narrative on the right for context. Below 900px the two stack with
   About first, so a reader who arrives cold gets the project explained before
   the form appears. Anyone who already knows why they are here skips the wait
   with the hero button or the subnav anchor, both of which target #share. */
.lv-pentagon .lvp-share {
	background: var(--lv-ice, #eff4f8);
}
.lv-pentagon .lvp-share-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: 64px;
	align-items: start;
}
.lv-pentagon .lvp-share-head {
	display: block;
	margin: 0 0 30px;
}
.lv-pentagon .lvp-share-head .lv-eyebrow {
	display: block;
	font-size: 13px;
	margin-bottom: 14px;
}
.lv-pentagon .lvp-share-head h2 {
	font-family: var(--lv-serif, "Ibarra Real Nova", serif);
	color: var(--lv-navy, #15243f);
	font-size: clamp(28px, 2.4vw, 38px);
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 14px;
	text-wrap: balance;
}
.lv-pentagon .lvp-share-intro {
	font-size: 16px;
	line-height: 1.75;
	color: rgba(21, 36, 63, 0.78);
	margin: 0;
	max-width: 52ch;
	text-wrap: pretty;
}
/* The About column sits on the tinted band rather than white, so it gets a
   card to keep the same separation it had as its own section. */
.lv-pentagon .lvp-share-about {
	background: #fff;
	border: 1px solid rgba(21, 36, 63, 0.08);
	border-radius: 4px;
	padding: 40px 40px 34px;
	position: sticky;
	top: 96px;
}
.lv-pentagon .lvp-share-about .lv-section-head {
	margin: 0 0 18px;
}
.lv-pentagon .lvp-share-about .lvp-dossier-fm {
	margin-top: 34px;
	padding-top: 30px;
	border-top: 1px solid rgba(21, 36, 63, 0.1);
}

@media (max-width: 1100px) {
	.lv-pentagon .lvp-share-grid { gap: 44px; }
	.lv-pentagon .lvp-share-about { padding: 32px 30px 28px; }
}

@media (max-width: 900px) {
	.lv-pentagon .lvp-share-grid {
		grid-template-columns: 1fr;
		gap: 34px;
	}
	/* About first on small screens, then the form. */
	.lv-pentagon .lvp-share-about {
		order: -1;
		position: static;
	}
}

/* About band: series narrative (left) + filmmaker dossier (right) in one
   row. The aside reads like a magazine sidebar: small eyebrow, editorial
   portrait, name, role, compact bio. */
.lv-pentagon .lvp-dossier-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: start;
}
/* Series with no filmmaker block: the narrative gets the full row rather
   than sitting in a half-width column beside empty space. */
.lv-pentagon .lvp-dossier-grid--solo {
	grid-template-columns: 1fr;
}
.lv-pentagon .lvp-dossier-grid--solo .lvp-prose {
	max-width: 860px;
}
.lv-pentagon .lvp-dossier-fm .lv-eyebrow {
	display: block;
	font-size: 13px;
	margin-bottom: 18px;
}

/* Star separator inside eyebrows - mirrors curriculum.css's
   .cl-eyebrow-star (steel, small, non-tracked) for the lv- context. */
.lv-pentagon .lvp-eyebrow-star {
	color: var(--lv-steel, #5980a6);
	display: inline-block;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	letter-spacing: 0;
	line-height: 1;
	vertical-align: middle;
	/* vertical-align: middle still sits ~2px low against the 20px caps
	   (measured); lift to the optical center of the cap height. */
	position: relative;
	top: -0.15em;
}

/* ---------------------------------------------------------------------------
   Hero eyebrow signal pulse
   "Calling all boats" was a radio call, so the star transmits: two soft rings
   go out on a slow loop. Motion is confined to the rings, never the text, so
   legibility is untouched, and it is switched off for reduced-motion users.
--------------------------------------------------------------------------- */
.lv-pentagon--maritime .lv-hero .lv-eyebrow .lvp-eyebrow-star::before,
.lv-pentagon--maritime .lv-hero .lv-eyebrow .lvp-eyebrow-star::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	/* Red rather than the star's steel: it ties the pulse to the words and
	   carries against the dark hero, where steel-on-navy disappeared. */
	border: 1.5px solid var(--lv-red, #b45454);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	animation: lvp-signal 3.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}
.lv-pentagon--maritime .lv-hero .lv-eyebrow .lvp-eyebrow-star::after {
	animation-delay: 1.9s;
}

@keyframes lvp-signal {
	0%   { transform: scale(0.5); opacity: 0; }
	10%  { opacity: 0.75; }
	75%  { opacity: 0; }
	100% { transform: scale(3.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.lv-pentagon--maritime .lv-hero .lv-eyebrow .lvp-eyebrow-star::before,
	.lv-pentagon--maritime .lv-hero .lv-eyebrow .lvp-eyebrow-star::after {
		animation: none;
	}
}

/* The two columns read as near-equals: one shared heading size for "About
   the Series" and the filmmaker's name. */
.lv-pentagon .lvp-dossier-grid .lv-section-head h2,
.lv-pentagon .lvp-share-about .lv-section-head h2,
.lv-pentagon .lvp-fm-name {
	font-family: var(--lv-serif, "Ibarra Real Nova", serif);
	color: var(--lv-navy, #15243f);
	font-size: clamp(30px, 2.8vw, 42px);
	font-weight: 700;
	line-height: 1.08;
	margin: 0 0 10px;
}

/* Editorial portrait: floated inside the bio so the copy wraps around it,
   with the offset tan backdrop + thin navy keyline of a print inset. */
.lv-pentagon .lvp-fm-portrait {
	position: relative;
	float: right;
	width: min(46%, 230px);
	margin: 6px 0 18px 22px;
	shape-outside: margin-box;
}
.lv-pentagon .lvp-fm-portrait::before {
	content: "";
	position: absolute;
	inset: 10px -10px -10px 10px;
	background: rgba(152, 125, 84, 0.18);
	z-index: 0;
}
.lv-pentagon .lvp-fm-portrait img,
.lv-pentagon .lvp-fm-portrait .lv-placeholder {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border: 1px solid rgba(21, 36, 63, 0.25);
	background: #e6ecf2;
}
.lv-pentagon .lvp-fm-portrait .lv-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}
.lv-pentagon .lvp-fm-bio::after {
	content: "";
	display: block;
	clear: both;
}
.lv-pentagon .lvp-dossier-fm .lv-role {
	margin-bottom: 16px;
}
.lv-pentagon .lvp-fm-bio p {
	color: #2c3a45;
	font-size: 15px;
	line-height: 1.75;
	margin-bottom: 14px;
	text-wrap: pretty;
}
.lv-pentagon .lvp-fm-bio p:last-child {
	margin-bottom: 0;
}

@media (max-width: 980px) {
	.lv-pentagon .lvp-dossier-grid {
		grid-template-columns: 1fr;
		gap: 56px;
	}
}

/* Phones: the eyebrow can't hold one line, and a natural wrap orphans the
   star at the end of line one. Break it deliberately instead - phrase, star
   centered on its own line as a divider, phrase. */
@media (max-width: 780px) {
	.lv-pentagon--maritime .lv-hero .lv-eyebrow .lvp-eyebrow-star {
		display: block;
		top: 0;
		margin: 7px auto 5px;
	}
}

/* Phones: the floated portrait would squeeze the bio to a few words per
   line - stack it above the copy instead. */
@media (max-width: 600px) {
	.lv-pentagon .lvp-fm-portrait {
		float: none;
		width: 100%;
		max-width: 300px;
		margin: 4px auto 22px;
	}
}

/* "The Footage" head: two columns at desktop - heading left, intro right -
   mirroring the curriculum landing's section-head pattern, with a hairline
   divider between them broken by a small camera mark. Below 900px the head
   stacks and the same divider lies flat between heading and copy.
   One spacing value (--lvp-head-gap) drives both axes so the rhythm reads
   identically at every width. */
.lv-pentagon .lv-episodes .lv-section-head {
	--lvp-head-gap: 40px;
}

.lv-pentagon .lvp-head-divider {
	display: block;
	position: relative;
	width: 100%;
	max-width: 300px;
	height: 1px;
	margin: var(--lvp-head-gap) auto;
	background: rgba(21, 36, 63, 0.16);
}
.lv-pentagon .lvp-head-divider svg {
	position: absolute;
	top: 50%;
	left: 50%;
	/* +1px optically centers the mark on the rule: the body is the heavy
	   mass and the lens is light, so geometric centre reads slightly left. */
	transform: translate(calc(-50% + 1px), -50%);
	width: 22px;
	height: 22px;
	padding: 7px 12px;
	box-sizing: content-box;
	background: #fff;
	color: rgba(21, 36, 63, 0.42);
}

/* Stacked: the divider's own margins are the only spacing, so the gap above
   and below it is identical. */
@media (max-width: 899px) {
	.lv-pentagon .lv-episodes .lv-section-head,
	.lv-pentagon .lv-episodes .lv-section-head p {
		max-width: 880px;
	}
	.lv-pentagon .lv-episodes .lv-section-head h2 {
		margin-bottom: 0;
	}
	.lv-pentagon .lv-episodes .lv-section-head p {
		margin-top: 0;
	}
}

/* No intro copy on this page: heading alone, no rule pointing at empty
   space. */
.lv-pentagon .lv-episodes .lv-section-head.lvp-head--solo {
	display: block;
	max-width: none;
}

@media (min-width: 900px) {
	.lv-pentagon .lv-episodes .lv-section-head:not(.lvp-head--solo) {
		display: grid;
		/* Column 1 is sized to the heading's TEXT (max-content), not a
		   fraction of the row - a fractional column is wider than the words,
		   which pushes the rule far from the heading while it stays tight to
		   the paragraph. Sizing to content puts the same gap either side.
		   ONE row: the title block, rule, and copy are each a single grid
		   item, so align-items centres them against each other. (With the
		   eyebrow and h2 as separate items the grid gained a second row and
		   centred the heading inside row 1 - i.e. against the top of the
		   copy, not its middle.) */
		grid-template-columns: minmax(0, max-content) auto minmax(0, 1fr);
		gap: var(--lvp-head-gap);
		align-items: center;
		max-width: none;
		text-align: left;
	}
	.lv-pentagon .lvp-head-title {
		grid-column: 1;
		/* Caps how far a long editor-entered title can push the rule. */
		max-width: 560px;
	}
	.lv-pentagon .lv-episodes .lv-section-head h2 {
		margin: 0;
	}

	/* Column 2: the same rule stood on end, spanning the head's height. */
	.lv-pentagon .lvp-head-divider {
		grid-column: 2;
		align-self: stretch;
		width: 1px;
		max-width: none;
		height: auto;
		min-height: 104px;
		margin: 0;
	}
	.lv-pentagon .lvp-head-divider svg {
		padding: 12px 7px;
	}

	.lv-pentagon .lv-episodes .lv-section-head p {
		grid-column: 3;
		margin: 0;
		/* 690px is the measured width where this paragraph sets in three
		   lines instead of four; 760 leaves headroom without letting the
		   measure get long. */
		max-width: 760px;
	}
}

/* Widow/orphan control, same convention as curriculum.css's balanced section
   headings: balance multi-line headings, avoid single-word last lines in the
   longer prose. */
.lv-pentagon h1,
.lv-pentagon h2,
.lv-pentagon .lvp-fm-name,
.lv-pentagon .lv-civic {
	text-wrap: balance;
}
.lv-pentagon .lv-lede,
.lv-pentagon .lvp-prose p,
.lv-pentagon .lv-section-head p,
.lv-pentagon .lvp-fm-bio p {
	text-wrap: pretty;
}

/* About the Series: prose band on the ice background for rhythm between the
   white videos band and the host band. */
.lv-pentagon .lvp-about {
	background: var(--lv-ice, #eff4f8);
}
.lv-pentagon .lvp-prose {
	max-width: 780px;
}
.lv-pentagon .lvp-prose p {
	color: #2c3a45;
	font-size: 16px;
	line-height: 1.85;
	margin-bottom: 18px;
}
.lv-pentagon .lvp-prose p:last-child {
	margin-bottom: 0;
}

/* Playlist band: centered replacement for the podcast's Listen Everywhere. */
.lv-pentagon .lvp-playlist .lv-section-head {
	margin-bottom: 28px;
}
.lv-pentagon .lvp-playlist-action {
	text-align: left;
}

/* Coming Soon stub for the playlist button until the URL is set - same
   language as the curriculum pages' stub badges. */
.lv-pentagon .lvp-stub {
	border: 1px dashed rgba(21, 36, 63, 0.35);
	border-radius: 3px;
	color: rgba(21, 36, 63, 0.55);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 14px 22px;
	text-transform: uppercase;
	cursor: default;
}
.lv-pentagon .lvp-stub i {
	background: rgba(180, 84, 84, 0.12);
	border-radius: 2px;
	color: #b45454;
	font-family: "IBM Plex Mono", monospace;
	font-size: 9px;
	font-style: normal;
	letter-spacing: 0.08em;
	padding: 3px 8px;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Maritime motif (page field: Decorative Motif = Maritime)
   One motif, applied to marks the page already had rather than added as new
   ornament: the section hairline becomes a rope lay, and the section icon
   becomes a life ring. Opt-in per page, so the Pentagon series is untouched.

   The rope lives on ::before rather than on the span itself. The end-fade is a
   mask, and a mask on the span would clip to the span's 4px box, shearing the
   life ring that sits centred on top of it.

   The divider also changes axis at 900px (horizontal when the head is stacked,
   vertical when it sits between two columns), so the strands and the fade have
   to change axis with it.
   --------------------------------------------------------------------------- */
.lv-pentagon--maritime .lvp-head-divider {
	background: none;
	height: 4px;
}
.lv-pentagon--maritime .lvp-head-divider::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 2px;
	background: repeating-linear-gradient(
		118deg,
		rgba(21, 36, 63, 0.34) 0 2px,
		rgba(21, 36, 63, 0.05) 2px 5px
	);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}

/* Wider white cut-out: the rope is heavier than the hairline it replaces and
   would otherwise crowd the ring. */
.lv-pentagon--maritime .lvp-head-divider svg {
	padding: 7px 15px;
}

@media (min-width: 900px) {
	.lv-pentagon--maritime .lvp-head-divider {
		width: 4px;
		height: auto;
	}
	.lv-pentagon--maritime .lvp-head-divider::before {
		/* Strands run across the standing rope rather than along it. */
		background: repeating-linear-gradient(
			28deg,
			rgba(21, 36, 63, 0.34) 0 2px,
			rgba(21, 36, 63, 0.05) 2px 5px
		);
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
		        mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
	}
	.lv-pentagon--maritime .lvp-head-divider svg {
		padding: 15px 7px;
	}
}

/* The rope is texture, not information: fall back to a plain rule when the
   viewer has asked for higher contrast. */
@media (prefers-contrast: more) {
	.lv-pentagon--maritime .lvp-head-divider::before {
		background: rgba(21, 36, 63, 0.4);
		-webkit-mask-image: none;
		        mask-image: none;
	}
}

/* Hero wave: washes the dark hero into the white band below. Maritime motif
   only, so the Pentagon hero keeps its hard edge. Reuses the Calling All
   Stories path data so the two boatlift pages read as one piece.

   The hero is position:relative with overflow:hidden already, so this needs no
   changes to it. Its 104px bottom padding clears the wave, so nothing collides
   with the hero copy. */
.lv-pentagon--maritime .lvp-hero-wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	line-height: 0;
	z-index: 2;
	pointer-events: none;
}
.lv-pentagon--maritime .lvp-hero-wave svg {
	display: block;
	width: 100%;
	height: 88px;
}
/* Kept very low: at 0.28 over this navy the back crest stopped reading as
   water and became a flat grey band across the page. */
.lv-pentagon--maritime .lvp-wave-back { fill: rgba(255, 255, 255, 0.13); }
.lv-pentagon--maritime .lvp-wave-front { fill: #fff; }

@media (max-width: 900px) {
	.lv-pentagon--maritime .lvp-hero-wave svg { height: 48px; }
}

@media (max-width: 575px) {
	.lv-pentagon--maritime .lvp-hero-wave svg { height: 34px; }
}

/* A story with no video and no written account: the person is still listed,
   but there is nothing to open, so the card is not a button. Drop the
   affordances that would imply otherwise. */
.lv-pentagon .lvp-contributor--static .lvp-contributor-btn {
	cursor: default;
	background: none;
	border: 0;
	padding: 0;
	width: 100%;
	text-align: inherit;
	font: inherit;
	color: inherit;
}
.lv-pentagon .lvp-contributor--static .lvp-contributor-btn:hover,
.lv-pentagon .lvp-contributor--static .lvp-contributor-btn:focus {
	transform: none;
}

/* The account in full, inside the pop-up. */
.lv-pentagon .lv-modal-story {
	font-size: 16px;
	line-height: 1.75;
	color: rgba(21, 36, 63, 0.86);
	margin-top: 18px;
}
.lv-pentagon .lv-modal-story p {
	margin: 0 0 16px;
}
.lv-pentagon .lv-modal-story p:last-child {
	margin-bottom: 0;
}