/**
 * Haven Homepage — Guest Letter (Section 5 / #s05)
 *
 * Styles for the [haven_guest_letter] shortcode plus the shared liquid-glass
 * background system. Depends on haven-homepage-look-book.css for the chapter
 * scaffolding (.chapter, .chapter__shell, .folio, .eyebrow).
 *
 * Source of truth: the inline CSS in
 *   _workspace/mockups/homepage-bottom-three-sections/FULL-homepage-compact.html
 */

/* ═══════════════════════════════════════════════════════════
   LIQUID GLASS SYSTEM
   Two layers of slow-drifting blurred radial glows + a gentle
   specular shimmer. Honors prefers-reduced-motion.
   Layers sit at z-index 0/1; content is z>=2.
   ═════════════════════════════════════════════════════════ */
.liquid-glass {
	position: relative;
	isolation: isolate;
}
.liquid-glass > * {
	position: relative;
	z-index: 2;
}
.liquid-glass__field {
	position: absolute;
	inset: -15%;
	z-index: 0;
	pointer-events: none;
	filter: blur(72px);
	opacity: .62;
	will-change: transform, opacity;
	mix-blend-mode: screen;
}
.liquid-glass__field--a {
	background:
		radial-gradient(circle at 22% 28%, rgba(196, 160, 120, .55) 0%, rgba(196, 160, 120, 0) 38%),
		radial-gradient(circle at 78% 70%, rgba(181, 97, 74, .32) 0%, rgba(181, 97, 74, 0) 42%);
	animation: havenLetterDriftA 22s ease-in-out infinite;
}
.liquid-glass__field--b {
	background:
		radial-gradient(circle at 80% 22%, rgba(107, 140, 122, .22) 0%, rgba(107, 140, 122, 0) 36%),
		radial-gradient(circle at 18% 82%, rgba(196, 160, 120, .45) 0%, rgba(196, 160, 120, 0) 44%);
	animation: havenLetterDriftB 28s ease-in-out infinite reverse;
	opacity: .5;
}
.liquid-glass__shimmer {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(115deg, transparent 28%, rgba(255, 250, 238, .06) 48%, rgba(255, 250, 238, .09) 52%, transparent 72%);
	background-size: 240% 240%;
	animation: havenLetterShimmer 18s linear infinite;
	mix-blend-mode: overlay;
}
.liquid-glass__noise {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: .035;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
@keyframes havenLetterDriftA {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); opacity: .55; }
	35% { transform: translate3d(2.5%, -1.8%, 0) scale(1.06) rotate(6deg); opacity: .72; }
	70% { transform: translate3d(-1.6%, 2.4%, 0) scale(.96) rotate(-4deg); opacity: .5; }
}
@keyframes havenLetterDriftB {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); opacity: .45; }
	40% { transform: translate3d(-2%, 2%, 0) scale(1.05) rotate(-5deg); opacity: .6; }
	75% { transform: translate3d(1.8%, -1.6%, 0) scale(.97) rotate(4deg); opacity: .42; }
}
@keyframes havenLetterShimmer {
	0% { background-position: 120% -20%; }
	100% { background-position: -20% 120%; }
}
@media (prefers-reduced-motion: reduce) {
	.liquid-glass__field,
	.liquid-glass__shimmer {
		animation: none !important;
	}
	.liquid-glass__field {
		opacity: .4;
	}
}

/* ═══════════════════════════════════════════════════════════
   05 · GUEST EDIT · The Letter
   ═════════════════════════════════════════════════════════ */
.s05 {
	background: #0f0c08;
	color: #faf7f1;
}
.s05__shell {
	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 680px;
	overflow: hidden;
}
.s05__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.92) brightness(.42);
	z-index: 0;
	transition: opacity .9s ease, transform 1.6s cubic-bezier(.16, 1, .3, 1);
	display: block;
}
.s05__bg.is-leaving {
	opacity: 0;
}
.s05__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 12, 8, .45) 0%, rgba(15, 12, 8, .22) 35%, rgba(15, 12, 8, .78) 100%);
	z-index: 2;
}
.s05__frame {
	position: absolute;
	inset: 24px;
	border: 1px solid rgba(246, 241, 232, .14);
	z-index: 5;
	pointer-events: none;
	border-radius: 6px;
}
.s05__content {
	position: relative;
	z-index: 6;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0 clamp(28px, 5vw, 80px);
	text-align: center;
}
.s05__chip {
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 11px;
	letter-spacing: .36em;
	text-transform: uppercase;
	color: #c4a078;
	font-weight: 500;
	margin-bottom: 30px;
	display: flex;
	align-items: center;
	gap: 16px;
}
.s05__chip::before,
.s05__chip::after {
	content: "";
	display: inline-block;
	width: 32px;
	height: 1px;
	background: #c4a078;
}

