/* Imported-article styles — palette-agnostic craft rules from .claude/skills/blog-post-design (rules A–I): the host theme keeps its fonts and colors; this file only brings rhythm, scale and element treatments, scoped to .rotf-article. */

/* ---- Type scale & rhythm (A1–A8) ---- */

.rotf-article {
	line-height: 1.65;
}

.rotf-article p,
.rotf-article li {
	max-inline-size: 66ch;
}

.rotf-article p {
	margin-block: 0 1.1em;
}

/* Asymmetric heading margins — space-above 2–3x space-below (A5). */
.rotf-article h2 {
	font-size: 1.45em;
	line-height: 1.2;
	margin-block: 2.5em 1em;
	text-align: left;
}

.rotf-article h3 {
	font-size: 1.15em;
	line-height: 1.25;
	margin-block: 2em 0.5em;
	text-align: left;
}

/* ---- Images & figures (B1–B4) ---- */

.rotf-article figure {
	margin: 2em 0;
}

.rotf-article img {
	max-width: 100%;
	height: auto;
	border-radius: 14px;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.rotf-article figcaption {
	font-size: 0.8em;
	opacity: 0.7;
	margin-top: 0.6em;
}

/* ---- Tables (C1–C4) ---- */

/* Contract markup wraps every table in a focusable scroll region (C1). */
.rotf-article .rotf-table-wrap {
	overflow: auto;
	margin: 2em 0;
}

.rotf-article .rotf-table-wrap:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.rotf-article table {
	border-collapse: collapse;
	width: auto; /* columns size to content — never stretched (C4) */
	font-size: 0.95em;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	margin: 0; /* the .rotf-table-wrap wrapper owns the block spacing */
}

/* Hairline horizontal rules only — no vertical borders, no zebra (C3).
   Fallback: a plain 1px solid border inherits currentColor; color-mix then
   mutes it to an 18% tint where supported. No hex anywhere. */
.rotf-article th,
.rotf-article td {
	border: 0;
	border-bottom: 1px solid;
	border-color: color-mix(in srgb, currentColor 18%, transparent);
	padding: 0.5em 0.75em;
	text-align: left;
}

/* ---- Quotes (D1–D2): citation treatment, never italic ---- */

.rotf-article blockquote {
	margin: 2em 0;
	padding-left: 1.25em;
	border-left: 4px solid;
	border-color: color-mix(in srgb, currentColor 25%, transparent);
	font-style: normal;
	font-size: 1em;
}

.rotf-article blockquote footer {
	font-size: 0.875em;
	opacity: 0.7;
	margin-top: 0.5em;
}

.rotf-article blockquote cite {
	font-style: normal;
}

/* ---- Links (E1) ---- */

.rotf-article a {
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.18em;
	text-decoration-skip-ink: auto;
}

/* ---- Mobile (H1) ---- */

@media (max-width: 640px) {
	.rotf-article h2 {
		font-size: 1.3em;
	}
}

/* Quick-answer capsule (skill: answer-first block AI assistants quote). */
.rotf-article .rotf-quick-answer {
	border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
	background: color-mix(in srgb, currentColor 4%, transparent);
	border-radius: 12px;
	padding: 1em 1.25em;
	margin: 0 0 1.6em;
}

.rotf-article .rotf-quick-answer p {
	margin: 0;
	max-inline-size: none;
}