/*
 * About Zainab — placed from Landing_Page_Design.pdf.
 *
 * The design is a 1440-wide collage, not a grid: elements overlap the
 * torn seams and every section sets its own text column. So below the
 * hero everything sits on one stage measuring 1440 x 4780 design units
 * (page y 2120-6900), and each element carries the x/y/width the PDF
 * gives it, converted to a percentage. The stage keeps its aspect via
 * padding-top, so the whole composition scales with the viewport and
 * stays true to the design at any desktop width.
 *
 * Under 760px the stage collapses to normal flow and the same markup
 * stacks in DOM order.
 */

:root {
	--az-paper-light: #EEE7DC;
	--az-paper-dark:  #EDE3D5;
	--az-edge:        13.2vw;   /* tracks the band artwork, which scales with width */
	--az-prose:       #2E2A24;
	--az-eyebrow:     #4A3F33;
}

/* ------------------------------------------------- hero and film */

.az-hero { padding: 5.28vw 2.5vw 0; }

.az-title {
	font-family: var(--mlp-font-display);
	font-weight: 400;
	font-size: 4.861vw;
	line-height: 1.06;
	color: var(--mlp-ink);
	text-align: center;
	margin: 0 0 1.45vw;
}

.az-film {
	position: relative;
	width: 95.139%;
	margin: 0 auto;
	aspect-ratio: 1370 / 770;
	overflow: hidden;
	background: var(--mlp-limestone);
}

.az-film video,
.az-film iframe {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	border: 0; display: block; object-fit: cover;
}

/* -------------------------------------- the pieces that shaped me */

.az-pieces { margin: 2.9vw 0 0; line-height: 0; }
.az-pieces img { width: 100%; height: auto; display: block; }

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

.az-stage {
	position: relative;
	width: 100%;
	padding-top: 331.944%;      /* 4780 / 1440 */
	margin-top: -6.25vw;        /* the stage starts 90 units above the artwork's end */
	overflow: hidden;
}

/* Sheets: each runs from its tear to the foot of the stage, and later
   sheets paint over earlier ones purely by document order. */
.az-sheet { position: absolute; left: 0; right: 0; bottom: 0; }

.az-sheet::before {
	content: "";
	position: absolute; left: 0; right: 0; top: 0;
	height: var(--az-edge);
	background-size: 100% auto;
	background-position: center top;
	background-repeat: no-repeat;
}

.az-sheet::after {
	content: "";
	position: absolute; left: 0; right: 0;
	top: calc(var(--az-edge) - 1px); bottom: 0;
	background-size: 100% auto;
	background-repeat: repeat-y;
	background-position: center top;
}

.az-sheet.is-light::before { background-image: url('../images/about/torn-band-b.webp'); }
.az-sheet.is-dark::before  { background-image: url('../images/about/torn-band-a.webp'); }

.az-sheet.is-light::after {
	background-color: var(--az-paper-light);
	background-image: url('../images/about/sheet-paper-light.webp');
}

.az-sheet.is-dark::after {
	background-color: var(--az-paper-dark);
	background-image: url('../images/about/sheet-paper-dark.webp');
}

.s1 { top:  2.992%; }
.s2 { top: 13.138%; }
.s3 { top: 30.481%; }
.s4 { top: 45.021%; }
.s5 { top: 60.230%; }
.s6 { top: 72.971%; }

.az-foot-tear {
	position: absolute; left: 0; right: 0;
	top: 98.598%;
	height: var(--az-edge);
	background: url('../images/about/torn-band-a.webp') center bottom / 100% auto no-repeat;
}

/* ---------------------------------------------- placed elements */

.az-stage > .az-h2,
.az-stage > .az-text,
.az-stage > .az-label,
.az-stage > .az-polaroid { position: absolute; }

.az-h2 {
	font-family: var(--mlp-font-display);
	font-weight: 400;
	font-size: 4.861vw;
	line-height: 1.06;
	color: var(--mlp-ink);
	text-align: center;
	margin: 0;
}

.az-text p:not(.az-eyebrow) {
	font-family: var(--mlp-font-body);
	font-weight: 400;
	font-size: 1.70vw;         /* 26 units on the 1440 canvas */
	line-height: 1.654;         /* 43 / 26 */
	color: var(--az-prose);
	margin: 0;
}

.az-eyebrow {
	font-family: var(--mlp-font-body);
	font-size: 1.85vw;
	font-weight: 500;
	letter-spacing: 0.30em;
	text-transform: uppercase;
	color: var(--az-eyebrow);
	margin: 0 0 1.35vw;
}

.az-label,
.az-polaroid { display: block; width: 100%; height: auto; }

.az-polaroid { filter: drop-shadow(0 0.7vw 1.5vw rgba(40, 32, 20, 0.20)); }

