/* First-hand articles and the About page. Every rule is scoped to
   .lm-article so it never collides with site.css or calculator.css. */

.lm-article {
	max-width: 720px;
	margin: 0 auto;
	padding: 40px 20px 64px;
	font-size: 1.125rem;
	line-height: 1.6;
}

.lm-article h1,
.lm-article h2,
.lm-article h3 {
	font-family: var(--font-display);
	font-weight: 650;
	line-height: 1.2;
}

.lm-article h1 { font-size: clamp(2rem, 5vw, 2.75rem); margin: 0 0 16px; }
.lm-article h2 { font-size: 1.75rem; margin: 48px 0 12px; }
.lm-article h3 { font-size: 1.25rem; margin: 28px 0 6px; }
.lm-article p { margin: 0 0 16px; }
.lm-article ol,
.lm-article ul { padding-left: 24px; }
.lm-article li { margin-bottom: 6px; }
.lm-article [id] { scroll-margin-top: 80px; }

.lm-article .byline { color: var(--muted); font-size: 1.125rem; margin-bottom: 24px; }

.lm-article .lead { font-size: 1.25rem; line-height: 1.55; margin-bottom: 28px; }

.lm-article .callout {
	background: var(--paper-deep);
	border-radius: 8px;
	padding: 14px 18px;
}

/* Media */
.lm-article figure {
	position: relative;
	margin: 28px 0;
	border-radius: 12px;
	overflow: hidden;
	background: var(--paper-deep);
}

.lm-article figure picture { display: block; }

.lm-article figure img,
.lm-article figure video {
	display: block;
	width: 100%;
	height: auto;
}

.lm-article figure.is-hero { margin: 0 0 28px; }
.lm-article figure.is-hero img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; }
.lm-article figure.is-wide-hero img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 45%; }

.lm-article figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 48px 18px 14px;
	color: #fff;
	font-size: 1.125rem;
	line-height: 1.35;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
	pointer-events: none;
}

.lm-article .media-split {
	display: grid;
	grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
	gap: 28px;
	align-items: start;
	margin: 28px 0;
}

.lm-article .media-split figure { margin: 0; }
.lm-article .media-split p:last-child { margin-bottom: 0; }

/* Tables */
.lm-article .table-wrap { overflow-x: auto; }

.lm-article table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0 24px;
	font-size: 1.125rem;
	background: #fff;
}

.lm-article th,
.lm-article td {
	text-align: left;
	vertical-align: top;
	padding: 10px 12px;
	border-bottom: 1px solid var(--line);
}

.lm-article th { background: var(--paper-deep); font-weight: 600; }
.lm-article .table-note { color: var(--muted); font-size: 1.125rem; margin-top: -8px; }

/* Short-answer card */
.lm-article .summary {
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba(28, 25, 21, 0.06), 0 12px 32px rgba(28, 25, 21, 0.07);
	padding: 32px;
	margin: 0 0 40px;
}

