@import url('https://fonts.googleapis.com/css2?family=Amiri&display=swap');

/* alsumait-passing v1.0.2 — Chapter 08 «Passing», page 167.
   Scoped to .dsp-* only. No animation above the fold. Tokens only. */

.dsp-passing{
	--dsp-gold: rgb(199,154,58);
	--dsp-pad: clamp(20px, 5vw, 72px);
}

/* trap 61 — kill the theme blockGap strip between full-width sections */
.dsp-passing > .wp-block-group,
.dsp-sec, .dsp-opener, .dsp-pull, .dsp-verse, .dsp-hand, .dsp-navsec, .dsp-bleed{
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* ── 1 · opener ─────────────────────────────────────────── */
.dsp-opener{
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, var(--wp--preset--color--base) 0%, var(--wp--preset--color--primary-accent) 100%);
	padding-block: clamp(40px, 8vw, 104px) clamp(32px, 5vw, 64px);
}
.dsp-num{
	position: absolute;
	right: -.05em;
	top: -.14em;
	font-size: min(44vw, 520px);
	line-height: .78;
	opacity: .07;
	pointer-events: none;
	user-select: none;
	margin: 0 !important;
}
.dsp-opener .wp-block-columns{ position: relative; align-items: flex-end; }
.dsp-portrait img{
	filter: grayscale(1) contrast(1.06);
	mix-blend-mode: multiply;
}
.dsp-h1{
	font-size: clamp(42px, 7vw, 92px);
	line-height: 1.04;
	letter-spacing: -.015em;
	margin-block: .16em .3em;
}
.dsp-lede{ font-size: clamp(17px, 1.8vw, 21px); line-height: 1.62; }
.dsp-eyebrow{
	font-size: 12px;
	letter-spacing: .22em;
	text-transform: uppercase;
	font-weight: 600;
	margin: 0 !important;
}

/* fact strip */
.dsp-facts{ margin-top: clamp(28px, 5vw, 52px) !important; gap: 1px !important; background: var(--wp--preset--color--border-light); }
.dsp-facts > .wp-block-column{ background: var(--wp--preset--color--base); padding: 20px 18px; }
.dsp-facts .dsp-fig{ font-size: clamp(21px, 2.5vw, 29px); line-height: 1.1; margin: 0 !important; }
.dsp-facts .dsp-cap{ font-size: 12.5px; letter-spacing: .05em; margin: 6px 0 0 !important; }

/* ── generic section ────────────────────────────────────── */
.dsp-sec{ padding-block: clamp(48px, 7vw, 96px); }
.dsp-kicker{
	font-size: 11.5px;
	letter-spacing: .24em;
	text-transform: uppercase;
	font-weight: 600;
	margin: 0 0 22px !important;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}

/* ── 2 · the medical file ───────────────────────────────── */
.dsp-list{ list-style: none; padding: 0; margin: 22px 0 0; border-top: 1px solid var(--wp--preset--color--border-light); }
.dsp-list li{
	margin-block: 0 !important;
	padding: 11px 2px;
	border-bottom: 1px solid var(--wp--preset--color--border-light);
	font-size: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
}
.dsp-list li strong{ font-weight: 600; min-width: 165px; }
.dsp-list li em{ font-style: normal; opacity: .72; font-size: 14.5px; }
.dsp-aside{ padding: 24px; }
.dsp-aside p{ font-size: 15px; line-height: 1.6; }
.dsp-aside p:last-child{ margin-bottom: 0 !important; }

/* ── 3 · pull quote ─────────────────────────────────────── */
.dsp-pull{ padding-block: clamp(56px, 9vw, 124px); }
.dsp-said{ font-size: clamp(20px, 2.8vw, 30px); line-height: 1.24; max-width: 26ch; margin-bottom: .45em !important; }
.dsp-quote{ font-size: clamp(28px, 5vw, 60px); line-height: 1.14; letter-spacing: -.01em; max-width: 17ch; margin: 0 !important; }
.dsp-src{ margin-top: 30px !important; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }

/* ── 4 · full-bleed image ───────────────────────────────── */
.dsp-bleed img{
	width: 100%;
	height: clamp(230px, 44vw, 520px);
	object-fit: cover;
	object-position: center 42%;
	filter: grayscale(.35);
}
.dsp-passing figcaption{ text-align: left !important; }
.dsp-bleed figcaption{
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto !important;
	padding: 12px var(--dsp-pad) 0;
	font-size: 13px;
	opacity: .75;
}

