/**
 * Axis Mundi — editorial reading experience for the story page.
 *
 * A dedicated, wide, warm-toned reading layout — deliberately distinct
 * from the theme's generic .page-shell (see page.php / style.css),
 * which is a plain centered WordPress shell not built for a real read.
 * Approved from the design sandbox at
 * assets/stories/axis-mundi-preview.html — see that file for the
 * reasoning behind each choice (measure in em so column and type scale
 * together, warm off-white body copy so it doesn't glare against the
 * dark wall, a single restrained drop cap, a fixed quiet corner link
 * back to Stories instead of a masthead).
 *
 * This stylesheet only ever supplies layout and typography — the
 * story's own words live entirely in the WordPress editor via
 * the_content() in page-axis-mundi.php.
 */

.back-link {
	position: fixed;
	top: 1.6rem;
	left: 1.75rem;
	z-index: 2;
	font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-size: 0.95rem;
	letter-spacing: 0.06em;
	color: rgba(210, 216, 230, 0.42);
	text-decoration: none;
	transition: color 0.4s ease;
}
.back-link:hover, .back-link:focus-visible { color: rgba(210, 216, 230, 0.9); }

.page-article {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 18vh 1.5rem 20vh;
}

/* A single title, given space to arrive on its own — no kicker, no
   dek. The page opens slowly on purpose. */
.article-title {
	font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	font-weight: 600;
	font-style: italic;
	font-size: clamp(2.7rem, 6.4vw, 4.6rem);
	line-height: 1.1;
	letter-spacing: 0.01em;
	color: rgba(224, 228, 238, 0.97);
	text-align: center;
	margin-bottom: clamp(5rem, 13vh, 8rem);
	opacity: 0;
	animation: axis-mundi-resolve-in 1.4s ease-out forwards;
	animation-delay: 0.15s;
}
/* Namespaced so it never collides with front-page.css's own
   @keyframes resolve-in, which animates to a different end-opacity. */
@keyframes axis-mundi-resolve-in { from { opacity: 0; } to { opacity: 1; } }

/* ── the reading column itself ──
   Measure is set in em (not px/ch) so column width and font-size scale
   together — wider and larger than the theme's other reading surfaces
   (.stories-content / .page-shell), closer to a single committed
   literary-journal column than a typical web article. */
.article-body {
	width: 100%;
	max-width: 40em;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(1.22rem, 0.4vw + 1.1rem, 1.4rem);
	line-height: 1.9;
	color: rgba(224, 216, 202, 0.76);
	opacity: 0;
	animation: axis-mundi-resolve-in 1.4s ease-out forwards;
	animation-delay: 0.45s;
}

.article-body p {
	margin-bottom: 1.8em;
}
.article-body > p:last-child { margin-bottom: 0; }

/* The real first paragraph of whatever's in the editor gets the drop
   cap -- selected structurally (:first-child), not by a hand-added
   class, so it always finds the true opening line regardless of what's
   actually written. Kept deliberately quiet (soft weight, low opacity,
   same warm tone as the body) so it supports the reading instead of
   competing with the title. */
.article-body > p:first-child::first-letter {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-weight: 500;
	font-size: 2.95em;
	line-height: 0.78;
	float: left;
	padding: 0.05em 0.1em 0 0;
	color: rgba(224, 216, 202, 0.62);
}

@media (max-width: 640px) {
	.back-link { top: 1.25rem; left: 1.25rem; font-size: 0.88rem; }
	.page-article { padding: 12vh 1.35rem 14vh; }
	.article-title { margin-bottom: 3.5rem; }
	.article-body > p:first-child::first-letter { font-size: 2.5em; }
}

@media (prefers-reduced-motion: reduce) {
	.article-title, .article-body { animation: none; opacity: 1; }
}