/**
 * Kalemiyle Tanınır — editorial reading experience for the story page.
 *
 * Starts close to the Axis Mundi reading layout (assets/css/axis-mundi.css)
 * on purpose -- same warm reading feeling, same general measure and
 * typography scale, no redesign here. But every selector below is
 * namespaced "kt-" and independent: nothing here reuses or depends on
 * axis-mundi.css's classes, and nothing in axis-mundi.css depends on
 * this file. The two can diverge later (this story getting its own
 * distinct presentation) without either one touching the other -- the
 * same isolation principle already used for the meteor/turtle pair on
 * the Stories page.
 *
 * This stylesheet only ever supplies layout and typography — the
 * story's own words live entirely in the WordPress editor via
 * the_content() in page-kalemiyle-taninir.php.
 */

.kt-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;
}
.kt-back-link:hover, .kt-back-link:focus-visible { color: rgba(210, 216, 230, 0.9); }

.kt-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. */
.kt-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: kt-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, or axis-mundi.css's axis-mundi-resolve-in,
   which animate to different end states. */
@keyframes kt-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. */
.kt-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: kt-resolve-in 1.4s ease-out forwards;
	animation-delay: 0.45s;
}

.kt-article-body p {
	margin-bottom: 1.8em;
}
.kt-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. */
.kt-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) {
	.kt-back-link { top: 1.25rem; left: 1.25rem; font-size: 0.88rem; }
	.kt-page-article { padding: 12vh 1.35rem 14vh; }
	.kt-article-title { margin-bottom: 3.5rem; }
	.kt-article-body > p:first-child::first-letter { font-size: 2.5em; }
}

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