.ogsp-eyebrow {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ogsp-amber);
	margin: 0 0 1.25rem;
}

/* ── Shared content width ── */
.ogsp-content {
	max-width: 48rem;
	margin: 0 auto;
	padding: 2.5rem 1.5rem 4rem;
}

.ogsp-content--wide {
	max-width: var(--ogsp-max-width);
}

/* ── Topic tiles — used on the homepage's Explore Topics section and the
   standalone Topics landing page. ── */
.ogsp-topic-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.65rem;
	text-align: center;
	padding: 1.5rem 1rem;
	text-decoration: none;
	color: var(--ogsp-charcoal);
	border-radius: var(--ogsp-radius);
	border: 1px solid rgba(44, 44, 44, 0.05);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ogsp-topic-tile:hover {
	border-color: rgba(192, 122, 42, 0.2);
	background: var(--ogsp-cream);
}

.ogsp-topic-tile:hover .ogsp-icon-circle {
	background: rgba(192, 122, 42, 0.1);
}

.ogsp-topic-tile span {
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.3;
}

.ogsp-tile-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
}

@media (min-width: 700px) {
	.ogsp-tile-grid {
		grid-template-columns: repeat(6, 1fr);
	}
}

.ogsp-beyond-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	text-align: center;
	padding: 1.25rem;
	text-decoration: none;
	color: var(--ogsp-charcoal);
	background: var(--ogsp-white);
	border: 1px solid rgba(44, 44, 44, 0.04);
	border-radius: var(--ogsp-radius);
	transition: border-color 0.15s ease;
}

.ogsp-beyond-tile:hover {
	border-color: rgba(192, 122, 42, 0.15);
}

.ogsp-beyond-tile:hover .ogsp-icon-circle {
	background: rgba(192, 122, 42, 0.1);
}

.ogsp-beyond-tile__label {
	font-size: 0.75rem;
	font-weight: 600;
	margin: 0 0 0.15rem;
}

.ogsp-beyond-tile__desc {
	font-size: 0.625rem;
	color: var(--ogsp-muted);
	line-height: 1.4;
	margin: 0;
}

/* ── Archive grids (Podcast archive, and future Our Stories/Beyond archives) ── */
.ogsp-archive-header {
	margin-bottom: 2.5rem;
}

.ogsp-archive-header h1 {
	margin-bottom: 0.5rem;
}

.ogsp-archive-header p {
	color: var(--ogsp-muted);
	font-size: 0.875rem;
	max-width: 34rem;
	margin: 0;
}

.ogsp-archive-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1.75rem;
}

.ogsp-archive-card {
	text-decoration: none;
	color: inherit;
	display: block;
}

.ogsp-archive-card__media {
	border-radius: var(--ogsp-radius);
	overflow: hidden;
	margin-bottom: 0.75rem;
}

.ogsp-archive-card__media img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.ogsp-archive-card:hover .ogsp-archive-card__media img {
	transform: scale(1.04);
}

.ogsp-archive-card__meta {
	display: block;
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--ogsp-amber);
	margin-bottom: 0.25rem;
}

.ogsp-archive-card__title {
	margin: 0 0 0.25rem;
	font-size: 1rem;
	transition: color 0.15s ease;
}

.ogsp-archive-card:hover .ogsp-archive-card__title {
	color: var(--ogsp-amber);
}

.ogsp-archive-card__sub {
	color: var(--ogsp-muted);
	font-size: 0.75rem;
	margin: 0;
}

.ogsp-archive-pagination {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 3rem;
}

.ogsp-archive-pagination a,
.ogsp-archive-pagination span {
	padding: 0.5rem 0.9rem;
	border-radius: var(--ogsp-radius-pill);
	font-size: 0.8125rem;
	text-decoration: none;
	color: var(--ogsp-charcoal);
	border: 1px solid rgba(44, 44, 44, 0.1);
}

.ogsp-archive-pagination .current {
	background: var(--ogsp-amber);
	color: var(--ogsp-white);
	border-color: var(--ogsp-amber);
}

/* ── CTA bar (brief §7.5) ── */
.ogsp-cta-bar {
	background: var(--ogsp-cream);
	border-bottom: 1px solid rgba(44, 44, 44, 0.08);
}

.ogsp-cta-bar__inner {
	max-width: var(--ogsp-max-width);
	margin: 0 auto;
	padding: 0.875rem 1.5rem;
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	flex-wrap: wrap;
}

/* ── Video embed ── */
.ogsp-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--ogsp-charcoal);
	border-radius: var(--ogsp-radius);
	overflow: hidden;
	margin-bottom: 2rem;
}

.ogsp-video iframe,
.ogsp-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Story-page player breakout: modestly wider than the 48rem text
   column, centered; collapses to the normal full column width on
   small screens (min() picks the viewport-based value there). */
.ogsp-video--breakout {
	width: min(58rem, calc(100vw - 3rem));
	margin-left: 50%;
	transform: translateX(-50%);
}

/* ── About: single centered video area (owner ruling 2026-07-29,
   option B). Embed or coming-soon placeholder, copy stacked below. ── */
.ogsp-about-video {
	max-width: 48rem;
	margin: 0 auto;
}

.ogsp-about-video .ogsp-video {
	margin-bottom: 0;
}

.ogsp-video--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}

.ogsp-video-placeholder__icon {
	display: flex;
	color: rgba(255, 255, 255, 0.4);
}

.ogsp-about-video__caption {
	margin: 0.85rem 0 0;
	text-align: center;
	color: var(--ogsp-muted);
	font-size: 0.9rem;
}

/* Founder letter: owner-written long-form below the video. Constrained
   reading column, centered on the page but LEFT-aligned body for
   legibility (the video panel above stays centered). */
.ogsp-about-letter {
	max-width: 44rem;
	margin: 2.75rem auto 0;
	text-align: left;
}

.ogsp-about-letter p:not(.ogsp-eyebrow):not(.ogsp-about-letter__sign) {
	color: var(--ogsp-body-secondary);
	font-size: 1rem;
	line-height: 1.7;
	margin: 0 0 1.15rem;
}

.ogsp-about-letter__sign {
	margin: 1.75rem 0 0;
	color: var(--ogsp-charcoal);
	font-weight: 600;
	line-height: 1.5;
}

/* Lite embed poster (featured image + play button; iframe on click) */
.ogsp-video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	display: block;
}

.ogsp-video__poster img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ogsp-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: var(--ogsp-amber);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(30, 26, 20, 0.35);
	transition: transform 0.2s ease;
}

.ogsp-video__poster:hover .ogsp-video__play,
.ogsp-video__poster:focus-visible .ogsp-video__play {
	transform: translate(-50%, -50%) scale(1.08);
}

/* ── TL;DR ── */
.ogsp-tldr {
	background: var(--ogsp-cream);
	border-radius: var(--ogsp-radius);
	padding: 1.25rem 1.5rem;
	margin-bottom: 2rem;
}

.ogsp-tldr p:last-child {
	margin-bottom: 0;
	font-family: var(--ogsp-font-headline);
	font-size: 1.125rem;
}

/* ── Article featured image (single-article.php only) ── */
/* The wrapper had no margin, so the image sat tight against the first
   H2 (base h2 has margin-top:0). Give it clear bottom separation that
   balances the ~1.5rem gap above the image (the byline's margin-bottom)
   and matches this template's 2rem block rhythm. Scoped to the article
   featured image only — .ogsp-article-media is used nowhere else. */
.ogsp-article-media {
	margin-bottom: 2rem;
}

/* ── Key Takeaways ── */
.ogsp-key-takeaways {
	margin-bottom: 2rem;
}

.ogsp-key-takeaways ul {
	margin: 0;
	padding-left: 1.25rem;
}

.ogsp-key-takeaways li {
	margin-bottom: 0.5rem;
}

/* ── Single Resource (brief §7.4) ── */
.ogsp-resource-cover {
	margin-bottom: 1.5rem;
}

.ogsp-resource-cover img {
	width: 100%;
	max-height: 22rem;
	object-fit: cover;
	border-radius: var(--ogsp-radius);
	display: block;
}

