/*
 * About Zainab 2 - the collage, measured in width units.
 *
 * Every vertical position here is in vw rather than a percentage of the
 * stage. The design is width-proportional, so this keeps the whole
 * composition identical at every width it is used at, and it lets the
 * sheet's height be set to exactly where the content ends instead of
 * the other way round.
 *
 * Each photograph group finishes before the next sheet's torn edge.
 * Photographs are at 60% of the drawn size, the handwriting at 80%.
 *
 * Below 1260px the stage collapses and the markup stacks in DOM order.
 */

.mlp-az2 {
	--az-edge: 13.2vw;
	--az-fade: 7vw;
	--az-body: clamp(14px, 1.111vw, 16px);   /* exactly 16px at 1440 and up */
	--az-brow: clamp(15.75px, 1.25vw, 18px); /* exactly 18px at 1440 and up */
}

/* -------- type -------- */

.mlp-az2 .az-title,
.mlp-az2 .az-h2 {
	font-size: clamp(40px, 8vh, 68px);
	line-height: 1;
}

.mlp-az2 .az-hero { padding-top: 2.4vw; }

.mlp-az2 .az-text p:not(.az-eyebrow) {
	font-size: var(--az-body);
	line-height: 1.65;
}

.mlp-az2 .az-eyebrow {
	font-size: var(--az-brow);
	letter-spacing: 0.22em;
	margin-bottom: 0.9vw;
}

/* -------- the stage -------- */

.mlp-az2 .az-stage {
	padding-top: 0;
	height: 247.83vw;
}

/* the torn seams */
.mlp-az2 .s1 { top: 8.207vw; }
.mlp-az2 .s2 { top: 39.000vw; }
.mlp-az2 .s3 { top: 83.611vw; }
.mlp-az2 .s4 { top: 120.150vw; }
.mlp-az2 .s5 { top: 161.870vw; }
.mlp-az2 .s6 { top: 194.400vw; }

.mlp-az2 .az-sheet::before { height: calc(var(--az-edge) + var(--az-fade)); }

.mlp-az2 .az-sheet::after {
	top: var(--az-edge);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--az-fade));
	mask-image: linear-gradient(to bottom, transparent 0, #000 var(--az-fade));
}

.mlp-az2 .az-sheet.is-light::after { background-image: url('../images/about/sheet-paper-light-2.webp'); }
.mlp-az2 .az-sheet.is-dark::after  { background-image: url('../images/about/sheet-paper-dark-2.webp'); }

/* The foot: a little paper, a torn edge, then the page grain again. */
.mlp-az2 .az-foot-tear {
	top: auto;
	bottom: 0;
	height: 14vw;
	background-color: var(--mlp-ivory);
	background-image:
		url('../images/about/torn-band-a.webp'),
		url('../images/paper-tile.webp?v=2');
	background-size: 100% auto, 1480px auto;
	background-position: center bottom, left bottom;
	background-repeat: no-repeat, repeat;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5vw);
	mask-image: linear-gradient(to bottom, transparent 0, #000 5vw);
}

/* -------- placed elements --------
 * Photographs are at 60% of the drawn size (the 52% of the last round,
 * plus 15%); handwriting at 80%. The text columns are 85% of the widths
 * the PDF gives, so each paragraph runs a line or two longer and fills
 * more of its sheet.
 *
 * Every photograph clears the next sheet's torn edge, measured against
 * that edge's actual profile across the photograph's width rather than
 * against an average line, and every paragraph clears the highest point
 * of the edge below it by at least 1.2vw at 1280-1440, where the type is
 * at its largest relative to the page.
 */

