/**
 * Düşlemin Tamamlanan Öyküsüne Ağıt — editorial reading experience for
 * the story page.
 *
 * Starts close to the Axis Mundi / Kalemiyle Tanınır reading layouts
 * (assets/css/axis-mundi.css, assets/css/kalemiyle-taninir.css) on
 * purpose -- same warm reading feeling, same general measure and
 * typography scale, no redesign here. But every selector below is
 * namespaced "dta-" and independent: nothing here reuses or depends on
 * either of those files' classes, and neither of them depends on this
 * one. All three can diverge later (this story getting its own distinct
 * presentation) without any of them touching the others -- the same
 * isolation principle already used for the turtle/meteor/flag-tree trio
 * 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-duslemin-tamamlanan-oykusune-agit.php.
 */

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

.dta-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. */
.dta-article-title {
	font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	font-weight: 600;
	font-style: italic;
	font-size: clamp(2.4rem, 5.6vw, 4.6rem);
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: rgba(224, 228, 238, 0.97);
	text-align: center;
	max-width: 18em;
	margin-bottom: clamp(5rem, 13vh, 8rem);
	opacity: 0;
	animation: dta-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, axis-mundi.css's axis-mundi-resolve-in, or
   kalemiyle-taninir.css's kt-resolve-in, which animate to different
   end states. */
@keyframes dta-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. */
.dta-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: dta-resolve-in 1.4s ease-out forwards;
	animation-delay: 0.45s;
}

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

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