.ogsp-resource-meta {
	color: var(--ogsp-muted);
	font-size: 0.8125rem;
	margin: -0.75rem 0 1.5rem;
}

.ogsp-resource-meta span:not(:last-child)::after {
	content: '\00B7';
	margin: 0 0.5em;
}

.ogsp-quick-facts {
	margin-bottom: 2rem;
}

.ogsp-quick-facts dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.4rem 1rem;
	margin: 0;
}

.ogsp-quick-facts dt {
	color: var(--ogsp-muted);
	font-size: 0.8125rem;
}

.ogsp-quick-facts dd {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 500;
}

.ogsp-why-recommend {
	background: var(--ogsp-cream);
	border-radius: var(--ogsp-radius);
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.5rem;
}

.ogsp-why-recommend .ogsp-eyebrow {
	margin-bottom: 0.5rem;
}

.ogsp-why-recommend p:last-child {
	margin-bottom: 0;
}

.ogsp-affiliate-disclosure {
	color: var(--ogsp-muted);
	font-size: 0.6875rem;
	margin: 0.5rem 0 2rem;
}

/* ── Quick Answers (Hub) — visible Q&A pairs, not collapsible ── */
.ogsp-quick-answers {
	margin-bottom: 2rem;
}

.ogsp-quick-answers__item {
	margin-bottom: 1.25rem;
}

.ogsp-quick-answers__item h3 {
	font-size: 1rem;
	margin: 0 0 0.35rem;
}

.ogsp-quick-answers__item p {
	color: var(--ogsp-body-secondary);
	margin: 0;
}

/* ── Hub: Featured OGSP Story (brief §7.3 — "the hero of the page") ── */
.ogsp-hub-featured-story {
	margin-bottom: 2rem;
}

.ogsp-hub-featured-story__media {
	display: block;
	border-radius: var(--ogsp-radius);
	overflow: hidden;
	margin-bottom: 1rem;
}

.ogsp-hub-featured-story__media img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

.ogsp-hub-featured-story h2 {
	margin: 0 0 0.5rem;
}

.ogsp-hub-featured-story p {
	color: var(--ogsp-body-secondary);
	margin: 0 0 1rem;
}

/* ── Story summary ── */
.ogsp-story-summary {
	margin-bottom: 2rem;
	color: var(--ogsp-body-secondary);
}

/* ── Sponsor credit (brief §4.7, locked: quiet, after summary, never
   above/inside the video) ── */
.ogsp-sponsor-credit {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 1.25rem;
	background: var(--ogsp-cream);
	border-radius: var(--ogsp-radius);
	margin-bottom: 2rem;
	font-size: 0.8125rem;
	color: var(--ogsp-muted);
}

.ogsp-sponsor-credit__logo {
	height: 1.75rem;
	width: auto;
	object-fit: contain;
}

.ogsp-sponsor-credit p {
	margin: 0;
}

.ogsp-sponsor-credit a {
	color: var(--ogsp-amber);
	text-decoration: none;
}

/* ── Transcript (collapsible via native <details>) ── */
.ogsp-transcript {
	margin-bottom: 2rem;
	border: 1px solid rgba(44, 44, 44, 0.1);
	border-radius: var(--ogsp-radius);
	padding: 1rem 1.25rem;
}

.ogsp-transcript summary {
	cursor: pointer;
	font-weight: 600;
	font-family: var(--ogsp-font-body);
}

.ogsp-transcript__body {
	margin-top: 1rem;
	color: var(--ogsp-body-secondary);
	white-space: pre-wrap;
}

.ogsp-collapsible {
	margin-bottom: 2rem;
	border: 1px solid rgba(44, 44, 44, 0.1);
	border-radius: var(--ogsp-radius);
	padding: 1rem 1.25rem;
}

.ogsp-collapsible summary {
	cursor: pointer;
	font-weight: 600;
	font-family: var(--ogsp-font-body);
}

.ogsp-collapsible__body {
	margin-top: 1rem;
}

.ogsp-collapsible__body > :last-child {
	margin-bottom: 0;
}

/* ── Related Topics ── */
.ogsp-related-topics {
	margin-bottom: 2rem;
}

.ogsp-related-topics__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ogsp-tag {
	display: inline-block;
	padding: 0.375rem 0.875rem;
	border-radius: var(--ogsp-radius-pill);
	background: var(--ogsp-cream);
	color: var(--ogsp-charcoal);
	font-size: 0.75rem;
	text-decoration: none;
}

.ogsp-tag:hover {
	color: var(--ogsp-amber);
}

/* ── Related Resources ── */
.ogsp-related-resources {
	margin-bottom: 2rem;
}

.ogsp-related-resources__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: 1rem;
}

/* Grouped story-page layout: a type subheading following the previous
   group's grid gets the standard section-gap above it. */
.ogsp-related-resources__grid + .ogsp-eyebrow {
	margin-top: 2rem;
}

.ogsp-related-resources__item {
	text-decoration: none;
	color: inherit;
	display: block;
}

.ogsp-card__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	/* Resource art is logos/covers/key art — never crop it. The cream
	   letterbox keeps odd aspect ratios looking deliberate. */
	object-fit: contain;
	background: var(--ogsp-cream);
}

.ogsp-card__body {
	padding: 1rem;
}

.ogsp-card__title {
	margin: 0;
	font-family: var(--ogsp-font-headline);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ogsp-charcoal);
}

/* ── FAQ accordion (native <details>) ── */
.ogsp-faq-accordion {
	margin-bottom: 2rem;
}

.ogsp-faq-accordion__item {
	border-bottom: 1px solid rgba(44, 44, 44, 0.1);
	padding: 1rem 0;
}

.ogsp-faq-accordion__item summary {
	cursor: pointer;
	font-family: var(--ogsp-font-headline);
	font-weight: 700;
	font-size: 1rem;
}

.ogsp-faq-accordion__answer {
	margin-top: 0.75rem;
	color: var(--ogsp-body-secondary);
}

/* ── Inline newsletter (brief §8: near the bottom of story/episode/hub
   pages, in addition to the homepage section and the footer) ── */
.ogsp-inline-newsletter {
	border: 1px solid rgba(44, 44, 44, 0.1);
	border-radius: var(--ogsp-radius);
	padding: 1.75rem;
	margin-bottom: 2rem;
}

.ogsp-inline-newsletter .ogsp-newsletter {
	text-align: center;
}

.ogsp-inline-newsletter .ogsp-newsletter__form {
	flex-direction: row;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	max-width: 32rem;
	margin: 0 auto;
}

.ogsp-inline-newsletter .ogsp-newsletter__form input[type='email'],
.ogsp-inline-newsletter .ogsp-newsletter__form input[type='text'] {
	flex: 1;
	min-width: 0;
	padding: 0.625rem 1rem;
	border-radius: var(--ogsp-radius-pill);
	border: 1px solid rgba(44, 44, 44, 0.15);
	font-family: var(--ogsp-font-body);
	font-size: 0.8125rem;
}

.ogsp-inline-newsletter .ogsp-newsletter__form input[type='text'] {
	flex: 0 1 8rem;
}

.ogsp-inline-newsletter .ogsp-newsletter__form input:focus {
	outline: none;
	border-color: var(--ogsp-amber);
}

.ogsp-newsletter__notice {
	margin-top: 0.75rem;
	margin-bottom: 0;
}

/* ── Podcast archive "Coming Soon" empty state (2026-07-29) — conditional
   hero shown when zero episodes are published; reuses the locked inline
   newsletter. Layout only; no new colors, fonts, or primitives. ── */
.ogsp-podcast-soon {
	max-width: 42rem;
	margin: 0 auto;
	padding: 2rem 0 3rem;
	text-align: center;
}

.ogsp-podcast-soon__title {
	margin-bottom: 1rem;
}

.ogsp-podcast-soon__body {
	color: var(--ogsp-body-secondary);
	font-size: 1.0625rem;
	line-height: 1.7;
	max-width: 34rem;
	margin: 0 auto 2.5rem;
}

