.story-page {
	padding-bottom: 4.5rem;
}

.story-page .story-document-title {
	margin-bottom: 3.75rem;
	padding: 2.25rem 2.5rem;
	border: 1px solid var(--sp-border);
	border-radius: 10px;
	background: var(--primary-rgba-10, rgba(0, 136, 204, 0.06));
	text-align: center;
}

.story-page .story-document-title h2 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.45rem, 3vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	color: var(--sp-text);
}

.story-page .story-document-title p {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--primary);
}

.story-page .story-question {
	margin-bottom: 1.75rem;
	text-align: center;
}

.story-page .story-question p {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--sp-text);
}

.story-page .story-copy {
	max-width: 58rem;
	margin: 0 auto;
}

.story-page .story-copy--narrative {
	position: relative;
	display: grid;
	gap: 1.75rem;
	width: 100%;
	max-width: none;
	overflow: hidden;
	padding: 2rem 2.25rem 6.5rem;
	border: 1px solid #d8e7ef;
	border-radius: 14px;
	background:
		linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(241, 248, 252, 0.96));
	box-shadow: 0 12px 32px rgba(32, 74, 99, 0.08);
}

.story-page .story-copy--narrative .story-passage {
	position: relative;
	z-index: 1;
}

.story-page .story-copy p {
	margin: 0;
	line-height: 2;
	color: var(--sp-text-body);
}

.story-page .story-passage p + p {
	margin-top: 0.3rem;
}

.story-page .story-watermark {
	position: absolute;
	right: 1.75rem;
	bottom: 1rem;
	width: 8.5rem;
	height: 8.5rem;
	color: var(--primary);
	fill: currentColor;
	opacity: 0.1;
	transform: rotate(-10deg);
}

.story-page .story-copy--closing {
	display: block;
	width: 100%;
	max-width: none;
	margin-top: 1.75rem;
	padding: 1.3rem 1.5rem;
	border: 1px solid var(--sp-border);
	border-radius: 10px;
	background: #f7f9fb;
}

.story-page .story-learning-list,
.story-page .story-place-list {
	margin-bottom: 0;
	line-height: 1.9;
}

.story-page .story-reference {
	max-width: 65rem;
	margin: 0 auto;
}

.story-page .story-reference img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.story-page .story-reference figcaption {
	margin-top: 0.75rem;
	font-size: var(--sp-fs-small);
	text-align: right;
	color: var(--sp-text-muted);
}

@media (max-width: 767.98px) {
	.story-page .story-document-title {
		margin-bottom: 3rem;
		padding: 1.75rem 1.25rem;
	}

	.story-page .story-document-title p {
		font-size: 0.9rem;
	}

	.story-page .story-copy p {
		line-height: 1.85;
	}

	.story-page .story-copy--narrative {
		gap: 1.5rem;
		padding: 1.4rem 1.25rem 5.5rem;
		border-radius: 10px;
	}

	.story-page .story-watermark {
		right: 0.85rem;
		bottom: 0.6rem;
		width: 7rem;
		height: 7rem;
	}

	.story-page .story-reference figcaption {
		text-align: left;
	}
}