/*
 * Our Story timeline ([ploughshares_timeline]) and the page's hero and closing rows.
 * Loaded only on pages that use the shortcode. Everything is scoped under .psh:
 * the shortcode's root carries it, and so does each Beaver Builder row (row class "psh ...").
 */
.psh {
	--twilight: #2a3691;
	--sky: #18a8e2;
	--ink: #262626;
	--ink-muted: #4a4f6a;
	--surface-000: #fff;
	--surface-100: #f1f1f1;
	--border: #d2d9e8;
	--rail: 32px;
	--maxw: 1180px;
	--nav-h: 64px;
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.625;
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
}
.psh *, .psh *::before, .psh *::after { box-sizing: border-box; }
.psh :where(h1, h2, p, figure, figcaption) { margin: 0; padding: 0; font-family: inherit; color: inherit; text-transform: none; letter-spacing: normal; }
.psh :where(ol, ul, li) { list-style: none; margin: 0; padding: 0; }
.psh :where(li)::before, .psh :where(li)::marker { content: none; }
.psh :where(img) { max-width: 100%; display: block; height: auto; border: 0; padding: 0; margin: 0; box-shadow: none; border-radius: 0; }
.psh :where(a) { color: inherit; text-decoration: none; }
.psh a:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.psh sup { font-size: .6em; line-height: 0; }
.psh .psh-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .psh .psh-wrap { padding: 0 32px; } }

/* Beaver Builder scaffolding: rows and modules carry no spacing of their own. */
.psh > .fl-row-content-wrap > .fl-row-content { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .psh > .fl-row-content-wrap > .fl-row-content { padding: 0 32px; } }
.psh .fl-module, .psh .fl-module-content { margin: 0; }
.psh .fl-col-content { padding: 0; margin: 0; }
.psh .fl-col-group { display: grid; grid-template-columns: minmax(0, 1fr); }
.psh .fl-col-group::before, .psh .fl-col-group::after,
.psh .fl-row-content::before, .psh .fl-row-content::after { content: none; display: none; }
.psh .fl-col { width: auto !important; max-width: none; float: none; margin: 0; }
.psh .fl-col:only-child { grid-column: 1 / -1; }
.psh.psh-timeline-row > .fl-row-content-wrap > .fl-row-content { max-width: none; padding: 0; }