.ogsp-podcast-soon__newsletter {
	margin-bottom: 0;
}

/* ── Search page (A1, Figma Search.tsx) ── */
.ogsp-search-hero {
	background: var(--ogsp-cream);
	border-bottom: 1px solid rgba(44, 44, 44, 0.05);
	padding: 3.5rem 1.5rem;
}

.ogsp-search-hero__inner {
	max-width: 48rem;
	margin: 0 auto;
}

.ogsp-search-form {
	position: relative;
}

.ogsp-search-form__icon {
	position: absolute;
	left: 1.25rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ogsp-muted);
	pointer-events: none;
}

.ogsp-search-form input[type='search'] {
	width: 100%;
	padding: 1rem 1.25rem 1rem 3rem;
	border-radius: 1rem;
	border: 1px solid rgba(44, 44, 44, 0.1);
	background: var(--ogsp-white);
	font-family: var(--ogsp-font-body);
	font-size: 0.875rem;
	color: var(--ogsp-charcoal);
}

.ogsp-search-form input[type='search']:focus {
	outline: none;
	border-color: var(--ogsp-amber);
}

.ogsp-search-results {
	padding: 3.5rem 1.5rem;
}

.ogsp-search-results__count {
	font-size: 0.75rem;
	color: var(--ogsp-muted);
	margin: 0 0 2rem;
}

.ogsp-search-results__list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ogsp-search-row {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 1.25rem;
	border-radius: 1rem;
	border: 1px solid rgba(44, 44, 44, 0.04);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease;
}

.ogsp-search-row:hover {
	border-color: rgba(44, 44, 44, 0.08);
}

.ogsp-search-row__media {
	flex-shrink: 0;
	width: 4rem;
	height: 4rem;
	border-radius: 0.75rem;
	overflow: hidden;
	background: var(--ogsp-cream);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ogsp-search-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ogsp-search-row__icon {
	color: var(--ogsp-amber);
	display: inline-flex;
}

.ogsp-search-row__body {
	flex: 1;
	min-width: 0;
}

.ogsp-search-row__type {
	display: block;
	font-size: 0.5625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ogsp-amber);
	margin-bottom: 0.2rem;
}

.ogsp-search-row__title {
	display: block;
	font-family: var(--ogsp-font-headline);
	font-weight: 700;
	font-size: 0.9375rem;
	margin-bottom: 0.2rem;
	transition: color 0.15s ease;
}

.ogsp-search-row:hover .ogsp-search-row__title {
	color: var(--ogsp-amber);
}

.ogsp-search-row__desc {
	display: block;
	font-size: 0.75rem;
	color: var(--ogsp-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ogsp-search-row__chevron {
	flex-shrink: 0;
	color: var(--ogsp-muted);
}

.ogsp-search-suggest {
	background: var(--ogsp-cream);
	border-top: 1px solid rgba(44, 44, 44, 0.05);
	padding: 3.5rem 1.5rem;
}

.ogsp-search-suggest h2 {
	font-size: 1.25rem;
	margin-bottom: 1.5rem;
}

.ogsp-search-suggest__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.ogsp-search-suggest__chips .ogsp-tag {
	background: var(--ogsp-white);
	border: 1px solid rgba(44, 44, 44, 0.08);
}

.ogsp-search-suggest__links {
	display: flex;
	gap: 1.5rem;
	margin-top: 2rem;
}

/* ── Breadcrumbs (B3 — owner addition; ready for Phase 6 BreadcrumbList) ── */
.ogsp-breadcrumbs {
	background: var(--ogsp-white);
	border-bottom: 1px solid rgba(44, 44, 44, 0.06);
}

.ogsp-breadcrumbs ol {
	max-width: var(--ogsp-content-max-width);
	margin: 0 auto;
	padding: 0.75rem 1.5rem;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	color: var(--ogsp-muted);
}

.ogsp-breadcrumbs li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ogsp-breadcrumbs li + li::before {
	content: '\203A';
	color: var(--ogsp-muted);
}

.ogsp-breadcrumbs a {
	color: var(--ogsp-muted);
	text-decoration: none;
	transition: color 0.15s ease;
}

.ogsp-breadcrumbs a:hover {
	color: var(--ogsp-amber);
}

.ogsp-breadcrumbs [aria-current='page'] {
	color: var(--ogsp-charcoal);
	font-weight: 500;
}

/* ── Dark CTA band (E11 — shared; Figma's recurring bottom band) ── */
.ogsp-cta-band {
	position: relative;
	overflow: hidden;
	padding: 6rem 1.5rem;
}

.ogsp-cta-band--tall {
	min-height: 70vh;
	display: flex;
	align-items: center;
}

/* Tall variant typography (404): Figma NotFound.tsx sets the headline
   at 42px — larger than the shared band's 38px default. (Session C
   late fix: the tall variant previously inherited the base size.) */
.ogsp-cta-band--tall .ogsp-cta-band__content h2 {
	font-size: 2.625rem;
}

.ogsp-cta-band__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ogsp-cta-band__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(28, 21, 12, 0.85) 0%, rgba(28, 21, 12, 0.9) 100%);
}

.ogsp-cta-band__content {
	position: relative;
	z-index: 1;
	max-width: 42rem;
	margin: 0 auto;
	text-align: center;
	width: 100%;
}

.ogsp-cta-band__content .ogsp-eyebrow {
	margin-bottom: 1.5rem;
}

.ogsp-cta-band__content h2,
.ogsp-cta-band__content .ogsp-cta-band__title {
	color: var(--ogsp-white);
	font-family: var(--ogsp-font-headline);
	font-weight: 700;
	font-size: 2.375rem;
	line-height: 1.2;
	margin: 0 0 1.25rem;
}

.ogsp-cta-band__copy {
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.875rem;
	line-height: 1.85;
	max-width: 28rem;
	margin: 0 auto 2.5rem;
}

.ogsp-cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.ogsp-cta-band__actions .ogsp-btn-text-white {
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
	font-size: 0.875rem;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	transition: color 0.15s ease;
}

.ogsp-cta-band__actions .ogsp-btn-text-white:hover {
	color: rgba(255, 255, 255, 0.8);
}

/* ── Section layout (shared: homepage, sponsor pages, future templates).
   Plain sections: the <section> itself is the constrained content box.
   Cream sections: the <section> is full-bleed color; max-width moves to
   the inner .ogsp-section-inner wrapper so the background reaches the
   viewport edges while the content stays constrained. ── */
.ogsp-section {
	max-width: var(--ogsp-content-max-width);
	margin: 0 auto;
	padding: 3.5rem 1.5rem;
}

.ogsp-section--cream {
	max-width: none;
	margin: 0;
	padding: 3.5rem 0;
	background: var(--ogsp-cream);
}

.ogsp-section--cream > .ogsp-section-inner {
	max-width: var(--ogsp-content-max-width);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.ogsp-section--divider-top {
	border-top: 1px solid rgba(44, 44, 44, 0.06);
}

.ogsp-section__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.5rem;
	gap: 1rem;
	flex-wrap: wrap;
}

.ogsp-section__heading h2 {
	margin: 0;
	/* Design Pass A, Item 6: modest bump on top-level section headings;
	   weight stays 700 (base heading weight) per owner. */
	font-size: 1.75rem;
}

/* ── Full-bleed hero (shared: homepage, sponsor hub, future pages) ── */
.ogsp-hero {
	position: relative;
	min-height: 30rem;
	overflow: hidden;
}

.ogsp-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ogsp-hero__gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0) 100%);
}