.s05__letter {
	position: relative;
	background: linear-gradient(180deg, rgba(250, 247, 241, .09) 0%, rgba(250, 247, 241, .04) 100%);
	-webkit-backdrop-filter: blur(22px) saturate(125%);
	backdrop-filter: blur(22px) saturate(125%);
	border: 1px solid rgba(196, 160, 120, .32);
	border-radius: 18px;
	padding: clamp(40px, 5vw, 72px) clamp(36px, 5vw, 72px);
	max-width: 780px;
	width: 100%;
	box-shadow: 0 32px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
	transition: opacity .55s ease, transform .55s cubic-bezier(.16, 1, .3, 1);
}
.s05__letter.is-leaving {
	opacity: 0;
	transform: translateY(12px);
}
.s05__dateline {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-size: 14px;
	color: #c4a078;
	letter-spacing: .06em;
	margin-bottom: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 14px;
}
.s05__dateline::before,
.s05__dateline::after {
	content: "";
	display: inline-block;
	width: 18px;
	height: 1px;
	background: rgba(196, 160, 120, .4);
}
.s05__quote-mark {
	display: none;
}
.s05__quote {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 300;
	font-style: italic;
	font-size: clamp(22px, 2.2vw, 32px);
	line-height: 1.4;
	color: #faf7f1;
	margin-bottom: 36px;
}
.s05__quote::before,
.s05__quote::after {
	color: #c4a078;
	font-size: 1.25em;
	line-height: 0;
}
.s05__quote::before {
	content: "\201C";
	margin-right: .08em;
}
.s05__quote::after {
	content: "\201D";
	margin-left: .08em;
}
.s05__signature {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding-top: 28px;
	border-top: 1px solid rgba(196, 160, 120, .25);
}
.s05__sig-name {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-weight: 500;
	font-size: 24px;
	color: #faf7f1;
	letter-spacing: .02em;
}
.s05__sig-meta {
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 11px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: #c4a078;
	font-weight: 500;
}

.s05__nav {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-top: 36px;
	justify-content: center;
}
.s05__nav-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(246, 241, 232, .3);
	background: rgba(15, 12, 8, .4);
	color: #faf7f1;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .25s;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	cursor: pointer;
}
.s05__nav-btn:hover {
	background: #c4a078;
	color: #1a1612;
	border-color: #c4a078;
}
.s05__nav-count {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-size: 14px;
	color: rgba(246, 241, 232, .7);
	letter-spacing: .06em;
	min-width: 90px;
}
.s05__source {
	margin-top: 14px;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	/* Fluid: ~13px @ tablet, ~15.5px @ 1920px wide screens. */
	font-size: clamp(13px, 0.85vw, 15.5px);
	color: rgba(246, 241, 232, .65);
}

/*
 * ─── Mobile stacked editorial (≤760px) ───────────────────────────────
 * Approved 2026-05-02. The desktop "centered glass card over cinematic
 * image" pattern fails on a 380px viewport — the photograph collapses
 * to its natural ratio (because page-scoped `img { height: auto }` beats
 * .s05__bg on specificity), the glass card crowds the image, and the
 * composition reads broken.
 *
 * Mobile composition:
 *   1. .s05__shell becomes a flex column. No more 100vh / 680px lock.
 *   2. .s05__bg becomes a 54vh portrait hero band at the top with the
 *      chip pinned over the photograph. Force-filled with !important
 *      to defeat the global img rule.
 *   3. The dark overlay is rebuilt as a tight gradient sized to the
 *      hero band only (was full-shell, would otherwise wash out the
 *      letter panel below).
 *   4. .s05__letter becomes a clean panel below the photo — glass,
 *      backdrop-filter, border, box-shadow, and rounded corners are
 *      stripped. Reads like flipping a magazine page instead of a
 *      stacked card.
 *   5. .s05__nav + .s05__source flow naturally below the letter.
 * ─────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
	.s05__shell {
		display: flex;
		flex-direction: column;
		height: auto;
		min-height: 0;
	}

	/* Photo hero — relative-positioned so it occupies a real row in the
	 * flex column instead of full-bleed absolute. Force-fill !important
	 * so the global `.haven-homepage-compact-page img { height: auto }`
	 * rule can't shrink it back to intrinsic ratio. */
	.s05__bg {
		position: relative !important;
		inset: auto !important;
		width: 100% !important;
		height: 54vh !important;
		min-height: 320px !important;
		max-height: 520px;
		object-fit: cover !important;
		filter: saturate(.94) brightness(.74);
		z-index: 0;
	}

	/* Tight gradient sized to the hero band only — anchored from the top
	 * of the section to where the image ends. */
	.s05__overlay {
		bottom: auto;
		height: 54vh;
		min-height: 320px;
		max-height: 520px;
		background: linear-gradient(180deg,
			rgba(15, 12, 8, .45) 0%,
			rgba(15, 12, 8, .05) 30%,
			rgba(15, 12, 8, .55) 100%);
	}

	/* Hide the desktop hairline frame (covered the whole shell). */
	.s05__frame {
		display: none;
	}

	/* Content row sits below the photo as a normal block. */
	.s05__content {
		position: relative;
		height: auto;
		padding: 30px 22px 44px;
		align-items: stretch;
	}

	/* Chip becomes a "tag" floating on the photograph, top-left. Drops
	 * the ::before / ::after rule lines (don't read at small sizes) and
	 * gets a glass pill background so it reads on any photograph that
	 * loads in. */
	/*
	 * Chip hidden on mobile (Samuel, 2026-05-02). The "From Recent Stays"
	 * pill was colliding inline with the dateline ("· Sunset Cove Villas ·
	 * January 2026") because the shortcode renders chip + dateline in the
	 * same flow. The dateline already establishes the same context
	 * ("recent stay" + property + month + year), so hiding the chip on
	 * mobile is the cleaner read. The chip stays visible on desktop.
	 */
	.s05__chip {
		display: none;
	}

	/* Letter strips its glass identity and becomes a clean panel. */
	.s05__letter {
		background: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		padding: 0;
		max-width: none;
		width: 100%;
	}

	.s05__quote {
		font-size: 20px;
		line-height: 1.45;
		text-align: center;
		margin-bottom: 28px;
	}

	.s05__signature {
		padding-top: 22px;
	}
}