/* ============================================
	   OFFERINGS — single editorial index
	   prefix: .of-
	   ============================================ */

	/* === HERO === */
	.of-hero {
		position: relative;
		isolation: isolate;
		background: #14323f;
		color: var(--color-white);
		aspect-ratio: 5000 / 1367;
		min-height: 280px;
		display: grid;
		align-items: center;
		padding-top: var(--jw-header-offset);
		padding-bottom: clamp(1.25rem, 3vw, 2rem);
		overflow: hidden;
		text-align: center;
		box-sizing: border-box;
	}
	.of-hero__media {
		position: absolute;
		inset: 0;
		z-index: 0;
	}
	.of-hero__media img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center center;
		display: block;
		background: #14323f;
		filter: saturate(0.92) contrast(1.02);
	}
	.of-hero__veil {
		position: absolute;
		inset: 0;
		z-index: 1;
		background:
			linear-gradient(180deg, rgba(20, 50, 65, 0.55) 0%, rgba(20, 50, 65, 0.35) 45%, rgba(20, 50, 65, 0.7) 100%),
			radial-gradient(60% 80% at 80% 20%, rgba(221, 135, 30, 0.18), transparent 60%),
			radial-gradient(50% 70% at 15% 90%, rgba(95, 123, 69, 0.18), transparent 70%);
	}
	.of-hero__inner {
		position: relative;
		z-index: 2;
		max-width: 56rem;
		margin: 0 auto;
	}
	.of-hero__eyebrow {
		font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
		font-style: italic;
		font-size: clamp(0.8rem, 1vw, 0.95rem);
		letter-spacing: 0.45em;
		text-transform: uppercase;
		color: var(--color-accent);
		display: inline-flex;
		align-items: center;
		gap: 1rem;
		margin: 0 0 1.5rem;
	}
	.of-hero__eyebrow::before,
	.of-hero__eyebrow::after {
		content: '';
		width: 42px;
		height: 1px;
		background: var(--color-accent);
		opacity: 0.7;
	}
	.of-hero__title {
		font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
		font-weight: 400;
		font-size: clamp(2.6rem, 5.5vw, 4.4rem);
		line-height: 1.05;
		letter-spacing: -0.01em;
		margin: 0 0 1.4rem;
		color: rgba(255, 253, 248, 0.98);
		text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
	}
	.of-hero__title em {
		font-style: italic;
		color: var(--color-accent);
	}
	.of-hero__sub {
		font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
		font-size: clamp(1.05rem, 1.4vw, 1.2rem);
		line-height: 1.7;
		color: rgba(255, 253, 248, 0.78);
		max-width: 42rem;
		margin: 0 auto;
	}

	/* === LIST === */
	.of-index {
		background: var(--color-paper, #f5ede0);
		color: var(--color-ink);
		padding: clamp(4.5rem, 9vh, 7rem) 0 clamp(5rem, 10vh, 8rem);
	}
	.of-index__inner {
		max-width: 70rem;
		margin: 0 auto;
	}
	.of-index__rule {
		display: block;
		width: 60px;
		height: 1px;
		background: var(--color-accent);
		opacity: 0.7;
		margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
	}
	.of-section {
		margin-bottom: 0;
	}
	.of-section__title {
		font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
		font-size: clamp(2rem, 3.5vw, 2.8rem);
		font-weight: 400;
		font-style: italic;
		color: var(--color-accent);
		text-align: center;
		margin: 0 0 clamp(1.5rem, 2.5vw, 2.2rem);
		letter-spacing: -0.005em;
	}
	.of-section__copy {
		font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
		font-size: clamp(1.05rem, 1.3vw, 1.2rem);
		line-height: 1.75;
		color: rgba(20, 50, 65, 0.82);
		margin: 0 auto;
		max-width: 48rem;
		text-align: center;
	}
	.of-section__intro {
		font-size: clamp(0.98rem, 1.15vw, 1.08rem);
		line-height: 1.7;
		color: rgba(20, 50, 65, 0.72);
		margin: 0 auto clamp(1.5rem, 2.5vw, 2rem);
		max-width: 48rem;
		text-align: center;
	}
	.of-divider {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: clamp(1rem, 2vw, 1.5rem);
		margin: clamp(2.8rem, 4.5vw, 4rem) auto;
		max-width: 40rem;
		color: var(--color-accent);
	}
	.of-divider__line {
		flex: 1;
		height: 1px;
		background: linear-gradient(90deg, transparent, rgba(221, 135, 30, 0.45), transparent);
	}
	.of-divider__compass {
		width: clamp(28px, 3vw, 36px);
		height: clamp(28px, 3vw, 36px);
		opacity: 0.85;
		flex-shrink: 0;
	}

	.of-list {
		list-style: none;
		padding: 0;
		margin: 0;
		display: grid;
		gap: clamp(2rem, 3.5vw, 3rem);
		text-align: center;
	}
	.of-item {
		display: block;
		padding: 0;
		border: 0;
		background: transparent;
		transition: none;
	}
	.of-item:hover {
		background: transparent;
	}
	.of-item__title {
		font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
		font-weight: 400;
		font-style: italic;
		font-size: clamp(1.5rem, 2.4vw, 2rem);
		line-height: 1.2;
		color: var(--color-ink);
		margin: 0 0 0.7rem;
		transition: color 0.3s ease;
	}
	.of-item:hover .of-item__title {
		color: var(--color-accent);
	}
	.of-item__copy {
		font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
		font-size: clamp(1.05rem, 1.3vw, 1.2rem);
		line-height: 1.75;
		color: rgba(20, 50, 65, 0.82);
		margin: 0 auto;
		max-width: 48rem;
	}
	.of-item__para {
		display: block;
		margin: 0 auto 1.1rem;
		max-width: 48rem;
	}
	.of-item__para:last-child {
		margin-bottom: 0;
	}
	.of-item__para--note {
		font-style: italic;
		color: rgba(20, 50, 65, 0.7);
		margin-top: 0.4rem;
	}
	.of-item__quote {
		display: block;
		margin: clamp(1.6rem, 2.6vw, 2.2rem) auto 0;
		max-width: 36rem;
		padding: clamp(1.4rem, 2.4vw, 2rem) clamp(1.4rem, 2.4vw, 2rem);
		border-top: 1px solid rgba(221, 135, 30, 0.35);
		border-bottom: 1px solid rgba(221, 135, 30, 0.35);
		font-style: italic;
		font-size: clamp(1.15rem, 1.6vw, 1.35rem);
		line-height: 1.55;
		color: var(--color-accent);
	}
	.of-item__quote-attribution {
		display: block;
		margin-top: 0.9rem;
		font-style: normal;
		font-size: 0.78rem;
		letter-spacing: 0.32em;
		text-transform: uppercase;
		color: rgba(20, 50, 65, 0.7);
	}

	/* === CLOSING CTA === */
	.of-close {
		background: #14323f;
		color: var(--color-white);
		padding: clamp(5rem, 10vh, 8rem) 0;
		text-align: center;
	}
	.of-close__inner {
		max-width: 50rem;
		margin: 0 auto;
	}
	.of-close__eyebrow {
		font-family: 'Inter', system-ui, sans-serif;
		font-size: 0.7rem;
		letter-spacing: 0.4em;
		text-transform: uppercase;
		color: rgba(255, 253, 248, 0.55);
		margin: 0 0 1.5rem;
	}
	.of-close__title {
		font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
		font-weight: 400;
		font-size: clamp(2rem, 4vw, 3.1rem);
		line-height: 1.15;
		color: rgba(255, 253, 248, 0.96);
		margin: 0 0 1.2rem;
	}
	.of-close__title em {
		font-style: italic;
		color: var(--color-accent);
	}
	.of-close__copy {
		font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
		font-size: clamp(1rem, 1.3vw, 1.18rem);
		line-height: 1.7;
		color: rgba(255, 253, 248, 0.78);
		margin: 0 auto 2.4rem;
		max-width: 38rem;
	}
	.of-close__actions {
		display: inline-flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 1rem;
	}
	.of-close .button-ghost {
		color: var(--color-cream);
		border-color: rgba(255, 253, 248, 0.4);
	}
	.of-close .button-ghost:hover {
		background: rgba(255, 253, 248, 0.06);
		border-color: var(--color-cream);
	}

	@media (max-width: 720px) {
		.of-item {
			padding: 0;
		}
	}

	@media (max-width: 899px) {
		.of-hero {
			width: 100%;
			max-width: 100%;
			aspect-ratio: auto;
			min-height: clamp(20rem, 75vw, 28rem);
		}

		.of-hero__media img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center center;
			background: transparent;
		}
	}