.ogsp-hero__content {
	position: relative;
	z-index: 1;
	max-width: var(--ogsp-content-max-width);
	margin: 0 auto;
	padding: 6rem 1.5rem;
	min-height: 30rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.ogsp-hero__eyebrow {
	position: absolute;
	top: 2rem;
	left: 1.5rem;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ogsp-hero__title {
	color: var(--ogsp-white);
	/* Design Pass A, Item 6: heavier + larger hero H1 (weight 800). */
	font-size: 3.5rem;
	font-weight: 800;
	max-width: 32rem;
	margin-bottom: 1rem;
}

.ogsp-hero__desc {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.875rem;
	max-width: 24rem;
	line-height: 1.6;
	margin-bottom: 1.75rem;
}

.ogsp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

@media (max-width: 700px) {
	.ogsp-hero {
		min-height: 24rem;
	}
	.ogsp-hero__content {
		min-height: 24rem;
		padding: 4rem 1.5rem;
	}
	.ogsp-hero__title {
		font-size: 2.5rem;
	}
}

/* ── Sponsor hub: Ways to Help cards ── */
.ogsp-ways-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	margin-top: 1.5rem;
}

.ogsp-way-card {
	display: block;
	padding: 1.75rem;
	text-decoration: none;
	color: inherit;
}

.ogsp-way-card .ogsp-icon-circle {
	margin-bottom: 1rem;
}

.ogsp-way-card h3 {
	font-size: 0.9375rem;
	font-family: var(--ogsp-font-headline);
	margin: 0 0 0.4rem;
	transition: color 0.15s ease;
}

.ogsp-way-card:hover h3 {
	color: var(--ogsp-amber);
}

.ogsp-way-card p {
	font-size: 0.75rem;
	color: var(--ogsp-body-secondary);
	line-height: 1.6;
	margin: 0 0 0.9rem;
}

@media (max-width: 800px) {
	.ogsp-ways-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Sponsor hub: FAQ (1/3 heading + 2/3 list) ── */
.ogsp-sponsor-faq,
.ogsp-faq-split {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 3.5rem;
	align-items: start;
}

.ogsp-sponsor-faq__head h2,
.ogsp-faq-split__head h2 {
	font-size: 1.5rem;
	margin: 0 0 0.75rem;
}

.ogsp-sponsor-faq__list,
.ogsp-faq-split__list {
	margin: 0;
}

@media (max-width: 800px) {
	.ogsp-sponsor-faq,
	.ogsp-faq-split {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

/* ── Draft-copy marker (owner-review note) ── */
.ogsp-draft-note {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--ogsp-amber);
	background: rgba(192, 122, 42, 0.08);
	border: 1px dashed rgba(192, 122, 42, 0.4);
	border-radius: var(--ogsp-radius);
	padding: 0.35rem 0.7rem;
	margin: 0 0 1.5rem;
}

.ogsp-section-lead {
	color: var(--ogsp-muted);
	font-size: 0.875rem;
	max-width: 34rem;
	margin: -0.5rem 0 1.5rem;
}

/* ── Sponsor sub-page hero (cream) ── */
.ogsp-subpage-hero {
	background: var(--ogsp-cream);
	border-bottom: 1px solid rgba(44, 44, 44, 0.05);
	padding: 3.5rem 1.5rem;
}

.ogsp-subpage-hero__inner {
	max-width: var(--ogsp-content-max-width);
	margin: 0 auto;
}

.ogsp-subpage-hero .ogsp-icon-circle {
	margin-bottom: 1.25rem;
}

.ogsp-subpage-hero .ogsp-eyebrow {
	margin-bottom: 1rem;
}

.ogsp-subpage-hero h1 {
	font-size: 2.5rem;
	max-width: 30rem;
	margin-bottom: 1.25rem;
}

/* Text-only hero (gift page, owner 2026-08-02): no media column, so give
   the H1 a slightly wider cap (34rem/544px) than the split-hero default
   (30rem/480px) so "Give the gift of storytelling." (≈501px at the bold
   40px Playfair) sits on ONE line at desktop. Scoped to --text ONLY so the
   split heroes on the Film + Corporate pages keep their 480px wrap. Still
   wraps naturally at mobile widths (the hero column is far narrower). */
.ogsp-subpage-hero--text h1 {
	max-width: 34rem;
}

.ogsp-subpage-hero__intro {
	color: var(--ogsp-body-secondary);
	font-size: 0.9375rem;
	line-height: 1.9;
	max-width: 38rem;
	margin: 0;
}

/* ── Sponsor split section (text, optional side content) ── */
.ogsp-sponsor-split,
.ogsp-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3.5rem;
	align-items: center;
}

.ogsp-sponsor-split--values {
	align-items: start;
}

.ogsp-sponsor-split__text h2 {
	font-size: 1.5rem;
	margin: 0.75rem 0 1rem;
}

.ogsp-sponsor-split__text p {
	color: var(--ogsp-body-secondary);
	font-size: 0.875rem;
	line-height: 1.9;
	max-width: 30rem;
}

@media (max-width: 800px) {
	.ogsp-sponsor-split {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/* Text-only intro block (Monthly, Gift) — single column, constrained. */
.ogsp-sponsor-prose {
	max-width: 42rem;
}

.ogsp-sponsor-prose h2 {
	font-size: 1.5rem;
	margin: 0 0 1rem;
}

.ogsp-sponsor-prose p {
	color: var(--ogsp-body-secondary);
	font-size: 0.875rem;
	line-height: 1.9;
}

/* ── Corporate values list ── */
.ogsp-value-list {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.ogsp-value-item {
	display: flex;
	gap: 1rem;
	padding: 1.25rem;
	border: 1px solid rgba(44, 44, 44, 0.05);
	border-radius: var(--ogsp-radius);
	background: var(--ogsp-cream);
}

.ogsp-value-item__title {
	font-size: 0.8125rem;
	font-weight: 600;
	margin: 0 0 0.25rem;
}

.ogsp-value-item__desc {
	font-size: 0.75rem;
	color: var(--ogsp-body-secondary);
	line-height: 1.55;
	margin: 0;
}

/* ── Numbered steps (Film/Gift "how it works") ── */
.ogsp-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	margin-top: 1.5rem;
}

.ogsp-step__num {
	font-family: var(--ogsp-font-headline);
	font-weight: 700;
	font-size: 2.5rem;
	line-height: 1;
	color: rgba(192, 122, 42, 0.3);
	display: block;
	margin-bottom: 0.75rem;
}

.ogsp-step__title {
	font-size: 0.875rem;
	font-weight: 600;
	margin: 0 0 0.4rem;
}

.ogsp-step__desc {
	font-size: 0.75rem;
	color: var(--ogsp-body-secondary);
	line-height: 1.6;
	margin: 0;
}

@media (max-width: 800px) {
	.ogsp-steps {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

/* ── Dynamic film-example section (Film/Corporate) ── */
.ogsp-sponsor-example {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3.5rem;
	align-items: center;
}

.ogsp-sponsor-example__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--ogsp-radius);
}

.ogsp-sponsor-example__body h2 {
	font-size: 1.5rem;
	margin: 0.75rem 0 1rem;
}

.ogsp-sponsor-example__body p {
	color: var(--ogsp-body-secondary);
	font-size: 0.875rem;
	line-height: 1.9;
	max-width: 30rem;
}

@media (max-width: 800px) {
	.ogsp-sponsor-example {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

/* ── Other ways to sponsor (cross-links) ── */
.ogsp-other-ways__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-top: 1rem;
}

.ogsp-other-ways__card {
	display: block;
	padding: 1.25rem;
	text-decoration: none;
	color: inherit;
}

.ogsp-other-ways__label {
	font-size: 0.8125rem;
	font-weight: 600;
	margin: 0 0 0.35rem;
	transition: color 0.15s ease;
}

.ogsp-other-ways__card:hover .ogsp-other-ways__label {
	color: var(--ogsp-amber);
}

.ogsp-other-ways__desc {
	font-size: 0.6875rem;
	color: var(--ogsp-muted);
	line-height: 1.5;
	margin: 0;
}

@media (max-width: 800px) {
	.ogsp-other-ways__grid {
		grid-template-columns: 1fr;
	}
}

/* ── Contact context line ── */
.ogsp-contact-context {
	font-size: 0.875rem;
	color: var(--ogsp-charcoal);
	margin-bottom: 1.5rem;
}

/* ── CTA band subtitle ── */
.ogsp-cta-band__subtitle {
	font-family: var(--ogsp-font-headline);
	font-style: italic;
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.75);
	margin: 0 0 1rem;
}

/* ── Contact form (C6) ── */
.ogsp-contact-form label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.ogsp-contact-form input[type='text'],
.ogsp-contact-form input[type='email'],
.ogsp-contact-form input[type='url'],
.ogsp-contact-form select,
.ogsp-contact-form textarea {
	width: 100%;
	padding: 0.625rem 0.9rem;
	border-radius: var(--ogsp-radius);
	border: 1px solid rgba(44, 44, 44, 0.15);
	font-family: var(--ogsp-font-body);
	font-size: 0.875rem;
}

.ogsp-contact-form input:focus,
.ogsp-contact-form select:focus,
.ogsp-contact-form textarea:focus {
	outline: none;
	border-color: var(--ogsp-amber);
}

.ogsp-contact-form__optin label {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-weight: 400;
	font-size: 0.8125rem;
	color: var(--ogsp-body-secondary);
}

.ogsp-contact-form__optin input {
	margin-top: 0.2rem;
}

/* ── CTA row (bottom of single templates) ── */
.ogsp-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(44, 44, 44, 0.1);
}

/* ══════════════════════════════════════════════════════════════════
   Reusable primitives relocated from homepage.css (fix Session B r2).
   These are generic layout/card/grid/tag/section patterns that any
   template may use — homepage.css (front-page-only) must never hold
   classes a non-homepage template could reach for. See CLAUDE.md.
   ══════════════════════════════════════════════════════════════════ */

/* Film card + its grid (More Stories, and any film listing) */
.ogsp-more-stories__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 1.25rem;
}

.ogsp-film-card {
	text-decoration: none;
	color: inherit;
	display: block;
}

.ogsp-film-card__media {
	position: relative;
	border-radius: var(--ogsp-radius);
	overflow: hidden;
	margin-bottom: 0.65rem;
}

.ogsp-film-card__media img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform 0.5s ease;
	display: block;
}

.ogsp-film-card:hover .ogsp-film-card__media img {
	transform: scale(1.05);
}

.ogsp-film-card__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0);
	transition: background-color 0.15s ease;
}

