/* Longform reader styles — narrow, mobile-first reading column with ad rails removed for v0.
   The look intentionally mimics the clean Taboola-lander style: big readable text, one image
   per screen, ad slots that don't look like garbage. */

:root {
	--lf-max: 680px;
	--lf-fg: #1a1a1a;
	--lf-muted: #6b7280;
	--lf-accent: #b91c1c;
	--lf-ad-bg: #f3f4f6;
	--lf-ad-border: #e5e7eb;
}

body { margin: 0; background: #fff; color: var(--lf-fg);
	font: 17px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

.lf-reader { padding: 16px; }
.lf-article { max-width: var(--lf-max); margin: 0 auto; }

.lf-screen { margin: 0 0 8px; }
.lf-screen.lf-hidden { display: none; }

.lf-heading { font-size: 1.5rem; line-height: 1.25; font-weight: 800; margin: 1.4em 0 0.5em; letter-spacing: -0.01em; }
h1.lf-heading { font-size: 1.9rem; }

.lf-figure { margin: 0 0 0.8em; }
.lf-img { width: 100%; height: auto; display: block; border-radius: 10px; background: #eee; }

.lf-body p { margin: 0 0 1em; }

/* ad slots */
.lf-ad {
	min-height: 100px; margin: 22px auto; padding: 8px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	background: var(--lf-ad-bg); border: 1px solid var(--lf-ad-border); border-radius: 8px;
	max-width: 360px;
}
.lf-ad-label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lf-muted); margin-bottom: 4px; }
.lf-ad-filled { min-height: 250px; }
.lf-ad-stub { font: 12px/1.4 monospace; color: #374151; text-align: center; padding: 30px 10px; }
.lf-ad-flash { outline: 2px solid var(--lf-accent); transition: outline 0.1s; }

/* sticky bottom anchor */
.lf-sticky-anchor {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
	background: #fff; border-top: 1px solid var(--lf-ad-border);
	display: flex; flex-direction: column; align-items: center; padding: 4px 0 6px;
	box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
}
.lf-sticky-anchor .lf-ad { margin: 0; border: none; background: transparent; min-height: 60px; }
.lf-sticky-close {
	position: absolute; top: 2px; right: 6px; border: none; background: transparent;
	font-size: 18px; line-height: 1; color: var(--lf-muted); cursor: pointer;
}

.lf-sentinel { height: 1px; }
.lf-tail { height: 60vh; } /* runway so the last real screen isn't the literal bottom */

@media (min-width: 720px) {
	.lf-heading { font-size: 1.7rem; }
	h1.lf-heading { font-size: 2.2rem; }
}