/* Homepage decoration only. Artwork occupies padding and outer page gutters,
   follows each section's content height, and adds no editor-visible markup. */
.dg11-home-redesign .dg11-home-welcome::before,
.dg11-home-redesign .dg11-home-welcome::after { opacity: .9; }
/* A continuous pair of margin layers fills long sections without touching
   content. Phone strips stay within the existing 16px page gutters. */
.dg11-home-redesign .dg11-home { position: relative; }
.dg11-home-redesign .dg11-home::before,
.dg11-home-redesign .dg11-home::after {
	content: ''; position: absolute; top: 0; bottom: 0; width: 12px;
	pointer-events: none; background: url('homepage-margin-small.svg') center top / 12px 700px repeat-y;
}
.dg11-home-redesign .dg11-home::before { left: 1px; }
.dg11-home-redesign .dg11-home::after { right: 1px; background-position: center 330px; transform: scaleX(-1); }
.dg11-home-redesign :is(.dg11-home-updates, .dg11-home-environment, .dg11-home-history) { position: relative; }
.dg11-home-redesign :is(.dg11-home-updates, .dg11-home-environment, .dg11-home-history)::before,
.dg11-home-redesign :is(.dg11-home-updates, .dg11-home-environment, .dg11-home-history)::after {
	content: ''; position: absolute; pointer-events: none; background-repeat: no-repeat;
}
/* A light connecting gesture below News/Menu, away from dynamic card content. */
.dg11-home-redesign .dg11-home-updates::after {
	inset: auto 0 0; height: 40px;
	background-image: url('homepage-accent-blue.svg'), url('homepage-accent-petals.svg'), url('homepage-accent-wave.svg');
	background-position: 12% center, 49% center, 88% center;
	background-size: 110px 40px, 76px 40px, 126px 40px;
}
/* Heading accents sit beside the centered introduction, rather than on cards. */
.dg11-home-redesign .dg11-home-environment::before {
	inset: 0 0 auto; height: 180px;
	background-image: url('homepage-accent-petals.svg'), url('homepage-accent-blue.svg');
	background-position: 5% 46%, 96% 58%;
	background-size: 124px 90px, 132px 76px;
}
.dg11-home-redesign .dg11-home-environment::after {
	inset: auto 0 0; height: 40px;
	background-image: url('homepage-accent-coral.svg'), url('homepage-accent-wave.svg'), url('homepage-accent-leaf.svg');
	background-position: 8% center, 44% center, 87% center;
	background-size: 100px 40px, 120px 40px, 76px 40px;
}
/* Frame history in its surrounding whitespace, keeping the panel quiet. */
.dg11-home-redesign .dg11-home-history::before {
	inset: -34px 0 auto; height: 28px;
	background-image: url('homepage-accent-petals.svg'), url('homepage-accent-blue.svg');
	background-position: 28% center, 74% center; background-size: 54px 28px, 86px 28px;
}
.dg11-home-redesign .dg11-home-history::after {
	inset: auto 0 -54px; height: 40px;
	background-image: url('homepage-accent-leaf.svg'), url('homepage-accent-wave.svg'), url('homepage-accent-coral.svg');
	background-position: 12% center, 48% center, 88% center;
	background-size: 90px 40px, 124px 40px, 110px 40px;
}
@media (min-width: 87.5rem) {
	.dg11-home-redesign .dg11-home::before,
	.dg11-home-redesign .dg11-home::after {
		width: clamp(48px, calc((100% - 1200px) / 2 - 12px), 128px);
		background-size: 100% 1000px; transform: none;
	}
	.dg11-home-redesign .dg11-home::before {
		left: max(0px, calc((100% - 1200px) / 2 - 140px));
		background-image: url('homepage-margin-left.svg');
	}
	.dg11-home-redesign .dg11-home::after {
		right: max(0px, calc((100% - 1200px) / 2 - 140px));
		background-image: url('homepage-margin-right.svg'); background-position: center 120px;
		background-size: 100% 1100px;
	}
	/* Unified page margins replace individual side clusters. */
	.dg11-home-redesign .dg11-home-welcome::after { content: none; }
}
@media (min-width: 40rem) and (max-width: 69.99rem) {
	/* Five photographs leave an open sixth cell on tablet. Fill that space
       decoratively without adding a card or changing grid placement. */
	.dg11-home-redesign .dg11-home-photo-grid { position: relative; }
	.dg11-home-redesign .dg11-home-photo-grid::after {
		content: ''; position: absolute; right: 0; bottom: 0;
		width: calc((100% - 1rem) / 2); height: calc((100% - 2rem) / 3);
		pointer-events: none; background: url('homepage-tablet-garden.svg') center / contain no-repeat;
	}
}
@media (max-width: 69.99rem) {
	/* The introduction fills tablet widths: move its accents into top padding. */
	.dg11-home-redesign .dg11-home-environment::before {
		height: 28px; background-position: 3% center, 96% center;
		background-size: 48px 28px, 58px 28px;
	}
	.dg11-home-redesign .dg11-home-updates::after {
		background-image: url('homepage-accent-blue.svg'), url('homepage-accent-wave.svg');
		background-position: 13% center, 85% center;
		background-size: 88px 34px, 100px 34px;
	}
}
@media (max-width: 47.99rem) {
	.dg11-home-redesign .dg11-home-environment::before {
		height: 24px; background-size: 46px 24px, 54px 24px;
	}
	.dg11-home-redesign .dg11-home-environment::after {
		height: 24px; background-image: url('homepage-accent-coral.svg'), url('homepage-accent-leaf.svg');
		background-position: 12% center, 86% center; background-size: 54px 24px, 40px 24px;
	}
	.dg11-home-redesign .dg11-home-history::before {
		background-size: 42px 24px, 58px 24px;
	}
	.dg11-home-redesign .dg11-home-history::after {
		background-image: url('homepage-accent-leaf.svg'), url('homepage-accent-wave.svg'), url('homepage-accent-coral.svg');
		background-size: 48px 30px, 68px 30px, 58px 30px;
	}
}