.ogsp-film-card:hover .ogsp-film-card__play {
	background: rgba(0, 0, 0, 0.15);
}

.ogsp-film-card__play span {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.ogsp-film-card:hover .ogsp-film-card__play span {
	opacity: 1;
}

.ogsp-film-card__topic {
	display: block;
	font-size: 0.625rem;
	font-weight: 500;
	color: var(--ogsp-amber);
	margin-bottom: 0.15rem;
}

.ogsp-film-card__title {
	margin: 0 0 0.2rem;
	font-size: 0.75rem;
	font-weight: 600;
	transition: color 0.15s ease;
}

.ogsp-film-card:hover .ogsp-film-card__title {
	color: var(--ogsp-amber);
}

.ogsp-film-card__runtime {
	color: var(--ogsp-muted);
	font-size: 0.6875rem;
}

/* Tile grids (Explore Topics, Beyond Our Stories) */
.ogsp-explore-topics__grid,
.ogsp-beyond-tiles__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
}

@media (min-width: 700px) {
	.ogsp-explore-topics__grid,
	.ogsp-beyond-tiles__grid {
		grid-template-columns: repeat(6, 1fr);
	}
}

/* Section intro paragraph */
.ogsp-beyond-intro {
	color: var(--ogsp-muted);
	font-size: 0.75rem;
	max-width: 34rem;
	margin: -0.75rem 0 1.75rem;
}

/* Outline tag pill */
.ogsp-tag-outline {
	display: inline-block;
	padding: 0.15rem 0.7rem;
	border-radius: var(--ogsp-radius-pill);
	border: 1px solid rgba(192, 122, 42, 0.3);
	color: var(--ogsp-amber);
	font-size: 0.5625rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	margin-bottom: 1rem;
}

/* Full-width newsletter section treatment */
.ogsp-newsletter-section {
	background: var(--ogsp-cream);
	padding: 3.5rem 1.5rem;
}

.ogsp-newsletter-section .ogsp-newsletter {
	max-width: 34rem;
	margin: 0 auto;
	text-align: center;
}

.ogsp-newsletter-section .ogsp-newsletter__desc {
	color: var(--ogsp-body-secondary);
	margin: 0.5rem 0 1.5rem;
}

.ogsp-newsletter-section .ogsp-newsletter__form {
	flex-direction: row;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ogsp-newsletter-section .ogsp-newsletter__form input[type='email'],
.ogsp-newsletter-section .ogsp-newsletter__form input[type='text'] {
	flex: 1;
	min-width: 0;
	padding: 0.625rem 1rem;
	border-radius: var(--ogsp-radius-pill);
	border: 1px solid rgba(44, 44, 44, 0.15);
	font-family: var(--ogsp-font-body);
	font-size: 0.8125rem;
}

.ogsp-newsletter-section .ogsp-newsletter__form input[type='text'] {
	flex: 0 1 9rem;
}

.ogsp-newsletter-section .ogsp-newsletter__form input:focus {
	outline: none;
	border-color: var(--ogsp-amber);
}

/* ════════════════════════════════════════════════════════════════════
   Browse layer (fix Session C) — reusable primitives shared by the six
   resource archives, /beyond/{type}/topic/{slug} filtered views, the
   Parent Topic page, and the Beyond landing. Global by CLAUDE.md's CSS
   scoping rule (never homepage.css).
   ════════════════════════════════════════════════════════════════════ */

/* ── Cream page hero (Figma's breadcrumb + eyebrow + H1 + intro band) ── */
.ogsp-page-hero {
	background: var(--ogsp-cream);
	border-bottom: 1px solid rgba(44, 44, 44, 0.05);
	padding: 3.5rem 1.5rem 3rem;
}

.ogsp-page-hero__inner {
	max-width: var(--ogsp-content-max-width);
	margin: 0 auto;
}

.ogsp-page-hero .ogsp-eyebrow {
	margin-bottom: 0.75rem;
}

.ogsp-page-hero h1 {
	font-size: 2.75rem;
	line-height: 1.15;
	margin: 0 0 1rem;
}

.ogsp-page-hero__intro {
	color: var(--ogsp-body-secondary);
	font-size: 0.875rem;
	line-height: 1.85;
	max-width: 36rem;
	margin: 0;
}

.ogsp-page-hero__intro + .ogsp-page-hero__intro {
	margin-top: 0.5rem;
}

@media (max-width: 800px) {
	.ogsp-page-hero h1 {
		font-size: 2.125rem;
	}
}

/* ── Browse section headings ── */
.ogsp-browse-title {
	font-size: 1.5rem;
	margin: 0 0 0.5rem;
}

.ogsp-browse-lead {
	color: var(--ogsp-muted);
	font-size: 0.875rem;
	margin: 0 0 2.5rem;
}

.ogsp-eyebrow + .ogsp-browse-title {
	margin-bottom: 2.25rem;
}

/* ── Collection heading row (icon + uppercase label + optional badge /
      "Browse all …" link) — Figma TopicOverviewPage ── */
.ogsp-browse-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 0 0 1.5rem;
}

.ogsp-browse-heading__label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ogsp-browse-heading__icon {
	display: inline-flex;
	color: var(--ogsp-amber);
}

.ogsp-browse-heading__label h2 {
	font-family: var(--ogsp-font-body);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0;
}

.ogsp-browse-heading__link {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--ogsp-amber);
	text-decoration: none;
}

.ogsp-browse-heading__link:hover {
	text-decoration: underline;
}

.ogsp-ogs-badge {
	display: inline-block;
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ogsp-white);
	background: var(--ogsp-amber);
	border-radius: var(--ogsp-radius-pill);
	padding: 0.15rem 0.6rem;
}

/* ── Topic tiles (archive landings: 16:9 image or icon fallback, name,
      count, "Browse …") ── */
.ogsp-topic-tile-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

@media (max-width: 900px) {
	.ogsp-topic-tile-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.ogsp-topic-tile-grid {
		grid-template-columns: 1fr;
	}
}

