/* Prose: a reading section with a photo in the cut-corner frame */
.ei.prose { padding: var(--ei-sec) 0; background: var(--ei-ivory); }
.ei.prose--paper { background: var(--ei-paper); }
.ei.prose--lapis { background: var(--ei-lapis); color: var(--ei-light); }
.ei .prose__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.ei.prose--img-left .prose__aside { order: -1; }
.ei.prose--img-left .prose__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.ei.prose--solo .prose__in { grid-template-columns: minmax(0, 1fr); max-width: calc(760px + 2 * var(--ei-gut)); }

.ei .prose__copy .h-xl { margin-bottom: 28px; }
.ei .prose__body { max-width: 66ch; color: var(--ei-body); font-size: 18px; line-height: 1.7; }
.ei.prose--lapis .prose__body { color: #d6daea; }
.ei .prose__body > * + * { margin-top: 1.1em; }
.ei .prose__body p:first-child { font-size: 20px; line-height: 1.6; color: var(--ei-ink); }
.ei.prose--lapis .prose__body p:first-child { color: var(--ei-light); }
.ei .prose__body :where(h2, h3, h4) { font: 400 26px/1.2 var(--ei-display); color: var(--ei-ink); margin-top: 1.6em; }
.ei.prose--lapis .prose__body :where(h2, h3, h4) { color: var(--ei-light); }
.ei .prose__body a { color: inherit; text-decoration-color: var(--ei-amber); text-underline-offset: 4px; }
.ei .prose__body :where(ul, ol) { padding-left: 1.2em; }
.ei .prose__body ul { list-style: disc; }
.ei .prose__body ol { list-style: decimal; }
.ei .prose__body strong { color: var(--ei-ink); font-weight: 600; }

.ei .prose__ph { font: 400 24px/1.2 var(--ei-display); margin-top: 44px; }
.ei .prose__points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin-top: 22px; max-width: 760px; counter-reset: pt; }
.ei .prose__points li { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 0 18px 30px; border-top: 1px solid var(--ei-line); }
.ei.prose--lapis .prose__points li { border-color: rgba(240, 196, 106, .28); }
.ei .prose__points li::before { content: ""; position: absolute; left: 0; top: 23px; width: 14px; height: 14px; background: var(--ei-gold);
	clip-path: polygon(50% 0, 64.6% 14.6%, 85.4% 14.6%, 85.4% 35.4%, 100% 50%, 85.4% 64.6%, 85.4% 85.4%, 64.6% 85.4%, 50% 100%, 35.4% 85.4%, 14.6% 85.4%, 14.6% 64.6%, 0 50%, 14.6% 35.4%, 14.6% 14.6%, 35.4% 14.6%); }
.ei .prose__points--num li { counter-increment: pt; padding-left: 44px; }
.ei .prose__points--num li::before { content: counter(pt); clip-path: none; background: none; width: auto; height: auto; top: 14px; font: 400 28px/1 var(--ei-display); color: var(--ei-gold-dark); }
.ei.prose--lapis .prose__points--num li::before { color: var(--ei-gold-2); }
.ei .prose__points b { font-weight: 600; font-size: 17px; }
.ei .prose__points span { color: var(--ei-muted); font-size: 15.5px; line-height: 1.5; }
.ei.prose--lapis .prose__points span { color: var(--ei-light-2); }
.ei .prose__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }

.ei .prose__aside { position: sticky; top: calc(var(--ei-hdr) + 24px); }
.ei .prose__media { position: relative; aspect-ratio: 4 / 4.6; margin: 0; background: var(--ei-lapis);
	clip-path: polygon(8% 0, 92% 0, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0 92%, 0 8%); }
.ei .prose__media img { width: 100%; height: 100%; object-fit: cover; }
.ei .prose__media--contain { background: #fff; }
.ei .prose__media--contain img { object-fit: contain; padding: 8%; }
.ei .prose__frame { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); pointer-events: none; }
.ei .prose__frame polygon { fill: none; stroke: rgba(240, 196, 106, .9); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.ei .prose__label { position: relative; margin: -56px 24px 0 auto; max-width: 300px; padding: 16px 18px; background: var(--ei-lapis); color: #e7e3d8;
	border-left: 2px solid var(--ei-gold-2); font-size: 14.5px; line-height: 1.45; box-shadow: 0 24px 40px -24px rgba(16, 26, 63, .6); }
.ei .prose__label b { display: block; color: var(--ei-gold-2); font-weight: 600; margin-bottom: 2px; }

@media (max-width: 1020px) {
	.ei .prose__in, .ei.prose--img-left .prose__in { grid-template-columns: minmax(0, 1fr); }
	.ei.prose--img-left .prose__aside { order: 0; }
	.ei .prose__aside { position: static; max-width: 560px; }
	.ei .prose__media { aspect-ratio: 4 / 3; }
}
@media (max-width: 720px) {
	.ei.prose { padding: 72px 0; }
	.ei .prose__body { font-size: 16.5px; }
	.ei .prose__body p:first-child { font-size: 18px; }
	.ei .prose__points { grid-template-columns: minmax(0, 1fr); }
	.ei .prose__label { margin: -40px 12px 0 auto; }
}
