/* ══════════════════════════════════════════════════════════════════
   Articles: /articles (list) and /articles/{slug} (one article).
   Data from the shared org `articles` DB (ArticlesSQL). Built on the
   refresh.css design tokens (--cl coral, --g sage, --cr cream,
   --md brown, --dp slate, --br, --sf) and the 6-step type scale.
   ══════════════════════════════════════════════════════════════════ */

/* ── list hero (slate band) ── */
.ar-list-hero { padding-top:3.5rem; padding-bottom:3.5rem; }
.ar-list-hero .ar-hero-sub { max-width:none; }
.ar-hero-sub {
	font-family:'Cormorant Garamond', serif;
	font-style:italic;
	font-size:var(--fs-h3);
	color:var(--cr);
	opacity:0.85;
	margin-top:0.75rem;
	max-width:60ch;
}

/* ── article header: sits over the reading column on the cream page, like
   the opening of a journal essay. Kicker → title → subtitle → rule → byline. ── */
.ar-head {
	max-width:720px;
	margin:0 auto 3rem;
	text-align:center;
}
.ar-kicker {
	font-family:'Jost', sans-serif;
	font-size:var(--fs-h5);
	letter-spacing:0.22em;
	text-transform:uppercase;
	font-weight:500;
	margin-bottom:1.5rem;
}
.ar-kicker a { color:var(--g); text-decoration:none; }
.ar-kicker a:hover { color:var(--cl); }
.ar-head-title {
	font-family:'Cormorant Garamond', serif;
	font-weight:400;
	font-size:var(--fs-h1);
	line-height:1.15;
	color:var(--dp);
	text-wrap:balance;
	margin-inline:auto;
	max-width:22ch;
}
.ar-head-sub {
	font-family:'Cormorant Garamond', serif;
	font-style:italic;
	font-size:var(--fs-h3);
	line-height:1.4;
	color:var(--md);
	text-wrap:balance;
	margin-top:0.85rem;
}
/* thin sage hairlines either side of a small coral dot */
.ar-head-rule {
	display:flex;
	align-items:center;
	justify-content:center;
	gap:0.75rem;
	margin:1.9rem auto 1.6rem;
}
.ar-head-rule::before, .ar-head-rule::after {
	content:'';
	width:56px;
	height:1px;
	background:var(--g);
	opacity:0.55;
}
.ar-head-rule span { width:5px; height:5px; border-radius:50%; background:var(--cl); }
.ar-byline {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	gap:0.35rem 0.6rem;
	font-family:'Jost', sans-serif;
	font-size:var(--fs-h5);
	letter-spacing:0.14em;
	text-transform:uppercase;
	color:var(--md);
}
.ar-byline-img {
	width:40px;
	height:40px;
	border-radius:50%;
	object-fit:cover;
	margin-right:0.25rem;
	box-shadow:0 0 0 1px var(--br);
}
.ar-byline-name { color:var(--dp); font-weight:500; }

/* gentle staggered load-in for the header + lead image */
@keyframes ar-rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.ar-head > *, .ar-figure { animation:ar-rise 0.7s cubic-bezier(.2,.7,.2,1) both; }
.ar-head > :nth-child(2) { animation-delay:0.06s; }
.ar-head > :nth-child(3) { animation-delay:0.12s; }
.ar-head > :nth-child(4) { animation-delay:0.18s; }
.ar-head > :nth-child(5) { animation-delay:0.22s; }
.ar-figure { animation-delay:0.3s; }
@media (prefers-reduced-motion:reduce) { .ar-head > *, .ar-figure { animation:none; } }

/* ── list ── */
.ar-list { list-style:none; max-width:1000px; margin-inline:auto; }
.ar-row { border-top:1px solid var(--br); }
.ar-row:last-child { border-bottom:1px solid var(--br); }
/* image on the left, text on the right */
.ar-link {
	display:grid;
	grid-template-columns:minmax(0, 320px) minmax(0, 1fr);
	gap:2.5rem;
	align-items:center;
	padding:2.25rem 0;
	text-decoration:none;
	color:inherit;
}
.ar-thumb {
	position:relative;
	aspect-ratio:3 / 2;
	overflow:hidden;
	background:var(--sf);
	box-shadow:0 0 0 0.5px var(--br);
}
.ar-thumb img {
	width:100%; height:100%;
	object-fit:cover;
	display:block;
	transition:transform 0.7s cubic-bezier(.2,.7,.2,1);
}
.ar-link:hover .ar-thumb img, .ar-link:focus-visible .ar-thumb img { transform:scale(1.04); }
/* no lead image: a quiet tinted panel with the article header's ornament */
.ar-thumb--blank {
	display:flex; align-items:center; justify-content:center;
	background:linear-gradient(135deg, var(--sf), rgba(108,158,136,0.14));
}
.ar-thumb-mark { display:flex; align-items:center; gap:0.75rem; }
.ar-thumb-mark::before, .ar-thumb-mark::after { content:''; width:44px; height:1px; background:var(--g); opacity:0.55; }
.ar-thumb-mark span { width:6px; height:6px; border-radius:50%; background:var(--cl); }
.ar-text { min-width:0; }
.ar-title { transition:color 0.2s; }
.ar-link:hover .ar-title, .ar-link:focus-visible .ar-title { color:var(--g); }
.ar-meta {
	font-family:'Jost', sans-serif;
	font-size:var(--fs-h5);
	letter-spacing:0.16em;
	text-transform:uppercase;
	color:var(--g);
	font-weight:600;
	margin-bottom:0.6rem;
}
.ar-title {
	font-family:'Cormorant Garamond', serif;
	font-size:clamp(1.6rem, 2vw, 2.1rem);
	line-height:1.15;
	color:var(--dp);
	margin-bottom:0.55rem;
}
.ar-blurb { color:var(--md); max-width:66ch; margin-bottom:0.9rem; }
.ar-more {
	display:inline-flex;
	align-items:center;
	gap:0.55rem;
	font-family:'Jost', sans-serif;
	font-size:13px;
	font-weight:600;
	letter-spacing:0.14em;
	text-transform:uppercase;
	color:var(--cl);
}
.ar-arrow { transition:transform 0.25s ease; }
.ar-link:hover .ar-arrow { transform:translateX(5px); }