.ogsp-topic-media-tile {
	display: block;
	border: 1px solid rgba(44, 44, 44, 0.06);
	border-radius: var(--ogsp-radius);
	overflow: hidden;
	background: var(--ogsp-white);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ogsp-topic-media-tile:hover {
	border-color: rgba(192, 122, 42, 0.3);
	box-shadow: 0 4px 14px rgba(44, 44, 44, 0.06);
}

.ogsp-topic-media-tile__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--ogsp-cream);
}

.ogsp-topic-media-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.ogsp-topic-media-tile:hover .ogsp-topic-media-tile__media img {
	transform: scale(1.05);
}

.ogsp-topic-media-tile__fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: rgba(192, 122, 42, 0.55);
}

.ogsp-topic-media-tile__body {
	display: block;
	padding: 1.25rem;
}

.ogsp-topic-media-tile__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.ogsp-topic-media-tile__name {
	font-family: var(--ogsp-font-headline);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ogsp-charcoal);
	transition: color 0.2s ease;
}

.ogsp-topic-media-tile:hover .ogsp-topic-media-tile__name {
	color: var(--ogsp-amber);
}

.ogsp-topic-media-tile__count {
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--ogsp-muted);
	white-space: nowrap;
}

.ogsp-topic-media-tile__link {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--ogsp-amber);
}

.ogsp-topic-media-tile:hover .ogsp-topic-media-tile__link {
	text-decoration: underline;
}

/* ── Editorial resource cards (filtered views + topic-page sections) ── */
.ogsp-resource-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

@media (max-width: 900px) {
	.ogsp-resource-card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.ogsp-resource-card-grid {
		grid-template-columns: 1fr;
	}
}

.ogsp-resource-card {
	display: block;
	border: 1px solid rgba(44, 44, 44, 0.06);
	border-radius: var(--ogsp-radius);
	overflow: hidden;
	background: var(--ogsp-white);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ogsp-resource-card:hover {
	border-color: rgba(192, 122, 42, 0.3);
	box-shadow: 0 4px 14px rgba(44, 44, 44, 0.06);
}

.ogsp-resource-card__media {
	display: block;
	overflow: hidden;
	background: var(--ogsp-cream);
	aspect-ratio: 16 / 9;
}

.ogsp-resource-card__media--portrait {
	aspect-ratio: 3 / 4;
}

.ogsp-resource-card__media--square {
	aspect-ratio: 1 / 1;
}

.ogsp-resource-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.ogsp-resource-card:hover .ogsp-resource-card__media img {
	transform: scale(1.05);
}

.ogsp-resource-card__fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: rgba(192, 122, 42, 0.55);
}

/* No-image fallback is an initials monogram (owner request
   2026-07-18) — Playfair initials centered on the existing cream
   media background, same muted amber as the old icon fallback. */
.ogsp-resource-card__fallback--monogram {
	font-family: var(--ogsp-font-headline);
	font-size: 2.5rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-indent: 0.08em; /* recenter the letter-spaced pair */
}

.ogsp-card__monogram {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ogsp-font-headline);
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-indent: 0.08em;
	color: rgba(192, 122, 42, 0.55);
}

.ogsp-resource-card__body {
	display: block;
	padding: 1.25rem;
}

.ogsp-resource-card__eyebrow {
	display: block;
	font-size: 0.5625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ogsp-amber);
	margin-bottom: 0.5rem;
}

.ogsp-resource-card__title {
	display: block;
	font-family: var(--ogsp-font-headline);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ogsp-charcoal);
	margin-bottom: 0.25rem;
	transition: color 0.2s ease;
}

.ogsp-resource-card:hover .ogsp-resource-card__title {
	color: var(--ogsp-amber);
}

.ogsp-resource-card__sub {
	display: block;
	font-size: 0.6875rem;
	color: var(--ogsp-muted);
	margin-bottom: 0.75rem;
}

.ogsp-resource-card__desc {
	display: block;
	font-size: 0.6875rem;
	line-height: 1.6;
	color: var(--ogsp-body-secondary);
}

.ogsp-resource-card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	font-size: 0.625rem;
	font-weight: 600;
	color: var(--ogsp-amber);
	margin-top: 1rem;
}

.ogsp-resource-card:hover .ogsp-resource-card__more {
	text-decoration: underline;
}

/* ── Film-card extensions for the Parent Topic page (desc + watch link;
      base .ogsp-film-card unchanged) ── */
.ogsp-film-card__desc {
	font-size: 0.6875rem;
	line-height: 1.6;
	color: var(--ogsp-body-secondary);
	margin: 0.25rem 0 0;
}

.ogsp-film-card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	font-size: 0.625rem;
	font-weight: 600;
	color: var(--ogsp-amber);
	margin-top: 0.75rem;
}

.ogsp-film-card:hover .ogsp-film-card__more {
	text-decoration: underline;
}

/* ── Empty state (archives with no content; filtered views with no
      items in a topic) ── */
.ogsp-browse-empty {
	text-align: center;
	padding: 4.5rem 1.5rem;
}

.ogsp-browse-empty__icon {
	display: inline-flex;
	color: rgba(192, 122, 42, 0.4);
	margin-bottom: 1rem;
}

.ogsp-browse-empty p {
	color: var(--ogsp-muted);
	font-size: 0.875rem;
	max-width: 26rem;
	margin: 0 auto;
}

.ogsp-browse-empty__back {
	display: inline-block;
	margin-top: 1rem;
	font-size: 0.875rem;
	color: var(--ogsp-amber);
	text-decoration: none;
}

.ogsp-browse-empty__back:hover {
	text-decoration: underline;
}

/* ── Back strip ("‹ Back to all … topics") ── */
.ogsp-back-strip {
	margin-top: 3rem;
}

.ogsp-back-strip--band {
	background: var(--ogsp-cream);
	border-top: 1px solid rgba(44, 44, 44, 0.05);
	margin-top: 0;
	padding: 2.5rem 1.5rem;
}

.ogsp-back-strip--band .ogsp-section-inner {
	padding: 0;
}

.ogsp-back-strip a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	color: var(--ogsp-muted);
	text-decoration: none;
	transition: color 0.2s ease;
}

.ogsp-back-strip a:hover {
	color: var(--ogsp-amber);
}

/* ── Centered prose section (Beyond landing: Philosophy, Why We Curate,
      Reflection) ── */
.ogsp-prose-center {
	max-width: 42rem;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.ogsp-prose-center h2 {
	font-size: 1.5rem;
	margin: 0 0 1.25rem;
}

.ogsp-prose-center .ogsp-eyebrow {
	margin-bottom: 1.25rem;
}

.ogsp-prose-center p:not(.ogsp-eyebrow) {
	color: var(--ogsp-body-secondary);
	font-size: 0.875rem;
	line-height: 1.9;
	margin: 0 0 1rem;
}

.ogsp-prose-center p:last-child {
	margin-bottom: 0;
}

/* ── Why We Share body (/beyond/) ──
   Constrained, centered, LEFT-aligned reading column matching the About
   founder letter; the eyebrow + heading above stay centered (their own
   .ogsp-prose-center wrapper). Scoped to this block so no other centered
   section is affected. Body type matches .ogsp-prose-center p. */
.ogsp-beyond-share__body {
	max-width: 44rem;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

.ogsp-beyond-share__body p {
	color: var(--ogsp-body-secondary);
	font-size: 0.875rem;
	line-height: 1.9;
	margin: 0 0 1rem;
}

.ogsp-beyond-share__body p:last-child {
	margin-bottom: 0;
}

/* ── Reflection (extra air, italic Playfair question) ── */
.ogsp-reflection {
	padding-top: 2.5rem;
	padding-bottom: 1.5rem;
}

.ogsp-reflection__question,
.ogsp-prose-center p.ogsp-reflection__question {
	font-family: var(--ogsp-font-headline);
	font-style: italic;
	color: var(--ogsp-muted);
}

/* ── Editor's Picks (Beyond landing Featured Collection) ── */
.ogsp-pick-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

@media (max-width: 900px) {
	.ogsp-pick-grid {
		grid-template-columns: 1fr;
	}
}

.ogsp-pick-card {
	display: flex;
	flex-direction: column;
	background: var(--ogsp-white);
	border: 1px solid rgba(44, 44, 44, 0.04);
	border-radius: var(--ogsp-radius);
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.ogsp-pick-card:hover {
	border-color: rgba(44, 44, 44, 0.08);
}

.ogsp-pick-card__media {
	position: relative;
	height: 9rem;
	overflow: hidden;
	background: var(--ogsp-cream);
}

.ogsp-pick-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ogsp-pick-card__badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	font-size: 0.5625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ogsp-white);
	background: rgba(192, 122, 42, 0.9);
	border-radius: var(--ogsp-radius-pill);
	padding: 0.25rem 0.65rem;
}

.ogsp-pick-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	flex: 1;
	padding: 1.25rem;
}

