/* Article-specific styles. The base (fonts, colours, header, footer, prose)
   comes from ../legal/_shared.css — url() inside a stylesheet resolves against
   the stylesheet, so its ../assets/fonts/ paths still land correctly from here. */

.meta{font-size:14px;color:var(--faint);margin:0 0 26px}
.meta time{color:var(--faint)}

.lede{font-size:19px;line-height:1.6;color:var(--navy);margin:0 0 26px}

/* A claim worth stopping on. Not a pull quote — a stated fact. */
.fact{
	background:var(--bg);border-left:3px solid var(--g1);
	padding:16px 20px;border-radius:0 10px 10px 0;margin:26px 0;
	font-size:16px;color:var(--navy);
}
.fact strong{font-weight:700}

.caution{
	background:#fff6f4;border-left:3px solid var(--coral);
	padding:16px 20px;border-radius:0 10px 10px 0;margin:26px 0;font-size:15px;
}

figure{margin:26px 0}
figcaption{font-size:13.5px;color:var(--faint);margin-top:8px}

code{
	background:var(--bg);border:1px solid var(--line);
	padding:1px 6px;border-radius:4px;font-size:.92em;
	font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* Article list on the index. */
.posts{list-style:none;margin:32px 0 0;padding:0}
.posts li{margin:0 0 4px;padding:22px 0;border-bottom:1px solid var(--line)}
.posts li:first-child{padding-top:0}
.posts h2{font-size:21px;margin:0 0 6px}
.posts h2 a{color:var(--navy);text-decoration:none}
.posts h2 a:hover{color:var(--g2)}
.posts p{margin:0 0 6px;font-size:15px}
.posts .meta{margin:0;font-size:13.5px}

/* Back to the product, at the end of a piece. Labelled, so nobody has to
   wonder whether they just read an advert. */
.about-box{
	border:1px solid var(--line);border-radius:12px;
	padding:20px 22px;margin:40px 0 0;font-size:15px;background:#fff;
}
.about-box h2{font-size:17px;margin:0 0 8px}
.about-box p:last-child{margin-bottom:0}

.backlink{display:inline-block;margin:34px 0 0;font-size:14px}

@media (max-width:640px){
	.lede{font-size:17px}
	.posts h2{font-size:18px}
}