/* ==========================================================
   Homepage "Stories from the island": full-width section band
   (2026-11-12). Loaded after icp-extras.css.
   ========================================================== */
body:has(.icpx-stories) { overflow-x: clip; }

.icpx-stories {
	position: relative;
	max-width: none;
	width: 100vw;
	margin: clamp(30px, 5vw, 60px) 0 0 calc(50% - 50vw);
	padding: clamp(48px, 7vw, 84px) max(clamp(18px, 4vw, 40px), calc(50vw - 620px)) clamp(56px, 8vw, 96px);
	box-sizing: border-box;
	background:
		radial-gradient(520px 320px at 8% 0%, rgba(226, 85, 139, 0.16), transparent 70%),
		radial-gradient(560px 340px at 92% 12%, rgba(28, 111, 214, 0.14), transparent 70%),
		radial-gradient(520px 300px at 70% 100%, rgba(240, 86, 27, 0.10), transparent 70%),
		linear-gradient(180deg, #FFF6F9 0%, #F4F8FF 100%);
	border-top: 1px solid #F3E3EA;
}
/* soft wave at the top edge */
.icpx-stories::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: 28px;
	background: #fff;
	-webkit-mask: radial-gradient(28px 22px at 50% 0, #000 98%, transparent) 0 0 / 56px 28px repeat-x;
	mask: radial-gradient(28px 22px at 50% 0, #000 98%, transparent) 0 0 / 56px 28px repeat-x;
	opacity: 0.9;
	pointer-events: none;
}
.icpx-stories__head,
.icpx-stories__grid { position: relative; z-index: 1; }

.icpx-story { box-shadow: 0 14px 34px rgba(20, 39, 90, 0.10); }
.icpx-story:hover { box-shadow: 0 18px 40px rgba(20, 39, 90, 0.16); }

/* 16:9 thumbnails so YouTube's letterbox bars are cropped away */
.icpx-story__media { aspect-ratio: 16 / 9; }