.ogsp-pick-card__title {
	font-family: var(--ogsp-font-headline);
	font-style: italic;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
}

.ogsp-pick-card__desc {
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--ogsp-body-secondary);
	margin: 0;
}

.ogsp-pick-card__why {
	background: var(--ogsp-cream);
	border-radius: var(--ogsp-radius);
	padding: 0.9rem;
}

.ogsp-pick-card__why .ogsp-section-label {
	margin-bottom: 0.4rem;
}

.ogsp-pick-card__why p:not(.ogsp-section-label) {
	font-size: 0.6875rem;
	line-height: 1.6;
	color: var(--ogsp-body-secondary);
	margin: 0;
}

.ogsp-pick-card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ogsp-amber);
	text-decoration: none;
	margin-top: auto;
}

.ogsp-pick-card__more:hover {
	text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════════════
   About page (fix Session D, E7) — values rows, process steps, story
   split image. Reusable primitives, global per the CSS scoping rule.
   ════════════════════════════════════════════════════════════════════ */

/* ── Split media (About "Our Story": image beside prose) ── */
.ogsp-split__media {
	border-radius: var(--ogsp-radius);
	overflow: hidden;
}

.ogsp-split__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (max-width: 800px) {
	.ogsp-sponsor-split,
	.ogsp-split {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/* ── Values rows (icon circle + title + copy, 2-col) ── */
.ogsp-values-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}

@media (max-width: 800px) {
	.ogsp-values-grid {
		grid-template-columns: 1fr;
	}
}

.ogsp-value-row {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
}

.ogsp-value-row .ogsp-icon-circle {
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	color: var(--ogsp-amber);
}

.ogsp-value-row h3 {
	font-size: 0.875rem;
	margin: 0 0 0.5rem;
}

.ogsp-value-row p {
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--ogsp-body-secondary);
	margin: 0;
}

/* ── Process steps (numbered 01–04 columns) ── */
.ogsp-process-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

@media (max-width: 900px) {
	.ogsp-process-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.ogsp-process-grid {
		grid-template-columns: 1fr;
	}
}

.ogsp-process-step__number {
	display: block;
	font-family: var(--ogsp-font-headline);
	font-size: 1.875rem;
	font-weight: 700;
	color: rgba(192, 122, 42, 0.2);
	margin-bottom: 0.75rem;
}

.ogsp-process-step h3 {
	font-size: 0.875rem;
	margin: 0 0 0.6rem;
}

.ogsp-process-step p {
	font-size: 0.75rem;
	line-height: 1.7;
	color: var(--ogsp-body-secondary);
	margin: 0;
}

/* Sub-page hero conversion CTA (owner refinement 2026-07-11) */
.ogsp-subpage-hero__cta {
	margin: 1.75rem 0 0;
}

/* ── Monthly giving-level display cards (Session D conversion
      refinement — Figma SponsorMonthly.tsx tiers; amounts owner-set,
      display only, no payment UI) ── */
/* Monthly sponsor restructure (owner 2026-08-01): centered coming-soon
   video at the top of the page, then the H1 explainer directly below.
   Reuses .ogsp-video--placeholder / .ogsp-about-video__caption. */
.ogsp-hero-video {
	max-width: 48rem;
	margin: 0 auto;
}

.ogsp-hero-video .ogsp-video {
	margin-bottom: 0;
}

/* ── Sponsor video-section copy — shared across ALL FOUR sponsor pages
   (monthly, film, gift, corporate) so the blocks are visually identical:
   a constrained, block-centered, LEFT-aligned reading column (matching
   the About founder letter .ogsp-about-letter and Beyond "Why We Share"
   .ogsp-beyond-share__body), with the heading centered above it and a
   consistent gap below the video panel. Replaces the old per-page
   __copy hooks (.ogsp-monthly-lead / .ogsp-{film,gift,corporate}-video__copy)
   and the centered .ogsp-prose-center treatment on these blocks. Heading
   sized equally whether it is the page H1 (monthly) or an H2 under a hero
   H1 (film/gift/corporate) — matches the About/Beyond section-heading size. */
.ogsp-sponsor-video__copy {
	max-width: 44rem;
	margin: 2.75rem auto 0;
	text-align: left;
}

.ogsp-sponsor-video__copy h1,
.ogsp-sponsor-video__copy h2 {
	font-size: 1.5rem;
	text-align: center;
	margin: 0 0 1.25rem;
}

.ogsp-sponsor-video__copy p {
	color: var(--ogsp-body-secondary);
	font-size: 0.875rem;
	line-height: 1.9;
	margin: 0 0 1rem;
}

.ogsp-sponsor-video__copy p:last-child {
	margin-bottom: 0;
}

/* Reassurance line under "Choose your level of support" (owner copy). */
.ogsp-tier-reassure {
	font-size: 0.8125rem;
	color: var(--ogsp-muted);
	margin: 0 0 2rem;
}

/* Personal-note signature (owner letter block). */
.ogsp-sponsor-prose .ogsp-note-sign {
	margin-top: 1.5rem;
	color: var(--ogsp-charcoal);
}

.ogsp-tier-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

@media (max-width: 900px) {
	.ogsp-tier-grid {
		grid-template-columns: 1fr;
	}
}

.ogsp-tier-card {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	background: var(--ogsp-white);
	border: 1px solid rgba(44, 44, 44, 0.05);
	border-radius: var(--ogsp-radius);
	padding: 1.75rem;
	transition: border-color 0.2s ease;
}

.ogsp-tier-card:hover {
	border-color: rgba(44, 44, 44, 0.1);
}

.ogsp-tier-card--featured {
	background: var(--ogsp-charcoal);
	border-color: var(--ogsp-charcoal);
}

.ogsp-tier-card__price {
	display: flex;
	align-items: baseline;
	gap: 0.25rem;
	margin-bottom: 0.25rem;
}

.ogsp-tier-card__amount {
	font-family: var(--ogsp-font-headline);
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1;
	color: var(--ogsp-amber);
}

.ogsp-tier-card--featured .ogsp-tier-card__amount {
	color: var(--ogsp-white);
}

.ogsp-tier-card__period {
	font-size: 0.75rem;
	color: var(--ogsp-muted);
}

.ogsp-tier-card--featured .ogsp-tier-card__period {
	color: rgba(255, 255, 255, 0.5);
}

.ogsp-tier-card__label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ogsp-muted);
	margin: 0;
}

.ogsp-tier-card--featured .ogsp-tier-card__label {
	color: rgba(255, 255, 255, 0.6);
}

.ogsp-tier-card__desc {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--ogsp-body-secondary);
	margin: 0;
}

.ogsp-tier-card--featured .ogsp-tier-card__desc {
	color: rgba(255, 255, 255, 0.7);
}

/* "What Your Money Supports" subheading above the shared bullet list
   (owner restructure 2026-08-01). */
.ogsp-tier-card__supports {
	font-size: 0.8125rem;
	font-weight: 600;
	margin: 0;
	color: var(--ogsp-charcoal);
}

.ogsp-tier-card--featured .ogsp-tier-card__supports {
	color: rgba(255, 255, 255, 0.9);
}

.ogsp-tier-card__perks {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	flex: 1;
	margin: 0;
	padding: 0;
}

.ogsp-tier-card__perks li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--ogsp-body-secondary);
}

.ogsp-tier-card__perks li svg {
	flex-shrink: 0;
	margin-top: 0.2rem;
	color: var(--ogsp-amber);
}