/* Coordinates below are the PDF's, as percentages of the stage. */
.p-heading         { left:  0;       top:  1.025%; right: 0; }
.p-label-first     { left:  2.500%;  top:  2.448%; width: 39.792%; }
.p-text-who        { left:  6.528%;  top:  6.632%; width: 56.250%; }
.p-costume         { left: 69.444%;  top:  1.799%; width: 25.208%; }
.p-father          { left: 63.333%;  top:  8.347%; width: 31.528%; }
.p-studio          { left:  2.917%;  top: 16.046%; width: 31.806%; }
.p-text-work       { left: 37.708%;  top: 19.079%; width: 56.597%; }
.p-clay            { left: 68.750%;  top: 27.992%; width: 30.000%; }
.p-label-human     { left: 23.333%;  top: 29.728%; width: 47.708%; }
.p-text-curiosity  { left:  5.417%;  top: 33.619%; width: 59.028%; }
.p-kintsugi        { left: 67.986%;  top: 35.983%; width: 28.472%; }
.p-family          { left:  2.500%;  top: 47.322%; width: 30.069%; }
.p-text-learning   { left: 37.083%;  top: 48.117%; width: 56.389%; }
.p-label-listen    { left: 41.528%;  top: 59.874%; width: 47.708%; }
.p-text-listening  { left:  6.944%;  top: 63.264%; width: 57.500%; }
.p-workshop        { left: 64.653%;  top: 62.950%; width: 35.486%; }
.p-text-why        { left: 36.875%;  top: 80.230%; width: 56.736%; }
.p-letters         { left:  1.667%;  top: 79.665%; width: 31.667%; }

/* --------------------------------------------------- phone layout */

@media (max-width: 760px) {
	:root { --az-edge: 16vw; }

	.az-hero { padding: 18px 20px 0; }
	.az-title { font-size: 34px; margin-bottom: 18px; }
	.az-film { width: 100%; }
	.az-pieces { margin-top: 26px; }

	.az-stage {
		position: relative;
		padding: calc(var(--az-edge) + 16px) 20px calc(var(--az-edge) + 30px);
		margin-top: -1px;
		background-color: var(--az-paper-light);
		background-image: url('../images/about/sheet-paper-light.webp');
		background-repeat: repeat-y;
		background-size: 100% auto;
		background-position: center top;
		overflow: visible;
	}

	.az-stage::before {
		content: "";
		position: absolute; left: 0; right: 0; top: 0;
		height: var(--az-edge);
		background: url('../images/about/torn-band-b.webp') center top / 100% auto no-repeat;
	}

	.az-sheet,
	.az-foot-tear { display: none; }

	.az-stage > .az-h2,
	.az-stage > .az-text,
	.az-stage > .az-label,
	.az-stage > .az-polaroid {
		position: static;
		left: auto; top: auto; right: auto;
		width: 100%;
	}

	.az-h2 { font-size: 30px; margin: 0 0 20px; }
	.az-text { margin: 0 0 26px; }
	.az-text p:not(.az-eyebrow) { font-size: 16px; line-height: 1.72; }
	.az-eyebrow { font-size: 13px; letter-spacing: 0.24em; margin-bottom: 10px; }
	.az-label { max-width: 86%; margin: 0 auto 22px; }
	.az-polaroid { max-width: 62%; margin: 0 auto 26px; filter: drop-shadow(0 6px 14px rgba(40,32,20,0.20)); }
}

/* ---------------------------------------------- phone reading order
 * On a phone each section leads with its photographs and then its
 * words. The stage becomes a flex column purely so the order can be
 * set here; the desktop stage is absolutely positioned, so nothing
 * above 760px is affected by any of this.
 */

@media (max-width: 760px) {
	.az-stage { display: flex; flex-direction: column; }

	.az-sheet,
	.az-foot-tear        { order: 0; }

	.p-heading           { order:  1; }
	.p-label-first       { order:  2; }
	.p-costume           { order:  3; }
	.p-father            { order:  4; }
	.p-text-who          { order:  5; }

	.p-studio            { order:  6; }
	.p-text-work         { order:  7; }

	.p-label-human       { order:  8; }
	.p-clay              { order:  9; }
	.p-kintsugi          { order: 10; }
	.p-text-curiosity    { order: 11; }

	.p-family            { order: 12; }
	.p-text-learning     { order: 13; }

	.p-label-listen      { order: 14; }
	.p-workshop          { order: 15; }
	.p-text-listening    { order: 16; }

	.p-letters           { order: 17; }
	.p-text-why          { order: 18; }

	/* A pair of photographs staggers and overlaps, so the second one's
	   taped edge lands on the end of the first exactly as it does on
	   desktop, rather than sitting in a tidy stack. */
	.p-costume,
	.p-clay {
		align-self: flex-start;
		margin: 0 0 0 2%;
	}

	.p-father,
	.p-kintsugi {
		align-self: flex-end;
		margin: -13% 2% 26px 0;
	}
}