/* ── article body ── */
.ar-figure { max-width:720px; margin:0 auto 3rem; }
.ar-figure img { width:100%; height:auto; display:block; }
.ar-figure figcaption { font-size:var(--fs-h5); color:var(--md); margin-top:0.6rem; }
.ar-addendum {
	max-width:720px;
	margin:0 auto 2rem;
	padding:0.9rem 1.25rem;
	background:var(--sf);
	border-left:3px solid var(--g);
	color:var(--md);
	font-style:italic;
}

.ar-prose { max-width:720px; margin-inline:auto; color:var(--dp); line-height:1.8; }
.ar-prose p { margin-bottom:1.35rem; }
.ar-prose p:last-child { margin-bottom:0; }
.ar-prose h2, .ar-prose h3, .ar-prose h4 {
	font-family:'Cormorant Garamond', serif;
	color:var(--dp);
	line-height:1.2;
	margin:2.5rem 0 1rem;
}
.ar-prose h2 { font-size:var(--fs-h2); }
.ar-prose h3 { font-size:var(--fs-h3); }
.ar-prose h4 { font-size:var(--fs-h4); }
.ar-prose ul, .ar-prose ol { margin:0 0 1.35rem 1.5rem; }
.ar-prose li { margin-bottom:0.4rem; }
.ar-prose blockquote {
	margin:2rem 0;
	padding:0.25rem 0 0.25rem 1.5rem;
	border-left:3px solid var(--g);
	color:var(--md);
	font-style:italic;
}
.ar-prose blockquote p { margin-bottom:0.9rem; }
.ar-prose hr { border:0; border-top:1px solid var(--br); margin:2.5rem auto; width:40%; }
.ar-prose img { max-width:100%; height:auto; }

.ar-footnotes {
	margin-top:3rem;
	padding-top:2rem;
	border-top:1px solid var(--br);
	font-size:15px;
	color:var(--md);
}

/* ── author card ── */
.ar-author {
	max-width:720px;
	margin:4rem auto 0;
	padding:2rem;
	background:var(--sf);
	border:0.5px solid var(--br);
	border-top:3px solid var(--cl);
	display:flex;
	gap:1.75rem;
	align-items:flex-start;
}
.ar-author-img {
	width:112px;
	height:112px;
	object-fit:cover;
	border-radius:50%;
	flex-shrink:0;
}
.ar-author .sec-label { margin-bottom:0.4rem; }
.ar-author-name {
	font-family:'Cormorant Garamond', serif;
	font-size:var(--fs-h3);
	line-height:1.2;
	color:var(--dp);
}
.ar-author-sub { font-size:var(--fs-h5); color:var(--md); margin-top:0.2rem; }
.ar-author-bio { margin-top:0.9rem; font-size:15px; color:var(--md); line-height:1.7; }
/* Many builder bios open with the author's name as a heading; the card already shows it. */
.ar-author-bio > h2:first-child, .ar-author-bio > h3:first-child { display:none; }
.ar-author-bio p { margin-bottom:0.8rem; }
.ar-author-bio p:last-child { margin-bottom:0; }

.ar-backlink {
	max-width:720px;
	margin:2.5rem auto 0;
	font-family:'Jost', sans-serif;
	font-size:var(--fs-h5);
	letter-spacing:0.1em;
	text-transform:uppercase;
}
.ar-backlink a { color:var(--g); text-decoration:none; }
.ar-backlink a:hover { color:var(--cl); }

/* ── empty state ── */
.ar-empty { max-width:640px; margin-inline:auto; text-align:center; }
.ar-empty-title {
	font-family:'Cormorant Garamond', serif;
	font-size:var(--fs-h2);
	color:var(--dp);
	margin:0.75rem 0 1rem;
}

/* ── responsive ── */
@media (max-width:900px) {
	.ar-head { margin-bottom:2.25rem; }
	.ar-link { grid-template-columns:minmax(0, 220px) minmax(0, 1fr); gap:1.75rem; }
	.ar-author { flex-direction:column; gap:1.25rem; padding:1.5rem; }
	.ar-author-img { width:88px; height:88px; }
}
@media (max-width:600px) {
	/* stack: image on top at full width */
	.ar-link { grid-template-columns:1fr; gap:1.25rem; padding:1.75rem 0; }
	.ar-thumb { aspect-ratio:16 / 9; }
}
@media (prefers-reduced-motion:reduce) { .ar-thumb img { transition:none; } }