/* ==========================================================================
   Maroc Horizons — articles
   An opening that unfolds once, a glance at where the story is set, and
   sections that announce themselves as the reader arrives. Reading comes
   first: the paragraphs themselves never move.
   ========================================================================== */

.mhr-article { --mht-ease: cubic-bezier(.2, .75, .15, 1); }

/* Headline rises word by word. */
.mht-w { display: inline-block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; vertical-align: bottom; }
.mht-w > span { display: inline-block; transition: transform 1s var(--mht-ease); transition-delay: calc(var(--w) * 45ms + .1s); }
.mhr-js .mhr-article:not(.is-ready) .mht-w > span { transform: translateY(108%); }
.mhr-article__dek, .mhr-article__meta { transition: opacity .8s ease .5s, translate .8s var(--mht-ease) .5s; }
.mhr-js .mhr-article:not(.is-ready) :is(.mhr-article__dek, .mhr-article__meta) { opacity: 0; translate: 0 .75rem; }

/* The photograph opens like a window, then drifts with the scroll. */
.mhr-article__photo { position: relative; overflow: hidden; }
.mhr-article__photo img {
	transform: translate3d(0, var(--mht-py, 0), 0) scale(1.06);
	transition: clip-path 1.4s var(--mht-ease) .35s, scale 1.8s var(--mht-ease) .35s;
	will-change: transform;
}
.mhr-js .mhr-article:not(.is-ready) .mhr-article__photo img { clip-path: inset(10% 8% 10% 8%); scale: 1.12; }

/* ---------- At a glance ---------- */