.lm-article .kicker {
	color: var(--accent);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.lm-article .summary-verdict {
	font-family: var(--font-display);
	font-weight: 650;
	font-size: clamp(1.75rem, 4.5vw, 2.25rem);
	line-height: 1.15;
	margin-bottom: 10px;
}

.lm-article .summary-lead { color: var(--muted); margin-bottom: 28px; }

.lm-article .stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.lm-article .stats li {
	min-width: 0;
	hyphens: auto;
	overflow-wrap: anywhere;
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0 16px;
	border-left: 1px solid var(--line);
}

.lm-article .stats li:first-child { padding-left: 0; border-left: 0; }

.lm-article .stat-value {
	font-family: var(--font-display);
	font-weight: 650;
	font-size: clamp(1.875rem, 6vw, 2.75rem);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.lm-article .stat-unit { font-size: max(1.125rem, 0.5em); }
.lm-article .stat-label { color: var(--muted); font-size: 1.125rem; line-height: 1.3; }

.lm-article .stats--quiet { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.lm-article .stats--quiet .stat-value { font-size: clamp(1.375rem, 4vw, 1.75rem); color: var(--accent); }

.lm-article .summary-tip { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }

/* Route at a glance */
.lm-article .route {
	margin: 0 0 40px;
	padding: 28px 0 8px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.lm-article .route h2 { margin: 0 0 20px; }
.lm-article .route-list { list-style: none; margin: 0; padding: 0; }

.lm-article .route-list li {
	display: grid;
	grid-template-columns: 68px 22px minmax(0, 1fr);
	column-gap: 14px;
	margin: 0;
	padding-bottom: 24px;
}

.lm-article .route-time {
	font-family: var(--font-display);
	font-weight: 650;
	font-size: 1.3125rem;
	line-height: 1.3;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.lm-article .route-dot { position: relative; }

.lm-article .route-dot::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 50%;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--accent);
	transform: translateX(-50%);
}

.lm-article .route-dot::after {
	content: "";
	position: absolute;
	top: 25px;
	bottom: -28px;
	left: 50%;
	width: 2px;
	background: var(--line);
	transform: translateX(-50%);
}

.lm-article .route-list li:last-child .route-dot::after { display: none; }

.lm-article .route-list li:last-child .route-dot::before {
	background: var(--paper);
	border: 2px solid var(--accent);
	width: 9px;
	height: 9px;
}

.lm-article .route-stop a {
	color: var(--ink);
	font-size: 1.25rem;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--line);
}

.lm-article .route-stop a:hover { color: var(--accent); }
.lm-article .route-what { display: block; color: var(--ink); font-size: 1.125rem; line-height: 1.45; margin-top: 2px; }
.lm-article .route-where { display: block; margin-top: 4px; color: var(--accent); font-size: 1.125rem; font-weight: 600; }
.lm-article .route-footnote { color: var(--muted); font-size: 1.125rem; margin: 0 0 16px; }

.lm-article .route-self {
	background: #fff;
	border-radius: 12px;
	padding: 16px 18px;
	margin: 0 0 24px;
}

.lm-article .route-self p { font-size: 1.125rem; margin: 0 0 12px; }

/* Plans infographic */
.lm-article .plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0 24px; }

.lm-article .plan {
	min-width: 0;
	overflow-wrap: anywhere;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 20px;
	display: flex;
	flex-direction: column;
}

.lm-article .plan--pick { position: relative; border: 2px solid var(--accent); box-shadow: 0 12px 28px rgba(139, 58, 26, 0.10); }

.lm-article .plan-kicker {
	color: var(--accent);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 4px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* Sits on the card's top border so both plan headings stay level. */
.lm-article .plan-badge {
	position: absolute;
	top: 0;
	right: 16px;
	transform: translateY(-50%);
	background: var(--accent);
	color: #fff;
	border-radius: 999px;
	padding: 2px 12px;
	font-size: 1.125rem;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.lm-article .plan h3 { font-size: 1.3125rem; margin: 0 0 14px; }

.lm-article .plan-bar {
	display: flex;
	height: 40px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--paper-deep);
}

.lm-article .plan-seg {
	display: flex;
	align-items: center;
	padding: 0 10px;
	color: #fff;
	font-size: 1.125rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
}

.lm-article .plan-seg + .plan-seg { border-left: 2px solid #fff; }
.lm-article .plan-seg--self { background: #c46a3d; }
.lm-article .plan-seg--tour { background: var(--accent); }
.lm-article .plan-seg--guided { background: #1f6b45; }
.lm-article .plan-seg--maybe {
	color: #1f6b45;
	background: repeating-linear-gradient(135deg, rgba(31, 107, 69, 0.28) 0 6px, rgba(31, 107, 69, 0.10) 6px 12px);
}

.lm-article .plan-scale {
	position: relative;
	height: 22px;
	color: var(--muted);
	font-size: 1.125rem;
	font-variant-numeric: tabular-nums;
	margin: 6px 0 14px;
}

.lm-article .plan-scale span { white-space: nowrap; position: absolute; top: 0; transform: translateX(-50%); }
.lm-article .plan-scale span:first-child { transform: none; }
.lm-article .plan-scale span:last-child { transform: translateX(-100%); }

.lm-article .plan-facts { margin: 0; }

.lm-article .plan-facts div {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 10px;
	padding: 8px 0;
	border-top: 1px solid var(--line);
	font-size: 1.125rem;
	line-height: 1.4;
}

.lm-article .plan-facts dt { color: var(--muted); }
.lm-article .plan-facts dd { margin: 0; font-weight: 600; }

.lm-article .plan-note {
	margin: auto 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 1.125rem;
	line-height: 1.45;
}

.lm-article .pill-links { display: flex; flex-wrap: wrap; gap: 10px; }

.lm-article .pill-link {
	display: inline-block;
	padding: 9px 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: var(--ink);
	font-size: 1.125rem;
	font-weight: 600;
	text-decoration: none;
}

.lm-article .pill-link:hover { border-color: var(--accent); color: var(--accent); }
.lm-article .pill-link--main { background: var(--accent); border-color: var(--accent); color: #fff; }
.lm-article .pill-link--main:hover { color: #fff; opacity: 0.9; }

/* Pros and cons */
.lm-article .pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0 8px; }
.lm-article .pros-cons > div { background: #fff; border-radius: 12px; padding: 18px 20px; }
.lm-article .pros-cons h3 { font-size: 1.125rem; margin: 0 0 8px; }
.lm-article .pros-cons ul { list-style: none; margin: 0; padding: 0; }
.lm-article .pros-cons li { position: relative; padding-left: 22px; font-size: 1.125rem; line-height: 1.45; margin-bottom: 8px; }
.lm-article .pros-cons li::before { position: absolute; left: 0; top: 0; font-weight: 600; }
.lm-article .pros li::before { content: "+"; color: #1f6b45; }
.lm-article .cons li::before { content: "\2212"; color: #9a6b12; }

/* FAQ, method, disclosure */
.lm-article .faq-list h3 { margin-top: 24px; }
.lm-article .method { background: var(--paper-deep); border-radius: 12px; padding: 20px 24px; margin-top: 48px; }
.lm-article .method h2 { font-size: 1.375rem; margin: 0 0 10px; }
.lm-article .method ul { margin: 0 0 12px; padding-left: 20px; font-size: 1.125rem; }
.lm-article .method p { font-size: 1.125rem; margin: 0; }
.lm-article .disclosure { color: var(--muted); font-size: 1.125rem; }

/* Author cards */
.lm-article .authors { display: grid; gap: 16px; margin: 20px 0 8px; }

.lm-article .author {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	background: #fff;
	border-radius: 16px;
	padding: 22px;
}

.lm-article .author img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; display: block; }
.lm-article .author h3 { font-size: 1.375rem; margin: 0; }

.lm-article .author-role {
	color: var(--accent);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 2px 0 10px;
}

.lm-article .author p { font-size: 1.125rem; }
.lm-article .profile-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }

.lm-article .profile-links a {
	display: inline-block;
	padding: 5px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--ink);
	font-size: 1.125rem;
	font-weight: 600;
	text-decoration: none;
}

.lm-article .profile-links a:hover { border-color: var(--accent); color: var(--accent); }

.lm-article .author-strip {
	border-top: 1px solid var(--line);
	margin-top: 48px;
	padding-top: 8px;
}

.lm-article .author-strip__people { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0 16px; }
.lm-article .author-strip__person { display: flex; gap: 12px; align-items: center; color: var(--ink); text-decoration: none; }
.lm-article .author-strip__person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.lm-article .author-strip__person strong { display: block; font-size: 1.125rem; }
.lm-article .author-strip__person span { color: var(--muted); font-size: 1.125rem; }

/* About facts row */
.lm-article .facts-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 20px 0 24px;
	list-style: none;
	padding: 0;
}

.lm-article .facts-row li { background: #fff; border-radius: 12px; padding: 14px 16px; margin: 0; }
.lm-article .facts-row strong { display: block; font-family: var(--font-display); font-size: 1.75rem; line-height: 1.1; }
.lm-article .facts-row span { color: var(--muted); font-size: 1.125rem; line-height: 1.3; }

@media (max-width: 620px) {
	.lm-article .plans { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.lm-article { font-size: 1.125rem; padding-top: 28px; }
	.lm-article h2 { font-size: 1.5rem; }
	.lm-article th,
	.lm-article td { padding: 8px; }
	.lm-article .summary { padding: 24px 20px; border-radius: 16px; }
	.lm-article .stats li { padding: 0 10px; }
	.lm-article .stat-label { font-size: 1.125rem; }
	.lm-article figcaption { font-size: 1.125rem; padding: 36px 12px 10px; }
	.lm-article .media-split { grid-template-columns: 1fr; gap: 20px; }
	.lm-article .route-list li { grid-template-columns: 54px 18px minmax(0, 1fr); column-gap: 10px; }
	.lm-article .route-time { font-size: 1.125rem; }
	.lm-article .route-stop a { font-size: 1.125rem; }
	.lm-article .route-what { font-size: 1.125rem; }
	.lm-article .pros-cons { grid-template-columns: 1fr; }
	.lm-article .author { grid-template-columns: 1fr; }
	.lm-article .author img { width: 104px; height: 104px; }
	.lm-article .facts-row strong { font-size: 1.375rem; }
}

/* Translated timeline labels must remain readable on narrow screens. */
@media (max-width: 600px) {
	.lm-article .plan-bar { height: auto; min-height: 40px; }
	.lm-article .plan-seg { min-width: 0; white-space: normal; padding: 6px 10px; }
}