.ogsp-tier-card--featured .ogsp-tier-card__perks li {
	color: rgba(255, 255, 255, 0.7);
}

.ogsp-tier-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	margin-top: 0.5rem;
	padding: 0.65rem 1.25rem;
	border-radius: var(--ogsp-radius-pill);
	font-size: 0.75rem;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid rgba(192, 122, 42, 0.4);
	color: var(--ogsp-amber);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ogsp-tier-card__btn:hover {
	background: rgba(192, 122, 42, 0.06);
}

.ogsp-tier-card--featured .ogsp-tier-card__btn {
	background: var(--ogsp-amber);
	border-color: var(--ogsp-amber);
	color: var(--ogsp-white);
}

.ogsp-tier-card--featured .ogsp-tier-card__btn:hover {
	background: var(--ogsp-amber-hover);
}

.ogsp-tier-footnote {
	text-align: center;
	font-size: 0.75rem;
	color: var(--ogsp-muted);
	margin: 2rem 0 0;
}

.ogsp-tier-footnote a {
	color: var(--ogsp-amber);
	text-decoration: none;
}

.ogsp-tier-footnote a:hover {
	text-decoration: underline;
}

/* Inline contact form section on sponsor sub-pages */
.ogsp-inline-contact .ogsp-contact-form {
	max-width: 34rem;
}

/* Compact sub-page hero + snug section (owner refinement 2026-07-11:
   Monthly's tier cards clear the fold at 1280px) */
.ogsp-subpage-hero--compact {
	padding: 1.25rem 1.5rem 1rem;
}

.ogsp-subpage-hero--compact .ogsp-eyebrow {
	margin-bottom: 0.5rem;
}

.ogsp-subpage-hero--compact h1 {
	font-size: 2rem;
	margin-bottom: 0.6rem;
}

.ogsp-subpage-hero--compact .ogsp-subpage-hero__intro {
	font-size: 0.875rem;
	line-height: 1.7;
}

.ogsp-subpage-hero--compact .ogsp-subpage-hero__cta {
	margin-top: 0.75rem;
}

.ogsp-section--snug {
	padding-top: 1.5rem;
	padding-bottom: 2.5rem;
}

.ogsp-section--snug .ogsp-eyebrow {
	margin-bottom: 0.5rem;
}

.ogsp-section--snug .ogsp-browse-title {
	margin-bottom: 0.5rem;
}

/* ════════════════════════════════════════════════════════════════════
   Sponsor sub-page conversion redesign (owner direction supersedes
   Figma for these four pages — DECISIONS.md 2026-07-11).
   ════════════════════════════════════════════════════════════════════ */

/* ── Split hero: text left, cinematic image right ── */
.ogsp-subpage-hero--split .ogsp-subpage-hero__inner {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 3rem;
	align-items: center;
}

.ogsp-subpage-hero__media {
	border-radius: var(--ogsp-radius);
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(30, 26, 20, 0.12);
}

.ogsp-subpage-hero__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

@media (max-width: 800px) {
	.ogsp-subpage-hero--split .ogsp-subpage-hero__inner {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}
}

/* ── Featured badge (tiers + packages): editorial "Featured", never a
      popularity claim ── */
.ogsp-featured-badge {
	align-self: flex-start;
	display: inline-block;
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ogsp-white);
	background: var(--ogsp-amber);
	border-radius: var(--ogsp-radius-pill);
	padding: 0.2rem 0.65rem;
}

/* Featured tier emphasis: amber ring + slight lift on desktop */
.ogsp-tier-card--featured {
	border-color: var(--ogsp-amber);
	box-shadow: 0 10px 26px rgba(30, 26, 20, 0.16);
}

@media (min-width: 901px) {
	.ogsp-tier-card--featured {
		transform: translateY(-0.5rem);
	}
}

/* ── Step handoff CTA (step 03 carries the action) ── */
.ogsp-step__cta {
	margin-top: 0.9rem;
	align-self: flex-start;
}

/* ── Editorial pull-line ── */
.ogsp-pull-line {
	font-family: var(--ogsp-font-headline);
	font-size: 1.125rem;
	font-style: italic;
	line-height: 1.6;
	color: var(--ogsp-charcoal);
	border-left: 3px solid var(--ogsp-amber);
	padding-left: 1rem;
	margin: 1.5rem 0 0;
}

/* ── Section-end quiet action ("Start the conversation ›") ── */
.ogsp-next-link {
	margin: 2rem 0 0;
}

.ogsp-next-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ogsp-amber);
	text-decoration: none;
}

.ogsp-next-link a:hover {
	text-decoration: underline;
}

/* ── Elevated contact section: reassurance left, form card right ── */
.ogsp-contact-section {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 3rem;
	align-items: start;
}

@media (max-width: 800px) {
	.ogsp-contact-section {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}
}

.ogsp-contact-section__lead {
	color: var(--ogsp-body-secondary);
	font-size: 0.875rem;
	line-height: 1.8;
	margin: 0 0 1.25rem;
}

.ogsp-contact-section__card {
	background: var(--ogsp-white);
	border: 1px solid rgba(44, 44, 44, 0.07);
	border-radius: var(--ogsp-radius);
	padding: 1.75rem;
	box-shadow: 0 6px 18px rgba(30, 26, 20, 0.05);
}

/* Hero video slot (sponsor skeleton — owner redirect 2026-07-11) */
.ogsp-video--hero {
	margin-bottom: 0;
	box-shadow: 0 10px 30px rgba(30, 26, 20, 0.12);
}

/* Compact + split (Monthly): smaller media column so the tier cards
   below still clear the 1280px fold (owner constraint) */
.ogsp-subpage-hero--compact.ogsp-subpage-hero--split .ogsp-subpage-hero__inner {
	grid-template-columns: 1.6fr 1fr;
	gap: 2rem;
}

.ogsp-subpage-hero--compact .ogsp-subpage-hero__media img {
	aspect-ratio: 16 / 9;
}

/* Suggest invitation (Beyond landing, Phase 4 discoverability) */
.ogsp-suggest-invite {
	margin-top: 2.5rem;
	padding: 2rem 1.75rem;
	background: var(--ogsp-white);
	border: 1px solid rgba(44, 44, 44, 0.08);
	border-radius: var(--ogsp-radius);
}

.ogsp-suggest-invite h3 {
	font-size: 1.125rem;
	margin: 0 0 0.75rem;
}

.ogsp-suggest-invite .ogsp-next-link {
	margin-top: 1rem;
}

/* Share A Story invitation (story pages — owner placement ruling 2026-07-12) */
.ogsp-share-invite {
	background: var(--ogsp-cream);
	border-radius: var(--ogsp-radius);
	padding: 1.5rem 1.75rem;
	margin: 2.5rem 0;
}

.ogsp-share-invite h2 {
	font-size: 1.25rem;
	margin: 0 0 0.5rem;
}

.ogsp-share-invite p {
	color: var(--ogsp-body-secondary);
	font-size: 0.875rem;
	margin: 0;
}

.ogsp-share-invite .ogsp-next-link {
	margin-top: 1rem;
}

/* ── Modal / dialog (Design Pass C, brief Item 3) — reusable overlay,
   used for the newsletter signup popup. Above the header (z-index 50). ── */
.ogsp-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: rgba(30, 26, 20, 0.6);
	opacity: 0;
	transition: opacity 0.18s ease;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ogsp-modal[hidden] {
	display: none;
}

.ogsp-modal.is-open {
	opacity: 1;
}

.ogsp-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 30rem;
	max-height: calc(100vh - 3rem);
	overflow-y: auto;
	background: var(--ogsp-white);
	border-radius: var(--ogsp-radius);
	box-shadow: 0 16px 48px rgba(30, 26, 20, 0.35);
	padding: 2.5rem 1.75rem 1.75rem;
}

.ogsp-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2rem;
	height: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: 50%;
	color: var(--ogsp-muted);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ogsp-modal__close:hover {
	background: var(--ogsp-cream);
	color: var(--ogsp-charcoal);
}