/* Buttons: plain links with class psh-btn, and Button modules with class psh-btn */
.psh a.psh-btn,
.psh .fl-module.psh-btn a.fl-button,
.psh .fl-module.psh-btn a.fl-button:visited {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	padding: 12px 24px; border-radius: 9999px;
	font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: normal; text-transform: uppercase; text-decoration: none;
	background: var(--twilight); color: #fff; border: 2px solid var(--twilight); box-shadow: none;
	transition: background .2s, color .2s, border-color .2s;
}
.psh .fl-module.psh-btn a.fl-button * { color: inherit; font: inherit; }
.psh a.psh-btn:hover, .psh .fl-module.psh-btn a.fl-button:hover, .psh .fl-module.psh-btn a.fl-button:focus-visible { background: var(--sky); border-color: var(--sky); color: #fff; }
.psh .fl-module.psh-btn--light a.fl-button, .psh .fl-module.psh-btn--light a.fl-button:visited { background: #fff; color: var(--twilight); border-color: #fff; }
.psh .fl-module.psh-btn--outline a.fl-button, .psh .fl-module.psh-btn--outline a.fl-button:visited { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.psh .fl-module.psh-btn--light a.fl-button:hover, .psh .fl-module.psh-btn--outline a.fl-button:hover { background: var(--sky); border-color: var(--sky); color: #fff; }

.psh .psh-eyebrow { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: normal; text-transform: uppercase; color: var(--twilight); }

/* Brand duotone as a gradient map (SVG filter #psh-duo, output by the shortcode) */
.psh .psh-duotone { position: relative; overflow: hidden; background: var(--twilight); }
.psh .psh-duotone img,
.psh .psh-duotone .fl-photo-content img.fl-photo-img { width: 100%; height: 100%; max-width: none; object-fit: cover; filter: grayscale(1) url(#psh-duo); }
.psh .psh-svgdefs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Hero (Beaver Builder row "psh psh-hero"; the row's own top padding clears the site header) ---------- */
.psh.psh-hero { background: var(--twilight); color: #fff; }
.psh.psh-hero > .fl-row-content-wrap > .fl-row-content { max-width: none; padding: 0; }
.psh .psh-hero__panel > .fl-col-content {
	position: relative; overflow: hidden; height: 100%;
	display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; column-gap: 12px;
	padding: 28px 16px 44px;
}
.psh .psh-hero__panel > .fl-col-content::before {
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	width: 380px; aspect-ratio: 1; right: -150px; top: -150px; opacity: .2;
	background: url(../images/beacon-diag-sky.svg) no-repeat center / contain;
}
.psh-hero__panel .fl-module { flex: 0 0 100%; position: relative; z-index: 1; max-width: 600px; }
.psh-hero__panel .fl-module.psh-btn { flex: 0 0 auto; margin-bottom: 12px; }
.psh-hero .psh-hero__eyebrow p { color: #fff; margin-bottom: 14px; font-size: 14px; line-height: 20px; font-weight: 600; text-transform: uppercase; }
.psh .fl-module.psh-hero__title { margin-bottom: 18px; }
.psh-hero .psh-hero__title .fl-heading { font-size: clamp(2.25rem, 6.4vw, 3.6rem); line-height: 1.08; letter-spacing: -.01em; font-weight: 700; color: #fff; font-family: inherit; text-transform: none; }
.psh-hero .psh-hero__title .fl-heading * { color: inherit; font: inherit; }
.psh-hero .psh-hero__lede p { font-size: 18px; line-height: 30px; font-weight: 400; margin-bottom: 30px; color: rgba(255,255,255,.92); }
.psh .psh-hero__photo > .fl-col-content { position: relative; height: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: var(--twilight); }
.psh-hero__photo .fl-module, .psh-hero__photo .fl-module-content, .psh-hero__photo .fl-photo, .psh-hero__photo .fl-photo-content { height: 100%; width: 100%; display: block; }
.psh .psh-hero__photo .fl-photo-content img.fl-photo-img { object-position: 50% 55%; }
@media (min-width: 600px) and (max-width: 999px) { .psh .psh-hero__photo > .fl-col-content { aspect-ratio: 16 / 9; } }
@media (max-width: 599px) {
	.psh .psh-hero__panel > .fl-col-content { padding: 22px 16px 32px; }
	.psh-hero .psh-hero__eyebrow p { margin-bottom: 8px; }
	.psh-hero .psh-hero__title .fl-heading { font-size: 2rem; }
	.psh .fl-module.psh-hero__title { margin-bottom: 12px; }
	.psh-hero .psh-hero__lede p { font-size: 16px; line-height: 25px; margin-bottom: 22px; }
	.psh .fl-module.psh-btn a.fl-button, .psh .fl-module.psh-btn a.fl-button:visited { padding: 11px 18px; font-size: 13px; }
}
@media (min-width: 768px) {
	.psh .psh-hero__panel > .fl-col-content { padding: 36px 32px 64px; }
}
@media (min-width: 1000px) {
	.psh-hero .fl-col-group { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: min(76vh, 680px); }
	.psh .psh-hero__panel > .fl-col-content {
		display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: 1fr; grid-auto-rows: auto; align-items: start;
		padding: 40px 56px 64px max(32px, calc((100vw - var(--maxw)) / 2 + 32px));
	}
	.psh-hero__panel .fl-module { grid-column: 1 / -1; }
	.psh-hero__panel .fl-module:first-child { align-self: end; padding-top: 64px; }
	.psh-hero__panel .fl-module.psh-btn { grid-column: auto; margin-bottom: 0; }
	.psh .psh-hero__photo > .fl-col-content { aspect-ratio: auto; }
	.psh .psh-hero__panel > .fl-col-content::before { width: 620px; right: -250px; top: -230px; }
}

/* ---------- Sticky decade menu ---------- */
.psh .psh-nav {
	position: -webkit-sticky; position: sticky; top: var(--psh-stick, 0px); z-index: 50;
	background: rgba(255,255,255,.94);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border);
}
.psh .psh-nav .psh-wrap { display: flex; align-items: center; gap: 12px; height: var(--nav-h); }
.psh .psh-nav ol { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
@media (min-width: 1100px) { .psh .psh-nav ol { flex: 0 1 auto; margin-right: auto; } }
.psh .psh-nav ol::-webkit-scrollbar { display: none; }
.psh .psh-nav ol a { display: block; padding: 6px 14px; border-radius: 9999px; font-size: 15px; font-weight: 600; color: var(--ink-muted); white-space: nowrap; transition: background .2s, color .2s; }
.psh .psh-nav ol a:hover { color: var(--twilight); }
.psh .psh-nav ol a.is-active { background: var(--twilight); color: #fff; }
.psh .psh-nav .psh-btn { padding: 9px 20px; flex: none; }
@media (max-width: 420px) { .psh .psh-nav ol a { padding: 6px 10px; font-size: 14px; } .psh .psh-nav .psh-btn { padding: 8px 14px; font-size: 13px; } }

/* ---------- Timeline ---------- */
.psh .psh-timeline-section { background: var(--surface-100); padding: 56px 0 88px; }
/* #psh-timeline (the hero's "Explore the timeline" target) lands clear of the decade menu, like the decade markers.
   The id sits on the wrap, not the intro, because the intro's reveal transform would shift where the scroll lands. */
.psh .psh-timeline-section > .psh-wrap { scroll-margin-top: calc(var(--psh-stick, 0px) + var(--nav-h) + 16px); }
.psh .psh-intro { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.psh .psh-intro .psh-eyebrow { margin-bottom: 10px; }
.psh .psh-intro h2 { font-size: clamp(1.6rem, 3.6vw, 2.25rem); line-height: 1.2; font-weight: 600; color: var(--ink); }

.psh .psh-tl { position: relative; }
.psh .psh-spine, .psh .psh-spine__fill { position: absolute; top: 0; width: 2px; }
.psh .psh-spine { bottom: 0; left: calc(var(--rail) / 2 - 1px); background: var(--border); }
.psh .psh-spine__fill { left: 0; height: 0; background: linear-gradient(var(--sky), var(--twilight)); }

/* mobile + tablet: rail on the left */
.psh .psh-event { position: relative; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: 16px; padding-bottom: 32px; }
.psh .psh-event__dot {
	grid-column: 1; grid-row: 1 / span 2; justify-self: center;
	width: 14px; height: 14px; margin-top: 30px; border-radius: 50%;
	background: var(--surface-100); border: 2px solid var(--border);
	position: relative; z-index: 1; transition: background .3s, border-color .3s;
}
.psh .psh-event.is-past .psh-event__dot { background: var(--twilight); border-color: var(--twilight); }
.psh .psh-event__media { grid-column: 2; grid-row: 1; margin-bottom: 12px; }
.psh .psh-event__img { aspect-ratio: 3 / 2; max-width: 100%; overflow: hidden; }
.psh .psh-event__img img { transition: transform .8s ease; }
.psh .psh-event__media:hover img { transform: scale(1.03); }
.psh .psh-event__img--top img { object-position: 50% 18%; }
.psh .psh-event__media figcaption { margin-top: 8px; font-size: 13px; line-height: 20px; font-weight: 300; color: var(--ink-muted); }
.psh .psh-event__card { grid-column: 2; grid-row: 2; background: var(--surface-000); border: 1px solid var(--border); padding: 22px 22px 24px; }
.psh .psh-event--text .psh-event__card { grid-row: 1; }
.psh .psh-event__year { display: block; font-size: 32px; line-height: 1; font-weight: 700; letter-spacing: -.01em; color: var(--twilight); margin-bottom: 10px; font-variant-numeric: lining-nums tabular-nums; }
.psh .psh-event__text { font-size: 16px; line-height: 26px; }
.psh .psh-event__text strong { font-weight: 600; }
.psh .psh-event__text a { color: var(--twilight); text-decoration: underline; }

.psh .psh-decade {
	display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: 16px;
	padding: 4px 0 28px;
	scroll-margin-top: calc(var(--psh-stick, 0px) + var(--nav-h) + 16px);
}
.psh .psh-decade span {
	grid-column: 1 / span 2; justify-self: start; position: relative; z-index: 1;
	font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: normal;
	color: #fff; background: var(--twilight); padding: 7px 16px; border-radius: 9999px;
}

/* desktop: centered spine, alternating sides; photo sits opposite its card */
@media (min-width: 900px) {
	.psh { --rail: 80px; }
	.psh .psh-spine { left: calc(50% - 1px); }
	.psh .psh-event { grid-template-columns: minmax(0, 1fr) var(--rail) minmax(0, 1fr); column-gap: 0; padding-bottom: 56px; align-items: center; }
	.psh .psh-event__dot { grid-column: 2; grid-row: 1; margin-top: 0; }
	.psh .psh-event__card, .psh .psh-event__media { grid-row: 1; }
	.psh .psh-event__media { margin-bottom: 0; }
	.psh .psh-event--l .psh-event__card { grid-column: 1; }
	.psh .psh-event--l .psh-event__media { grid-column: 3; }
	.psh .psh-event--r .psh-event__card { grid-column: 3; }
	.psh .psh-event--r .psh-event__media { grid-column: 1; }
	.psh .psh-event__card { padding: 30px 32px 32px; }
	.psh .psh-event__year { font-size: 40px; }
	/* text-only neighbours interleave so the page doesn't feel empty */
	.psh .psh-event--text { align-items: start; }
	.psh .psh-event--text .psh-event__dot { margin-top: 34px; }
	.psh .psh-event--text + .psh-event--text { margin-top: -110px; }
	.psh .psh-decade { grid-template-columns: 1fr; padding: 8px 0 48px; }
	.psh .psh-decade span { grid-column: 1; justify-self: center; }
}

/* ---------- Closing donate section (Beaver Builder row "psh psh-cta") ---------- */
.psh.psh-cta { position: relative; overflow: hidden; background: var(--twilight); color: #fff; }
.psh.psh-cta > .fl-row-content-wrap { position: relative; z-index: 1; }
.psh.psh-cta::before, .psh.psh-cta::after { content: ""; position: absolute; z-index: 0; pointer-events: none; aspect-ratio: 1; opacity: .2; background: no-repeat center / contain; }
.psh.psh-cta::before { width: 520px; left: -240px; top: -200px; background-image: url(../images/beacon-diag-sky.svg); }
.psh.psh-cta::after { width: 380px; right: -170px; bottom: -170px; background-image: url(../images/beacon-star-sky.svg); }
.psh-cta .fl-col-content { text-align: center; padding: 88px 0 96px; }
.psh-cta .psh-cta__text p:has(+ h2) { color: #fff; margin-bottom: 14px; font-size: 14px; line-height: 20px; font-weight: 600; text-transform: uppercase; }
.psh-cta .psh-cta__text h2 { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.1; font-weight: 700; margin: 0 auto 18px; max-width: 760px; color: #fff; }
.psh-cta .psh-cta__text h2 ~ p { font-size: 18px; line-height: 30px; max-width: 600px; margin: 0 auto 32px; color: rgba(255,255,255,.92); }
.psh-cta .fl-module.psh-btn .fl-button-wrap { text-align: center; }
.psh .psh-cta .fl-module.psh-btn a.fl-button, .psh.psh-cta .fl-module.psh-btn a.fl-button:visited { padding: 14px 30px; font-size: 15px; }

/* ---------- Motion ---------- */
.psh.js .psh-reveal { opacity: .35; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.psh.js .psh-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.psh.js .psh-reveal { opacity: 1; transform: none; transition: none; }
	.psh .psh-event__img img, .psh a.psh-btn, .psh .fl-module.psh-btn a.fl-button { transition: none; }
}