.mht-glance {
	max-width: calc(var(--mhr-measure) + 2 * var(--mhr-gutter) + 8rem);
	margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
	padding: 0 var(--mhr-gutter);
}
.mht-glance__inner {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1.5rem 2rem;
	align-items: center;
	padding: 1.4rem 1.6rem;
	overflow: hidden;
	border-radius: 14px;
	color: #fff;
	background:
		radial-gradient(ellipse at 0% 0%, rgba(58, 92, 230, .55), transparent 60%),
		var(--mhr-majorelle-deep);
}
.mht-glance__inner::after {
	content: "";
	position: absolute;
	right: -40px;
	bottom: -40px;
	width: 180px;
	height: 180px;
	background: url("../img/zellige.svg") 0 0 / 90px 90px;
	opacity: .12;
	border-radius: 50%;
	pointer-events: none;
}
.mht-glance__map { margin: 0; width: 6.5rem; }
.mht-glance__map svg { display: block; width: 100%; height: auto; overflow: visible; }
.mht-glance__land { fill: rgba(255, 255, 255, .12); stroke: rgba(255, 255, 255, .85); stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.mht-glance__dot { fill: var(--mhr-saffron); stroke: #fff; stroke-width: 5; }
.mht-glance__ring { fill: none; stroke: var(--mhr-saffron); stroke-width: 4; transform-box: fill-box; transform-origin: center; opacity: 0; }
.mht-glance__k { font-family: var(--mhr-sans); font-size: .78rem; font-weight: 600; color: #f2c46b; }
.mht-glance__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: .8rem 1.5rem;
	margin: .55rem 0 0;
}
.mht-glance__facts dt { font-family: var(--mhr-sans); font-size: .75rem; color: rgba(255, 255, 255, .62); }
.mht-glance__facts dd { margin: .15rem 0 0; font-family: var(--mhr-serif); font-size: 1.08rem; line-height: 1.3; color: #fff; }
.mht-glance__facts a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }
.mht-glance__facts a:hover { color: #f2c46b; text-decoration-color: currentColor; }
@media (max-width: 559px) {
	.mht-glance { padding: 0 calc(var(--mhr-gutter) * .6); }
	.mht-glance__inner { grid-template-columns: 3.75rem minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1.2rem 1.1rem; }
	.mht-glance__map { width: 3.75rem; }
	.mht-glance__facts { grid-template-columns: 1fr 1fr; gap: .7rem 1rem; }
	.mht-glance__facts dd { font-size: 1rem; }
	.mht-glance__inner::after { display: none; }
}

.mhr-js .mht-glance { transition: opacity .9s ease, translate 1s var(--mht-ease); }
.mhr-js .mht-glance:not(.is-in) { opacity: 0; translate: 0 1.5rem; }
.mhr-js .mht-glance__land { transition: stroke-dashoffset 2.4s cubic-bezier(.5, 0, .2, 1) .3s, fill 1s ease 1.4s; }
.mhr-js .mht-glance:not(.is-in) .mht-glance__land { stroke-dashoffset: 1; fill: rgba(255, 255, 255, 0); }
.mhr-js .mht-glance g { transition: opacity .4s ease, scale .6s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(1.6s + var(--n) * .15s); transform-box: fill-box; }
.mhr-js .mht-glance:not(.is-in) g { opacity: 0; scale: .2; }
.mht-glance.is-in .mht-glance__ring { animation: mht-pulse 2.6s ease-out infinite 2.2s; }
@keyframes mht-pulse { 0% { transform: scale(1); opacity: .95; } 100% { transform: scale(4); opacity: 0; } }

/* ---------- Sections ---------- */

.mhr-prose h2 { position: relative; padding-top: .9rem; }
.mhr-prose h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 3.25rem;
	height: 2px;
	background: linear-gradient(90deg, var(--mhr-saffron), var(--mhr-majorelle));
	transform-origin: left;
	transition: transform 1s var(--mht-ease);
}
.mhr-js .mhr-prose h2:not(.is-in)::before { transform: scaleX(0); }
.mhr-prose h2 { transition: opacity .8s ease, translate .9s var(--mht-ease); }
.mhr-js .mhr-prose h2:not(.is-in) { opacity: 0; translate: 0 .9rem; }

/* "1. Title" sections: the number as a badge. */
.mht-num {
	display: inline-grid;
	place-items: center;
	min-width: 1.6em;
	height: 1.6em;
	margin-right: .35em;
	padding: 0 .3em;
	border-radius: 50%;
	background: var(--mhr-majorelle);
	color: #fff;
	font-family: var(--mhr-sans);
	font-size: .62em;
	font-weight: 700;
	vertical-align: .28em;
	box-shadow: 0 0 0 4px var(--mhr-majorelle-wash);
}
.mht-num__dot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Lists: zellige stars instead of dots. */
.mhr-prose > ul { list-style: none; padding-left: 1.6em; }
.mhr-prose > ul > li { position: relative; }
.mhr-prose > ul > li::before {
	content: "";
	position: absolute;
	left: -1.35em;
	top: .5em;
	width: .62em;
	height: .62em;
	background: var(--mhr-saffron);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5 14.9 5.9 20 4.8 18.9 9.9 22.5 12 18.9 14.1 20 19.2 14.9 18.1 12 22.5 9.1 18.1 4 19.2 5.1 14.1 1.5 12 5.1 9.9 4 4.8 9.1 5.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5 14.9 5.9 20 4.8 18.9 9.9 22.5 12 18.9 14.1 20 19.2 14.9 18.1 12 22.5 9.1 18.1 4 19.2 5.1 14.1 1.5 12 5.1 9.9 4 4.8 9.1 5.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mhr-prose > ol { counter-reset: mht; list-style: none; padding-left: 2.2em; }
.mhr-prose > ol > li { position: relative; counter-increment: mht; }
.mhr-prose > ol > li::before {
	content: counter(mht);
	position: absolute;
	left: -2.2em;
	top: .15em;
	display: grid;
	place-items: center;
	width: 1.55em;
	height: 1.55em;
	border-radius: 50%;
	background: var(--mhr-majorelle-wash);
	color: var(--mhr-majorelle);
	font: 700 .78em/1 var(--mhr-sans);
}

/* Quotations. */
.mhr-prose blockquote {
	position: relative;
	padding: .4em 0 .4em 1.4em;
	border-left: 3px solid var(--mhr-saffron);
	font-family: var(--mhr-serif);
	font-size: 1.28em;
	line-height: 1.45;
}
.mhr-prose blockquote::before {
	content: "\201C";
	position: absolute;
	left: -.15em;
	top: -.55em;
	font-size: 3.2em;
	line-height: 1;
	color: var(--mhr-saffron);
	opacity: .35;
	pointer-events: none;
}

/* Photographs inside the story open as they arrive. */
.mhr-prose figure img, .mhr-prose .wp-block-image img { transition: clip-path 1.2s var(--mht-ease), scale 1.4s var(--mht-ease); }
.mhr-js .mhr-prose figure:not(.is-in) img, .mhr-js .mhr-prose .wp-block-image:not(.is-in) img { clip-path: inset(10% 8% 10% 8%); scale: 1.1; }

/* The story ends with the magazine's star. */
.mhr-prose > p:last-of-type::after {
	content: "";
	display: inline-block;
	width: .7em;
	height: .7em;
	margin-left: .4em;
	vertical-align: -.02em;
	background: var(--mhr-majorelle);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5 14.9 5.9 20 4.8 18.9 9.9 22.5 12 18.9 14.1 20 19.2 14.9 18.1 12 22.5 9.1 18.1 4 19.2 5.1 14.1 1.5 12 5.1 9.9 4 4.8 9.1 5.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5 14.9 5.9 20 4.8 18.9 9.9 22.5 12 18.9 14.1 20 19.2 14.9 18.1 12 22.5 9.1 18.1 4 19.2 5.1 14.1 1.5 12 5.1 9.9 4 4.8 9.1 5.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Related stories arrive together. */
.mhr-related .mhr-card { transition: opacity .8s ease, translate .9s cubic-bezier(.2, .75, .15, 1); transition-delay: calc(var(--i, 0) * 110ms); }
.mhr-js .mhr-related:not(.is-in) .mhr-card { opacity: 0; translate: 0 1.5rem; }
.mhr-related .mhr-card:nth-child(2) { --i: 1; }
.mhr-related .mhr-card:nth-child(3) { --i: 2; }

@media (prefers-reduced-motion: reduce) {
	.mhr-article__photo img { transform: none !important; }
	.mhr-js .mhr-article:not(.is-ready) .mht-w > span,
	.mhr-js .mhr-article:not(.is-ready) .mhr-article__photo img { transform: none; clip-path: none; scale: none; }
	.mhr-js .mhr-prose h2:not(.is-in), .mhr-js .mht-glance:not(.is-in), .mhr-js .mhr-related:not(.is-in) .mhr-card { opacity: 1; translate: none; }
	.mhr-js .mhr-prose h2:not(.is-in)::before { transform: none; }
	.mhr-js .mhr-prose figure:not(.is-in) img { clip-path: none; scale: none; }
	.mht-glance.is-in .mht-glance__ring { animation: none; }
}