/**
 * Home, introduce — one section of the design.
 *
 * The words down the left on the band's own gradient, and the picture beside
 * them cut to the shape the file draws around it.
 */

.custom-home-introduce {
	--custom-home-ground-near: #e8e4db;
	--custom-home-ground-mid: #c8bca9;
	--custom-home-ground-far: #a89376;

	position: relative;
	display: flex;
	align-items: flex-start;
	/* The file draws 660, 23 and 661 across a band of 1344. Held as the share
	   each takes, the two halves keep the file's figures wherever the band is
	   at its full width, and keep their proportion where it is narrower. */
	gap: 1.711%;
	width: 100%;
	padding: 96px calc( 48px + max( 0px, calc( ( 100% - 1440px ) / 2 ) ) );
	box-sizing: border-box;
	overflow: hidden;

	/* The band's own gradient, read from the file. */
	background-image: radial-gradient(
		1625px 2709px at 1944px 974px,
		var( --custom-home-ground-near ) 11.538%,
		var( --custom-home-ground-mid ) 55.769%,
		var( --custom-home-ground-far ) 100%
	);
}

.custom-home-introduce__column {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 0 1 49.107%;
	max-width: 49.107%;
	min-width: 0;
	min-height: 672px;
}

/* The soft mark behind the words: the design's, not the client's. */
.custom-home-introduce__mark {
	position: absolute;
	left: -20px;
	top: 244px;
	display: block;
	width: 395px;
	height: 376px;
	opacity: 0.054;
	background-image: url( "../img/soft-shape.webp" );
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	pointer-events: none;
}

.custom-home-introduce__body {
	position: relative;
	width: 100%;
	overflow-wrap: anywhere;
}

.custom-home-introduce__body p {
	margin: 0;
}

.custom-home-introduce__button {
	position: absolute;
	left: 0;
	/* At the foot of the column, which the file draws 672 deep and 624 above
	   the way in. Where the words need more room than that, it follows them. */
	bottom: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 24px;
	border-radius: 24px;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 300ms ease-in-out;
}

.custom-home-introduce__button:hover {
	opacity: 0.85;
}

/* The picture stands in the shape the file cuts it to, and reaches sixteen
   above the band's own padding, as the file draws it. */
.custom-home-introduce__picture {
	position: relative;
	display: block;
	flex: 0 1 49.182%;
	height: auto;
	aspect-ratio: 661 / 660;
	margin-top: -16px;
	-webkit-mask-image: url( "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 701 700'><path d='M287.505 60.8268C323.416 58.511 451.257 57.7391 587.356 23.3829C723.455 -10.9732 640.145 303.248 670.668 341.078C701.19 378.908 661.331 597.01 587.356 656.458C513.38 715.905 128.064 620.943 45.1109 619.014C-37.8418 617.084 109.749 387.401 128.064 361.151C146.378 334.902 65.9388 129.153 109.749 48.4742C153.56 -32.2045 251.594 63.1427 287.505 60.8268Z' fill='black'/></svg>" );
	mask-image: url( "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 701 700'><path d='M287.505 60.8268C323.416 58.511 451.257 57.7391 587.356 23.3829C723.455 -10.9732 640.145 303.248 670.668 341.078C701.19 378.908 661.331 597.01 587.356 656.458C513.38 715.905 128.064 620.943 45.1109 619.014C-37.8418 617.084 109.749 387.401 128.064 361.151C146.378 334.902 65.9388 129.153 109.749 48.4742C153.56 -32.2045 251.594 63.1427 287.505 60.8268Z' fill='black'/></svg>" );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
}

.custom-home-introduce__picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media ( prefers-reduced-motion: reduce ) {
	.custom-home-introduce__button {
		transition: none;
	}
}

/* Tablet and mobile — the two halves become one column: the words, the way in,
   then the picture beneath them. */
@media ( max-width: 1024px ) {
	.custom-home-introduce {
		flex-direction: column;
		align-items: center;
		gap: 34px;
		padding: 38px 16px 44px;
	}

	.custom-home-introduce__column {
		flex: 0 0 auto;
		max-width: 100%;
		width: 100%;
		height: auto;
		min-height: 0;
		align-items: center;
	}

	.custom-home-introduce__body {
		width: 100%;
	}

	/* Out of the flow on the wide tier so it can sit against the picture; in it
	   here, where there is nothing beside it. */
	.custom-home-introduce__button {
		position: static;
		margin-top: 24px;
		padding: 8px 16px;
	}

	.custom-home-introduce__mark {
		left: 42px;
		top: 296px;
		width: 202px;
		height: 194px;
	}

	.custom-home-introduce__picture {
		flex: 0 0 auto;
		width: 100%;
		height: 324px;
		margin-top: 0;
	}
}

/* Tablet — not drawn. The picture is given more of the room it has here than
   the narrow tier allows, without reaching the height the wide one draws. */
@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.custom-home-introduce__picture {
		height: 500px;
	}

	.custom-home-introduce__mark {
		left: 60px;
		top: 420px;
		width: 300px;
		height: 286px;
	}
}