.mlp-az2 .p-heading          { top: 2.812vw; }
.mlp-az2 .p-label-first      { right: auto; left: 2.5000%; width: 31.8333%; top: 6.715vw; }
.mlp-az2 .p-costume          { left: auto; right: 3.1100%; width: 15.0745%; top: 13.200vw; }
.mlp-az2 .p-father           { left: auto; right: 2.8700%; width: 18.8536%; top: 22.500vw; }
.mlp-az2 .p-text-who         { width: 47.8125%; top: 19.600vw; }
.mlp-az2 .p-studio           { right: auto; left: 2.9167%; width: 19.0197%; top: 46.977vw; }
.mlp-az2 .p-text-work        { width: 48.1075%; top: 55.297vw; }
.mlp-az2 .p-clay             { left: auto; right: 1.2500%; width: 17.9400%; top: 92.400vw; }
.mlp-az2 .p-label-human      { right: auto; left: 28.1042%; width: 38.1667%; top: 81.546vw; }
.mlp-az2 .p-kintsugi         { left: auto; right: 3.5417%; width: 17.0264%; top: 105.000vw; }
.mlp-az2 .p-text-curiosity   { width: 50.1738%; top: 99.000vw; }
.mlp-az2 .p-family           { right: auto; left: 4.3000%; width: 17.9815%; top: 135.750vw; }
.mlp-az2 .p-text-learning    { width: 47.9307%; top: 136.350vw; }
.mlp-az2 .p-label-listen     { right: auto; left: 46.2986%; width: 38.1667%; top: 160.893vw; }
.mlp-az2 .p-workshop         { left: auto; right: -0.1389%; width: 21.2207%; top: 174.000vw; }
.mlp-az2 .p-text-listening   { width: 48.8750%; top: 174.270vw; }
.mlp-az2 .p-letters          { right: auto; left: 5.5000%; width: 18.9367%; top: 209.810vw; }
.mlp-az2 .p-text-why         { width: 48.2256%; top: 214.310vw; }
/* -------- the film: click the picture, not a corner button -------- */

.mlp-az2 .az-film { cursor: pointer; }
.mlp-az2 .az-film video { cursor: pointer; }

.mlp-az2 .az-film-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: clamp(62px, 6vw, 94px);
	height: clamp(62px, 6vw, 94px);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	filter: drop-shadow(0 6px 18px rgba(20, 16, 10, 0.3));
	transition: transform .18s ease, opacity .18s ease;
}

.mlp-az2 .az-film-play svg { display: block; width: 100%; height: 100%; }
.mlp-az2 .az-film:hover .az-film-play { transform: translate(-50%, -50%) scale(1.06); }

.mlp-az2 .az-film.is-playing .az-film-play {
	opacity: 0;
	pointer-events: none;
}

/* -------- the sticky bar -------- */

.az-stickybar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	background: rgba(244, 236, 225, 0.94);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 2px 16px rgba(30, 27, 22, 0.09);
	transform: translateY(-101%);
	transition: transform .3s ease;
	pointer-events: none;
}

.az-stickybar.is-shown {
	transform: none;
	pointer-events: auto;
}

.az-stickybar img {
	display: block;
	width: clamp(150px, 15vw, 220px);
	height: auto;
}

@media (max-width: 760px) {
	.az-stickybar { padding: 9px 16px; }
	.az-stickybar img { width: 140px; }
}
/* ---------------- stacked layout ----------------
 * The collage is absolutely placed and its type scales with the
 * viewport, which holds together down to about 1260px. Below that the
 * column is too narrow for the placement to read, so the stage
 * collapses and the markup stacks: each section leads with its
 * photographs, then its words.
 */