/* ── 5 · timeline ───────────────────────────────────────── */
.dsp-tl{ list-style: none; margin: 0; padding: 0 0 0 28px; border-left: 1px solid var(--wp--preset--color--border-light); }
.dsp-tl li{ position: relative; padding-bottom: 24px; font-size: 16px; }
.dsp-tl li:last-child{ padding-bottom: 0; }
.dsp-tl li::before{
	content: "";
	position: absolute;
	left: -32.5px;
	top: 9px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
}
.dsp-tl li strong{ display: block; font-weight: 600; font-size: 14px; letter-spacing: .02em; }

/* ── 6 · the sequence ───────────────────────────────────── */
.dsp-seq img{ width: 100%; height: clamp(215px, 30vw, 380px); object-fit: cover; filter: grayscale(.35); }
.dsp-seq figcaption{ font-size: 14px; opacity: .8; padding-top: 10px; }

/* ── 7 · tributes ───────────────────────────────────────── */
.dsp-t{ margin-bottom: 30px; }
.dsp-t:last-child{ margin-bottom: 0; }
.dsp-q{ font-size: clamp(19px, 2.3vw, 25px); line-height: 1.32; margin-bottom: .4em !important; }
.dsp-who{ font-size: 13.5px; opacity: .78; margin: 0 !important; }
.dsp-stick{ position: sticky; top: 24px; }
.dsp-stick img{ filter: grayscale(.5); width: 100%; }
.dsp-stick figcaption{ font-size: 13.5px; opacity: .8; padding-top: 10px; }

/* ── 8 · verse ──────────────────────────────────────────── */
.dsp-verse{ padding-block: clamp(48px, 7vw, 88px); text-align: center; }
.dsp-ar{
	font-family: Amiri, Georgia, serif;
	direction: rtl;
	font-size: clamp(21px, 3.2vw, 33px);
	line-height: 2;
	margin: 0 !important;
}
.dsp-en{ font-size: clamp(18px, 2.2vw, 25px); line-height: 1.3; max-width: 24ch; margin: 16px auto 0 !important; }

/* ── 9 · handover ───────────────────────────────────────── */
.dsp-hand{ padding-block: clamp(52px, 8vw, 104px); }
.dsp-close{
	font-size: clamp(23px, 3.2vw, 36px);
	line-height: 1.22;
	border-top: 1px solid var(--wp--preset--color--border-dark);
	padding-top: 26px;
	margin-top: 30px !important;
}
.dsp-card .wp-block-button__link{
	display: block;
	width: 100%;
	text-align: left;
	padding: 20px 24px;
	font-size: 22px;
	line-height: 1.25;
}
.dsp-note{ font-size: 12.5px; opacity: .7; margin-top: 14px !important; }

/* ── 10 · chapter nav ───────────────────────────────────── */
.dsp-navsec{ border-top: 1px solid var(--wp--preset--color--border-light); }
.dsp-navsec .wp-block-column{ padding: 26px 0; }
.dsp-navsec .wp-block-column + .wp-block-column{ border-left: 1px solid var(--wp--preset--color--border-light); padding-left: clamp(20px, 4vw, 48px); }
.dsp-navlbl{ font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 6px !important; }
.dsp-navttl{ font-size: clamp(21px, 2.4vw, 27px); margin: 0 !important; }
.dsp-navttl a{ text-decoration: none; }
.dsp-navttl a:hover{ text-decoration: underline; }

/* ── mobile ─────────────────────────────────────────────── */
@media (max-width: 899px){
	.dsp-num{ font-size: 62vw; top: -.10em; }
	.dsp-portrait{ max-width: 210px; }
	.dsp-facts{ flex-wrap: wrap !important; }
	.dsp-passing .dsp-facts.wp-block-columns > .wp-block-column{
		flex-basis: calc(50% - .5px) !important;
		flex-grow: 0 !important;
	}
	.dsp-list li strong{ min-width: 100%; }
	.dsp-stick{ position: static; }
	.dsp-navsec .wp-block-column + .wp-block-column{ border-left: 0; border-top: 1px solid var(--wp--preset--color--border-light); padding-left: 0; }

	/* the burial sequence becomes a swipeable rail */
	.dsp-seq{
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 12px !important;
		padding-bottom: 6px;
	}
	.dsp-passing .dsp-seq.wp-block-columns > .wp-block-column{
		flex: 0 0 auto !important;
		width: 82%;
		scroll-snap-align: start;
	}
	.dsp-seq img{ height: 230px; }
}