@media (max-width: 1260px) {

	.mlp-az2 { --az-edge: 12vw; --az-fade: 5vw; }

	.mlp-az2 .az-hero { padding: 18px 20px 0; }
	.mlp-az2 .az-title { font-size: clamp(30px, 5.4vw, 52px); margin-bottom: 18px; }
	.mlp-az2 .az-film { width: 100%; }
	.mlp-az2 .az-pieces { margin-top: 26px; }

	.mlp-az2 .az-stage {
		height: auto;
		display: flex;
		flex-direction: column;
		position: relative;
		padding:
			calc(var(--az-edge) + 16px)
			max(20px, calc((100% - 880px) / 2))
			calc(var(--az-edge) + var(--az-fade) - 22px);
		margin-top: -1px;
		background-color: var(--az-paper-light);
		background-image: url('../images/about/sheet-paper-light-2.webp');
		background-repeat: repeat-y;
		background-size: 100% auto;
		background-position: center top;
		overflow: visible;
	}

	.mlp-az2 .az-stage::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: calc(var(--az-edge) + var(--az-fade));
		background: url('../images/about/torn-band-b.webp') center top / 100% auto no-repeat;
		-webkit-mask-image: linear-gradient(to bottom, #000 var(--az-edge), transparent calc(var(--az-edge) + var(--az-fade)));
		mask-image: linear-gradient(to bottom, #000 var(--az-edge), transparent calc(var(--az-edge) + var(--az-fade)));
	}

	.mlp-az2 .az-sheet { display: none; }

	.mlp-az2 .az-foot-tear {
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		top: auto;
		bottom: 0;
		height: calc(var(--az-edge) + var(--az-fade));
	}
	.mlp-az2 .az-stage > .az-h2,
	.mlp-az2 .az-stage > .az-text,
	.mlp-az2 .az-stage > .az-label,
	.mlp-az2 .az-stage > .az-polaroid {
		position: static;
		left: auto;
		right: auto;
		top: auto;
		width: 100%;
	}

	.mlp-az2 .az-h2 { font-size: clamp(28px, 5vw, 46px); margin: 0 0 20px; }
	.mlp-az2 .az-text { margin: 0 0 26px; }
	.mlp-az2 .az-text p:not(.az-eyebrow) { font-size: 16px; line-height: 1.72; }
	.mlp-az2 .az-eyebrow { font-size: 18px; letter-spacing: 0.2em; margin-bottom: 10px; }
	.mlp-az2 .az-label { max-width: 86%; margin: 0 auto 22px; }

	.mlp-az2 .az-polaroid {
		max-width: min(71%, 520px);
		margin: 0 auto 26px;
		filter: drop-shadow(0 6px 14px rgba(40, 32, 20, 0.2));
	}

	.mlp-az2 .az-sheet,
	.mlp-az2 .az-foot-tear   { order:  0; }
	.mlp-az2 .p-heading      { order:  1; }
	.mlp-az2 .p-label-first  { order:  2; }
	.mlp-az2 .p-costume      { order:  3; }
	.mlp-az2 .p-father       { order:  4; }
	.mlp-az2 .p-text-who     { order:  5; }
	.mlp-az2 .p-studio       { order:  6; }
	.mlp-az2 .p-text-work    { order:  7; }
	.mlp-az2 .p-label-human  { order:  8; }
	.mlp-az2 .p-clay         { order:  9; }
	.mlp-az2 .p-kintsugi     { order: 10; }
	.mlp-az2 .p-text-curiosity { order: 11; }
	.mlp-az2 .p-family       { order: 12; }
	.mlp-az2 .p-text-learning { order: 13; }
	.mlp-az2 .p-label-listen { order: 14; }
	.mlp-az2 .p-workshop     { order: 15; }
	.mlp-az2 .p-text-listening { order: 16; }
	.mlp-az2 .p-letters      { order: 17; }
	.mlp-az2 .p-text-why     { order: 18; }

	/* Half the stagger: the pair still steps down to the right, at
	   half the angle it used to. */
	.mlp-az2 .p-costume,
	.mlp-az2 .p-clay {
		align-self: flex-start;
		margin: 0 0 0 6%;
	}

	.mlp-az2 .p-father,
	.mlp-az2 .p-kintsugi {
		align-self: flex-start;
		margin: -15% 0 26px 23%;
	}
}

/* ---------------- footer, variant 2 ----------------
 * Three columns now that Explore has gone: the mark, the contact
 * details centred in the middle, and the sign-off hard right.
 */

.mlp-site-footer-2 .mlp-site-footer-inner {
	grid-template-columns: 1.1fr 1fr 1.1fr;
	align-items: center;
}

.mlp-site-footer-2 .mlp-footer-tagline {
	text-transform: none;
	font-size: 12.5px;
	letter-spacing: 0.1em;
}

.mlp-site-footer-2 .mlp-footer-col {
	text-align: center;
	justify-self: center;
}

.mlp-site-footer-2 .mlp-footer-social { justify-content: center; }

.mlp-site-footer-2 .mlp-footer-sign {
	justify-self: end;
	text-align: right;
}

@media (max-width: 860px) {
	.mlp-site-footer-2 .mlp-site-footer-inner { grid-template-columns: 1fr; text-align: center; }
	.mlp-site-footer-2 .mlp-footer-brand,
	.mlp-site-footer-2 .mlp-footer-col,
	.mlp-site-footer-2 .mlp-footer-sign { justify-self: center; text-align: center; }
	.mlp-site-footer-2 .mlp-footer-brand img { margin-inline: auto; }
}