/* Blog platform stylesheet: warm editorial. Cream paper, near-black ink,
   one burnt-orange accent, Tanker display headlines, hairline rules instead
   of boxes. Mobile-first; wider viewports only widen what the phone layout
   established. Both palettes share every component rule via the tokens. */

@font-face {
	font-family: "Tanker";
	src: url("/assets/fonts/Tanker-Regular.woff2") format("woff2"),
	     url("/assets/fonts/Tanker-Regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("/assets/fonts/JetBrainsMono-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("/assets/fonts/JetBrainsMono-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--paper: #faf6ef;
	--ink: #1d1811;
	--ink-soft: #6f6659;
	--line: #e2dbcb;
	--line-strong: #c9c0ab;
	--accent: #b3491d;
	--accent-text: #a03d14;
	--accent-ink: #fdf9f2;
	--ok: #2c6e3f;
	--danger: #a03226;
	--code-bg: #24211c;
	--code-ink: #f2ede3;

	/* One spacing scale; a section boundary is --s6, related things --s2/3. */
	--s1: 0.25rem;
	--s2: 0.5rem;
	--s3: 1rem;
	--s4: 1.5rem;
	--s5: 2.5rem;
	--s6: 4rem;

	/* One type scale; every font-size in this file is one of these. */
	--text-label: 0.72rem;
	--text-fine: 0.8rem;
	--text-small: 0.9rem;
	--text-ui: 0.95rem;
	--text-read: 1.05rem;
	--text-title: 1.3rem;
	--text-heading: 1.6rem;
	--text-display: 2.2rem;

	--radius: 2px;
	--content-width: 46rem;
	--display: "Tanker", "Georgia", serif;
	--mono: "JetBrains Mono", ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
	:root {
		--paper: #171310;
		--ink: #ece5d8;
		--ink-soft: #a89e8d;
		--line: #332d24;
		--line-strong: #4c4436;
		--accent: #c95a28;
		--accent-text: #e0793f;
		--accent-ink: #1c1006;
		--ok: #7fc493;
		--danger: #e07a6d;
		--code-bg: #211d18;
		--code-ink: #f2ede3;
	}
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
	margin: 0;
	color: var(--ink);
	font: 16px/1.65 system-ui, -apple-system, "Segoe UI", sans-serif;
	-webkit-text-size-adjust: 100%;
}

a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-text); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/* The skip link: the first tab stop on every page, visible only while it
   holds focus. */
.skip {
	position: absolute;
	left: -999px;
	top: 0;
	z-index: 10;
	background: var(--paper);
	color: var(--ink);
	padding: var(--s2) var(--s3);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
}
.skip:focus { left: var(--s3); }

/* ── Masthead ─────────────────────────────────────────────────────────── */
/* One quiet row on the paper itself: Tanker wordmark left, text links
   right, a single hairline underneath. The only filled element is the
   notification badge. */
.topbar { border-bottom: 1px solid var(--line); }
.topbar__nav {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: var(--s3);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2) var(--s4);
}
.topbar__brand {
	font-family: var(--display);
	font-size: var(--text-heading);
	line-height: 1;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: var(--ink);
	margin-right: auto;
	padding: var(--s2) 0;
}
.topbar__brand:hover { color: var(--ink); }
.topbar__account, .topbar__menu {
	display: flex;
	align-items: center;
	gap: var(--s2) var(--s4);
}
/* On a phone the masthead keeps wordmark and disc on one row and drops the
   primary links to a row of their own beneath it; wider screens fit them
   inline. They are never repeated in the account menu. */
.topbar__menu {
	order: 3;
	width: 100%;
	justify-content: space-between;
	border-top: 1px solid var(--line);
	padding-top: var(--s2);
}
.topbar__nav a, .topbar__menu a {
	text-decoration: none;
	color: var(--ink-soft);
	padding: var(--s2) 0;
	font-size: var(--text-ui);
}
.topbar__nav a:hover { color: var(--accent-text); }
.topbar__nav a[data-accent] { color: var(--accent-text); font-weight: 600; }

/* The one action in the masthead: Write, outlined rather than filled, so
   the quiet row stays quiet and the shape still says button. */
.topbar__nav .topbar__write {
	padding: var(--s1) var(--s3);
	border: 1px solid var(--accent);
	border-radius: var(--radius);
	color: var(--accent-text);
	font-weight: 600;
}
.topbar__nav .topbar__write:hover { background: var(--accent); color: var(--accent-ink); }
.topbar__nav .topbar__brand { color: var(--ink); font-size: var(--text-heading); }

@media (min-width: 48rem) {
	.topbar__menu {
		order: 0;
		width: auto;
		justify-content: flex-start;
		border-top: 0;
		padding-top: 0;
	}
}
/* The account disc: initials on ink, the mobius shape. An unread count
   rides its shoulder as the one filled accent in the masthead. */
.topbar__me {
	position: relative;
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ink);
	color: var(--paper);
	display: grid;
	place-items: center;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 20%, transparent);
	cursor: pointer;
}
/* The disc keeps its own colours on hover: the shared button:hover rule
   paints text --ink, which is exactly what the disc is filled with. */
.topbar__me:hover {
	color: var(--paper);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 20%, transparent), 0 0 0 2px var(--accent);
}
.topbar__initials {
	font-family: var(--mono);
	font-size: var(--text-label);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.topbar__badge {
	position: absolute;
	top: -0.3rem;
	right: -0.4rem;
	background: var(--accent);
	color: var(--accent-ink);
	border-radius: 999px;
	font-size: var(--text-label);
	font-family: var(--mono);
	font-weight: 700;
	line-height: 1.5;
	min-width: 1.5em;
	text-align: center;
	padding: 0 0.3em;
	box-shadow: 0 0 0 2px var(--paper);
}

/* The account menu: a native popover pinned under the masthead's right
   edge; no script involved. The masthead is a centred --content-width
   column, so pinning to the viewport edge would leave the disc behind on
   anything wider; the max() lands on the nav's right padding edge instead
   and collapses back to --s3 on a phone. */
.memenu {
	position: fixed;
	top: 4.25rem;
	right: max(var(--s3), calc(50vw - (var(--content-width) / 2) + var(--s3)));
	bottom: auto;
	left: auto;
	margin: 0;
	min-width: 14rem;
	background: var(--paper);
	color: var(--ink);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	box-shadow: 0 12px 32px color-mix(in srgb, var(--ink) 18%, transparent);
	padding: var(--s2) 0;
}
/* Where anchor positioning exists the menu tracks the disc itself rather
   than arithmetic about the column width. */
@supports (anchor-name: --a) {
	.topbar__me { anchor-name: --me-disc; }
	.memenu {
		position-anchor: --me-disc;
		position-area: block-end span-inline-start;
		top: auto;
		right: auto;
		margin-top: var(--s2);
	}
}
.memenu__who {
	display: flex;
	flex-direction: column;
	gap: var(--s1);
	margin: 0;
	padding: var(--s2) var(--s3) var(--s3);
	border-bottom: 1px solid var(--line);
}
.memenu__name { font-weight: 600; }
.memenu__handle { color: var(--ink-soft); font-family: var(--mono); font-size: var(--text-label); }
.memenu a {
	display: block;
	padding: var(--s2) var(--s3);
	text-decoration: none;
	color: var(--ink);
	font-size: var(--text-ui);
}
.memenu a:hover { background: var(--line); color: var(--ink); }
.memenu__count {
	color: var(--accent-text);
	font-family: var(--mono);
	font-size: var(--text-label);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.memenu .topbar__logout { display: block; border-top: 1px solid var(--line); margin-top: var(--s2); padding-top: var(--s2); }
.memenu .topbar__logout button {
	width: 100%;
	justify-content: flex-start;
	min-height: 0;
	border: 0;
	background: none;
	margin: 0;
	padding: var(--s2) var(--s3);
	color: var(--danger);
	font: inherit;
	font-size: var(--text-ui);
	line-height: inherit;
}
.memenu .topbar__logout button:hover { background: var(--line); }
.topbar__logout button:hover { color: var(--accent-text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

.content {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: var(--s5) var(--s3) var(--s6);
}

.foot {
	border-top: 1px solid var(--line);
	color: var(--ink-soft);
	font-size: var(--text-small);
	text-align: center;
	padding: var(--s4) var(--s3);
}
.foot p { margin: 0; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
/* One shape: barely-rounded, one height. The accent fill is reserved for
   the page's single primary action; everything else is ink and hairline. */
button, [data-primary], [data-quiet], [data-danger] {
	font: 600 1rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
	border-radius: var(--radius);
	border: 1px solid var(--line-strong);
	background: transparent;
	color: var(--ink);
	padding: 0 var(--s4);
	min-height: 44px;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
button:hover, [data-quiet]:hover { border-color: var(--ink); color: var(--ink); }
[data-primary] {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}
[data-primary]:hover { background: var(--accent-text); border-color: var(--accent-text); color: var(--accent-ink); }
[data-quiet] { border-color: transparent; color: var(--ink-soft); }
[data-quiet]:hover { border-color: transparent; color: var(--accent-text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
[data-danger] { border-color: var(--danger); color: var(--danger); background: transparent; }
[data-danger]:hover { background: var(--danger); color: var(--paper); }
button:active, [data-primary]:active, [data-danger]:active { transform: translateY(1px); }

/* An inline text action beside a button: same baseline, arrow affordance. */
.linkaction {
	color: var(--ink);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-underline-offset: 3px;
	padding: var(--s2) 0;
}

/* ── Type ─────────────────────────────────────────────────────────────── */
h1, h2 { font-weight: 600; line-height: 1.15; }

.section__title {
	font-family: var(--display);
	font-weight: 400;
	font-size: var(--text-heading);
	letter-spacing: 0.02em;
	margin: 0 0 var(--s2);
}
.section__hint { color: var(--ink-soft); margin: 0 0 var(--s4); }
.section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	margin-bottom: var(--s4);
}
.section__head .section__title { margin: 0; }
.section__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }

/* The empty-feed page: what fills it, and somewhere to go meanwhile. */
.onboard {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: var(--s5) 0;
}
.onboard__lede { margin: 0 0 var(--s4); color: var(--ink-soft); font-size: var(--text-read); }
.onboard__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.onboard__steps li { color: var(--ink-soft); }
.onboard__steps a { color: var(--ink); font-weight: 600; }
.onboard__steps .card__tag { font-weight: 400; margin-right: var(--s2); }
section + section, .tagcloud + section { margin-top: var(--s6); }

/* The meta line under titles: small mono caps, one baseline. */
.card__meta, .article__meta, .embed__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s1) var(--s3);
	color: var(--ink-soft);
	font-family: var(--mono);
	font-size: var(--text-label);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.card__meta a, .article__meta a, .embed__meta a { color: var(--ink-soft); text-decoration: none; }
.card__meta a:hover, .article__meta a:hover, .embed__meta a:hover { color: var(--accent-text); }
.card__tag { color: var(--accent-text) !important; }
/* The byline disc: the author's initials at meta scale, the topbar disc in
   miniature, beside the handle on cards, the article byline and comments. */
.byline__disc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--mono);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	vertical-align: middle;
	margin-right: var(--s1);
}

/* ── Reactions ────────────────────────────────────────────────────────── */
/* Like and bookmark, on a feed card and on the article itself. Quiet until
   pressed: only the reader's own state earns the accent. */
.react { display: inline-flex; align-items: center; gap: var(--s2); }
.react form { display: inline-flex; margin: 0; }
.react__btn {
	min-height: 28px;
	padding: 0 var(--s2);
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: var(--ink-soft);
	font: 600 var(--text-label)/1 var(--mono);
	letter-spacing: 0.06em;
	display: inline-flex;
	align-items: center;
	gap: var(--s1);
}
.react__btn:hover { border-color: var(--line-strong); color: var(--ink); }
.react__btn--on { color: var(--accent-text); border-color: var(--accent); }
.react__btn[disabled] { opacity: 0.5; cursor: progress; }
.react__word { text-transform: uppercase; }
.react__quiet { color: var(--ink-soft); font-family: var(--mono); font-size: var(--text-label); }
/* Scoped to the page body, same as the other submit-margin reset. */
main .react form button[type="submit"] { margin-top: 0; }

.react--article {
	display: flex;
	gap: var(--s3);
	margin: var(--s4) 0 0;
}
.react--article .react__btn { min-height: 36px; padding: 0 var(--s3); font-size: var(--text-fine); }

/* ── Landing hero ─────────────────────────────────────────────────────── */
/* The page padding already provides the breathing room above; adding more
   here would stack into the accidental double gap this replaced. */
.hero { padding: 0; }
.hero__kicker {
	font-family: var(--mono);
	font-size: var(--text-label);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink-soft);
	margin: 0 0 var(--s3);
}
.hero h1 {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(2.8rem, 9vw, 4.5rem);
	line-height: 0.95;
	letter-spacing: 0.01em;
	margin: 0;
	max-width: 16ch;
}
.hero__rule {
	width: 3.5rem;
	height: 4px;
	background: var(--accent);
	border: 0;
	margin: var(--s4) 0;
}
.hero p { color: var(--ink-soft); font-size: var(--text-read); max-width: 32rem; margin: 0; }
.hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--s4);
	margin-top: var(--s5);
}

/* Tags as a browsing line, not pills. */
.tagcloud {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s2) var(--s3);
	margin: var(--s6) 0 0;
	padding-top: var(--s4);
	border-top: 1px solid var(--line);
	font-family: var(--mono);
	font-size: var(--text-fine);
	letter-spacing: 0.04em;
}
.tagcloud__label {
	color: var(--ink-soft);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: var(--text-label);
}
.tagcloud__tag { color: var(--accent-text); text-decoration: none; }
.tagcloud__tag:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Feed: editorial rows, not boxes ──────────────────────────────────── */
.feed { border-top: 1px solid var(--line); }
.card { padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.card__head { margin: 0; }
.card__title { font-size: var(--text-title); line-height: 1.25; margin: 0; font-weight: 600; }
.card__title a { text-decoration: none; }
.card__title a:hover { color: var(--accent-text); }
.card__lede { color: var(--ink-soft); margin: var(--s2) 0 0; }
.card__meta { margin-top: var(--s2); }
.feed__empty {
	color: var(--ink-soft);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: var(--s5) 0;
	text-align: center;
}
.pager { text-align: center; margin: var(--s4) 0 0; }
.pager a { font-family: var(--mono); font-size: var(--text-fine); text-transform: uppercase; letter-spacing: 0.1em; }

/* ── Profile and blog heads ───────────────────────────────────────────── */
.profile__head, .blog__head { margin-bottom: var(--s5); }
.profile__head h1, .blog__head h1 {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(2rem, 7vw, 3rem);
	line-height: 1.05;
	margin: 0;
}
.profile__handle { color: var(--ink-soft); margin: var(--s1) 0 0; font-family: var(--mono); font-size: var(--text-small); }
.profile__bio, .blog__lede { margin: var(--s3) 0 0; color: var(--ink-soft); max-width: 34rem; }
.profile__stats, .blog__stats {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--s2) var(--s4);
	margin: var(--s3) 0 0;
	color: var(--ink-soft);
	font-family: var(--mono);
	font-size: var(--text-fine);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.profile__stats strong, .blog__stats strong { color: var(--ink); font-weight: 700; }
.blog__badge { border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 var(--s2); }
.profile__head form, .blog__actions { margin-top: var(--s4); }
/* The page's own actions float beside the title on wide screens and sit
   above it on a phone; the lists below them are read-only for everyone.
   Lightweight chips rather than full buttons: the title is the hero. */
.profile__actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin: 0 0 var(--s3); }
.profile__actions a {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	padding: var(--s1) var(--s3);
	min-height: 32px;
	font-size: var(--text-small);
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
	transition: border-color 120ms ease, color 120ms ease;
}
.profile__actions a:hover { border-color: var(--ink); }
.profile__actions a[data-accent] { color: var(--accent-text); }
.profile__actions a[data-accent]:hover { border-color: var(--accent-text); }
@media (min-width: 48rem) {
	.profile__head { position: relative; }
	.profile__actions { position: absolute; top: 0; right: 0; margin: 0; }
}
.blog__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.blog__actions a { font-family: var(--mono); font-size: var(--text-fine); text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; color: var(--ink-soft); }
.blog__actions a:hover { color: var(--accent-text); }

/* ── Lists: blogs, members, drafts, notifications, audit ──────────────── */
.bloglist, .memberlist, .draftlist, .notify, .audit__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line);
}
.bloglist__row, .memberlist__row, .draftlist__row, .notify__row, .audit__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s1) var(--s3);
	align-items: baseline;
	padding: var(--s3) 0;
	border-bottom: 1px solid var(--line);
}
.bloglist__row > a, .draftlist__row > a { font-weight: 600; text-decoration: none; }
.bloglist__row > a:hover, .draftlist__row > a:hover { color: var(--accent-text); }
.bloglist__lede, .draftlist__meta { color: var(--ink-soft); font-size: var(--text-small); }
.bloglist__stats {
	margin-left: auto;
	color: var(--ink-soft);
	font-family: var(--mono);
	font-size: var(--text-label);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.bloglist__actions { flex-basis: 100%; display: flex; gap: var(--s3); }
.bloglist__actions a { font-size: var(--text-small); color: var(--ink-soft); }
.notify__row { display: block; }
.notify__row--unread { border-left: 3px solid var(--accent); padding-left: var(--s3); }
.notify__row time, .audit__row time { color: var(--ink-soft); font-family: var(--mono); font-size: var(--text-label); }
.notify__row time { display: block; margin-top: var(--s2); }
.memberlist__form { display: inline-flex; gap: var(--s2); align-items: center; }
.memberlist__form button, .memberlist__form select { min-height: 36px; font-size: var(--text-small); }
.memberlist__role, .draftlist__status {
	font-family: var(--mono);
	font-size: var(--text-label);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ink-soft);
}
.memberlist__token { font-family: var(--mono); font-size: var(--text-label); word-break: break-all; color: var(--ink-soft); }
.draftlist__status { border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 var(--s2); }
.draftlist__status--published { color: var(--ok); border-color: var(--ok); }
.draftlist__review { color: var(--accent-text); font-family: var(--mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.08em; }

/* A listing with a row of actions on the right: the drafts queue and the
   trash. On a phone the table reflows to stacked rows - a four-column grid
   does not survive 390px - and the Actions cell keeps its own line. */
.actiontable {
	width: 100%;
	border-collapse: collapse;
	border-top: 1px solid var(--line);
}
.actiontable thead { display: none; }
.actiontable tr {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s1) var(--s3);
	padding: var(--s3) 0;
	border-bottom: 1px solid var(--line);
}
.actiontable th, .actiontable td { padding: 0; text-align: left; font-weight: 400; }
.actiontable th[scope="row"] { font-weight: 600; }
.actiontable th[scope="row"] a { text-decoration: none; }
.actiontable th[scope="row"] a:hover { color: var(--accent-text); }
.actiontable td time { color: var(--ink-soft); font-family: var(--mono); font-size: var(--text-label); }
.actiontable__actions {
	flex-basis: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s3);
}
/* The action cell holds links and one-button forms side by side; neither
   gets the block margin a page form's submit carries. */
.actiontable__actions form { display: inline-flex; margin: 0; }
.actiontable__actions a, .actiontable__actions button {
	font-size: var(--text-small);
	min-height: 32px;
	padding: 0 var(--s2);
}
.actiontable__actions a {
	color: var(--ink-soft);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}
.actiontable__actions a:hover { color: var(--accent-text); }
main .actiontable__actions button[type="submit"] { margin-top: 0; }

@media (min-width: 48rem) {
	.actiontable { display: table; }
	.actiontable thead { display: table-header-group; }
	.actiontable tbody { display: table-row-group; }
	.actiontable tr { display: table-row; padding: 0; border-bottom: 0; }
	.actiontable th, .actiontable td {
		display: table-cell;
		padding: var(--s3) var(--s3) var(--s3) 0;
		border-bottom: 1px solid var(--line);
		vertical-align: middle;
	}
	.actiontable thead th {
		font-family: var(--mono);
		font-size: var(--text-label);
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--ink-soft);
		padding-bottom: var(--s2);
	}
	/* The actions column takes only what it needs and never wraps; the
	   cell is a table-cell here, so the children flow inline and the base
	   rule's flex gap does not apply. */
	.actiontable .actiontable__actions {
		width: 1px;
		white-space: nowrap;
		text-align: right;
		padding-right: 0;
	}
	.actiontable td.actiontable__actions > * { vertical-align: middle; }
	.actiontable td.actiontable__actions > * + * { margin-left: var(--s3); }
}

/* The confirm panel: one question, two answers. A native modal dialog, so
   the backdrop and the focus trap come from the browser. */
.confirm {
	max-width: 26rem;
	margin: auto;
	padding: var(--s4);
	background: var(--paper);
	color: var(--ink);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	box-shadow: 0 12px 32px color-mix(in srgb, var(--ink) 18%, transparent);
}
.confirm::backdrop { background: color-mix(in srgb, var(--ink) 45%, transparent); }
.confirm__title {
	font-family: var(--display);
	font-weight: 400;
	font-size: var(--text-title);
	letter-spacing: 0.02em;
	margin: 0 0 var(--s2);
}
.confirm__body { margin: 0 0 var(--s4); color: var(--ink-soft); }
.confirm__actions { display: flex; justify-content: flex-end; gap: var(--s3); }

.tabs {
	display: flex;
	gap: var(--s4);
	border-bottom: 1px solid var(--line);
	margin-bottom: var(--s4);
	overflow-x: auto;
	font-family: var(--mono);
	font-size: var(--text-fine);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.tabs a { text-decoration: none; color: var(--ink-soft); padding: var(--s2) 0 var(--s3); white-space: nowrap; }
/* The tab bar already draws the rule; a list right under it keeps one line,
   not two. */
.tabs + .draftlist, .tabs + .feed, .tabs + .bloglist, .tabs + .notify { border-top: 0; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { border-bottom: 2px solid var(--accent); color: var(--ink); }

/* ── Forms ────────────────────────────────────────────────────────────── */
form label { display: block; margin: var(--s4) 0 var(--s2); font-weight: 600; }
input, textarea, select {
	font: inherit;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	padding: var(--s2) var(--s3);
	width: 100%;
	max-width: 100%;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
input[type="radio"], input[type="checkbox"] { width: auto; margin-right: var(--s2); accent-color: var(--accent); }
select { width: auto; }
/* Scoped to the page body: the masthead's sign-out is also a submit. */
main form button[type="submit"] { margin-top: var(--s4); }
.form__hint { color: var(--ink-soft); font-size: var(--text-small); margin: var(--s2) 0 0; }
.form__error {
	color: var(--danger);
	border-left: 3px solid var(--danger);
	padding: var(--s2) 0 var(--s2) var(--s3);
	margin: 0 0 var(--s3);
}
.form__ok { color: var(--ok); }
.form__choices { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s2) var(--s3) var(--s3); margin-top: var(--s4); }
.form__choices legend { font-weight: 600; padding: 0 var(--s2); }
.form__choices label { font-weight: 400; margin: var(--s2) 0; }

/* ── Search ───────────────────────────────────────────────────────────── */
/* One form, two homes: the /search page and a project's head. */
.search__form { display: flex; align-items: center; gap: var(--s2); max-width: 28rem; }
.search__form input[type="search"] { flex: 1; }
main .search__form button[type="submit"] { margin-top: 0; }
.blog__head .search__form, .search .search__form { margin-top: var(--s4); }

.auth { max-width: 26rem; }
.auth h1 { font-family: var(--display); font-weight: 400; font-size: var(--text-display); margin: 0 0 var(--s3); }
.auth__alt { margin-top: var(--s5); color: var(--ink-soft); }

/* ── Article page ─────────────────────────────────────────────────────── */
.article__banner {
	border: 1px solid var(--accent);
	border-left-width: 3px;
	border-radius: var(--radius);
	padding: var(--s2) var(--s3);
	color: var(--ink-soft);
	margin-bottom: var(--s4);
}
.article__head h1 {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(2.2rem, 7vw, 3.4rem);
	line-height: 1.05;
	margin: 0 0 var(--s3);
}
.article__meta { margin-bottom: var(--s2); }
.article__tags { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin: var(--s2) 0 0; }
.article__admin { display: flex; gap: var(--s3); margin: var(--s3) 0 0; font-size: var(--text-small); }
.article__admin a { color: var(--ink-soft); }
.article__reposts {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s2) var(--s3);
	margin: var(--s3) 0 0;
}
.article__repost {
	color: var(--ink-soft);
	font-family: var(--mono);
	font-size: var(--text-label);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
}
.article__repost:hover { color: var(--accent-text); }
/* The count keeps the action's register: one mono line, not a label beside
   a sentence. */
.article__reposts .react__quiet { text-transform: uppercase; letter-spacing: 0.08em; }
.article__content {
	margin-top: var(--s5);
	padding-top: var(--s4);
	border-top: 1px solid var(--line);
	overflow-wrap: break-word;
	font-size: var(--text-read);
}
.article__content h1, .article__content h2, .article__content h3 { line-height: 1.2; margin: var(--s5) 0 var(--s3); }
.article__content h1:first-child, .article__content h2:first-child { margin-top: 0; }
.article__content img { max-width: 100%; height: auto; border-radius: var(--radius); }
.article__content pre {
	overflow-x: auto;
	border-radius: var(--radius);
	padding: var(--s3) var(--s4);
	font-size: var(--text-small);
	line-height: 1.55;
	background: var(--code-bg);
	color: var(--code-ink);
}
.article__content code { font-family: var(--mono); }
.article__content p code, .article__content li code {
	background: var(--line);
	padding: 0.1em 0.35em;
	border-radius: var(--radius);
	font-size: 0.9em;
}
.article__content table { border-collapse: collapse; display: block; overflow-x: auto; }
.article__content th, .article__content td { border: 1px solid var(--line); padding: var(--s2) var(--s3); text-align: left; }
.article__content th { font-family: var(--mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.08em; }
.article__content blockquote {
	border-left: 3px solid var(--accent);
	margin: var(--s4) 0;
	padding-left: var(--s3);
	color: var(--ink-soft);
	font-style: italic;
}

/* A cited article, spliced in where its marker sat. The feed card's idiom
   moved into flowing prose: hairlines instead of a box, one quiet rule down
   the side so a reading list reads as a column of cards and not as a run of
   paragraphs. Quoted text already owns the accent rule, so this one is
   drawn in the line colour. */
.embed {
	margin: var(--s4) 0;
	padding: var(--s3) 0 var(--s3) var(--s3);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	border-left: 3px solid var(--line-strong);
	font-size: var(--text-ui);
}
.embed__title { font-size: var(--text-title); line-height: 1.25; font-weight: 600; margin: 0; }
.embed__title a { text-decoration: none; }
.embed__title a:hover { color: var(--accent-text); }
.embed__lede { color: var(--ink-soft); margin: var(--s2) 0 0; }
.embed__meta { margin: var(--s2) 0 0; }
/* The placeholder for an article the reader may not open: the same slot, in
   the same colour as the rest of the page's asides, saying only that. */
.embed--gone {
	border-left-color: var(--line);
	color: var(--ink-soft);
	font-style: italic;
}
.embed--gone p { margin: 0; }

/* ── Comments ─────────────────────────────────────────────────────────── */
/* A thread is two levels and no more, so the indent carries all the
   structure there is: a reply sits under its parent, and an answer to an
   answer lands beside it rather than a third step in. */
.comments { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line); }
.comments__title {
	font-family: var(--mono);
	font-size: var(--text-label);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink-soft);
	margin: 0 0 var(--s4);
}
.comments__list { list-style: none; margin: 0; padding: 0; }
.comment { padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.comment--reply { margin-left: var(--s5); border-left: 3px solid var(--line); padding-left: var(--s3); }
.comment__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s2) var(--s3);
	margin: 0 0 var(--s2);
	color: var(--ink-soft);
	font-family: var(--mono);
	font-size: var(--text-label);
}
/* A held comment only ever reaches its author and the moderators, so it is
   drawn as itself with a badge rather than hidden behind a placeholder. */
.comment--pending { opacity: 0.75; }
.comment__badge {
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	padding: 0 var(--s2);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
/* Review feedback stays in the thread after publish, tagged with the state
   word as stored: a square bordered mono tag, where the held badge is an
   uppercase pill, so the two read as different things. */
.comment__review {
	border: 1px solid var(--line-strong);
	padding: 0 var(--s2);
	letter-spacing: 0.08em;
}
.comment__body { overflow-wrap: break-word; }
.comment__body p:first-child { margin-top: 0; }
.comment__body p:last-child { margin-bottom: 0; }
.comment__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s2); }
.comment__actions form { margin: 0; }
.comment__actions button { min-height: 36px; font-size: var(--text-small); }
main .comment__actions button[type="submit"] { margin-top: 0; }
/* An edited comment says so beside its timestamp, in the meta's own voice. */
.comment__edited { font-style: italic; }
.comment__reply summary,
.comment__edit summary {
	cursor: pointer;
	color: var(--ink-soft);
	font-family: var(--mono);
	font-size: var(--text-label);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.comment__reply[open],
.comment__edit[open] { flex-basis: 100%; }
.comments__form { margin-top: var(--s5); }

/* ── Editor ───────────────────────────────────────────────────────────── */
/* The writing surface: a toolbar, then a textarea with a highlighted mirror
   behind it. The mirror and the textarea MUST agree on every property that
   decides where a glyph lands - font, size, line-height, letter-spacing,
   padding, border width, wrapping - or the caret drifts away from the text
   under it. The shared values live in one custom property set so the two
   rules cannot be changed apart. */
.editor__surface {
	--editor-font: var(--mono);
	--editor-size: var(--text-small);
	--editor-leading: 1.6;
	--editor-pad: var(--s2) var(--s3);
	margin-top: var(--s2);
}

.editor__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s1);
	padding: var(--s1);
	border: 1px solid var(--line-strong);
	border-bottom: 0;
	border-radius: var(--radius) var(--radius) 0 0;
	background: color-mix(in srgb, var(--line) 35%, var(--paper));
}
.editor__tool {
	min-height: 32px;
	min-width: 32px;
	padding: 0 var(--s2);
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: transparent;
	color: var(--ink-soft);
	font: 600 var(--text-small)/1 var(--mono);
}
.editor__tool:hover { border-color: var(--line-strong); color: var(--ink); background: var(--paper); }
.editor__tool--bold { font-weight: 700; }
.editor__tool--italic { font-style: italic; }
.editor__tool--strike { text-decoration: line-through; }
.editor__tool--preview { margin-left: auto; font-family: inherit; }
.editor__tool--preview[aria-pressed="true"] {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}

/* The frame stacks the mirror under the textarea; both fill it exactly. */
.editor__frame { position: relative; }
.editor__frame > textarea,
.editor__mirror {
	font-family: var(--editor-font);
	font-size: var(--editor-size);
	line-height: var(--editor-leading);
	letter-spacing: normal;
	padding: var(--editor-pad);
	border: 1px solid var(--line-strong);
	border-radius: 0 0 var(--radius) var(--radius);
	white-space: pre-wrap;
	overflow-wrap: break-word;
	word-break: normal;
	tab-size: 4;
	margin: 0;
}
.editor__frame > textarea {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	resize: vertical;
	background: transparent;
	/* The mirror paints the text; the textarea only carries the caret and
	   the selection. caret-color keeps the cursor visible over it. */
	color: transparent;
	caret-color: var(--ink);
}
.editor__frame > textarea::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.editor__mirror {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	color: var(--ink);
	background: var(--paper);
	pointer-events: none;
}

/* Mirror tokens. Weight, slant, colour, decoration and background only:
   JetBrains Mono holds one advance width across its weights and italics, so
   these cannot move a glyph. Font-size would, and is deliberately absent -
   the Preview button is what shows a heading at its printed size. */
.md-h { font-weight: 700; color: var(--accent-text); }
.md-h1, .md-h2 { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.md-strong { font-weight: 700; }
.md-em { font-style: italic; }
.md-strike { text-decoration: line-through; color: var(--ink-soft); }
.md-code, .md-fence { color: var(--accent-text); background: color-mix(in srgb, var(--line) 55%, transparent); }
.md-link { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.md-quote { color: var(--ink-soft); font-style: italic; }
.md-table { color: var(--ink-soft); }
.md-marker { color: var(--accent-text); font-weight: 700; }

/* The preview stands where the frame stood, styled by the article rules so
   it matches the published page. */
.editor__preview {
	margin-top: 0;
	padding: var(--s4);
	border: 1px solid var(--line-strong);
	border-radius: 0 0 var(--radius) var(--radius);
	min-height: 12rem;
}

.editor__form textarea {
	font-family: var(--mono);
	font-size: var(--text-small);
	line-height: 1.6;
	resize: vertical;
}
/* A description is three rows of prose, not code. */
.editor__surface textarea[data-mini-editor] { resize: vertical; }

/* Markdown rendered outside an article body: a project description. */
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose a { color: var(--accent-text); }
.prose code { font-family: var(--mono); font-size: 0.9em; }
.prose table { border-collapse: collapse; }
.prose th, .prose td { border: 1px solid var(--line); padding: var(--s1) var(--s2); text-align: left; }
.editor__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3) var(--s4);
	align-items: end;
	margin-top: var(--s5);
	padding-top: var(--s4);
	border-top: 1px solid var(--line);
}
.editor__publish { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: end; }
.editor__publish label { margin: 0 0 var(--s2); }
.editor__publish input { width: auto; }
.editor__delete { margin-left: auto; }

/* The editor's folded metadata: description/tags and the discussion rules
   sit under the writing surface, one fold each. */
.editor__meta { border-top: 1px solid var(--line); margin-top: var(--s4); padding-bottom: var(--s2); }
.editor__meta summary { font-weight: 600; cursor: pointer; padding: var(--s2) 0; min-height: 28px; }

/* ── Settings ─────────────────────────────────────────────────────────── */
.settings details { border-bottom: 1px solid var(--line); padding: var(--s3) 0 var(--s4); }
.settings details:first-of-type { border-top: 1px solid var(--line); }
.settings--page { max-width: 34rem; }
.settings--page h1 { margin-bottom: var(--s4); }
/* The following screen is four related lists, not four page sections: the
   lede needs air below it and the --s6 section boundary is too much here. */
.settings--page > .form__hint { margin-bottom: var(--s4); }
.settings--page section + section { margin-top: var(--s4); }
.settings summary {
	font-family: var(--display);
	font-weight: 400;
	font-size: var(--text-title);
	letter-spacing: 0.02em;
	cursor: pointer;
	padding: var(--s2) 0;
	min-height: 28px;
}
.settings__slug { color: var(--ink-soft); font-family: var(--mono); font-size: var(--text-small); letter-spacing: 0; }

/* The account settings: grouped sections with an anchor rail. On a phone
   the rail is a wrapping row of jump links above the sections; from 48rem
   it sits sticky in the margin the single column never used. */
.settings__nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin: var(--s3) 0 var(--s4); }
.settings__nav a { font-size: var(--text-ui); color: var(--ink-soft); text-decoration: none; padding: var(--s1) 0; }
.settings__nav a:hover { color: var(--accent-text); }
.settings__section { border-top: 1px solid var(--line); padding: var(--s3) 0 var(--s4); }
.settings__section h2 {
	font-family: var(--display);
	font-weight: 400;
	font-size: var(--text-title);
	letter-spacing: 0.02em;
	margin: var(--s2) 0;
}
.settings__section form + form, .settings__section form + p { border-top: 1px solid var(--line); margin-top: var(--s4); padding-top: var(--s2); }
.settings__danger { border: 1px solid var(--danger); border-radius: var(--radius); padding: var(--s3) var(--s4) var(--s4); margin-top: var(--s5); }
.settings__danger h2 { color: var(--danger); }

/* The one-shot invitation link: a selectable mono row with its copy
   button; the server never renders it as a link an owner could lose by
   clicking. */
.copyrow { display: flex; gap: var(--s2); margin: var(--s2) 0 var(--s3); }
.copyrow__value { font-family: var(--mono); font-size: var(--text-small); }

@media (min-width: 48rem) {
	.settings--page:has(.settings__layout) { max-width: none; }
	.settings__layout { display: grid; grid-template-columns: 10rem minmax(0, 34rem); gap: var(--s5); align-items: start; }
	.settings__nav { position: sticky; top: var(--s4); flex-direction: column; gap: var(--s2); margin: var(--s2) 0; }
}

/* ── Audit ────────────────────────────────────────────────────────────── */
.audit__title { color: var(--ink-soft); }
.audit__snapshot { margin-top: var(--s5); }
.audit__body {
	font-family: var(--mono);
	font-size: var(--text-small);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--s3);
	overflow-x: auto;
	white-space: pre-wrap;
}

.error { text-align: center; padding: var(--s6) 0; }
.error h1 { font-family: var(--display); font-weight: 400; font-size: 4rem; margin: 0; }

/* ── Wider screens ────────────────────────────────────────────────────── */
@media (min-width: 48rem) {
	body { font-size: 17px; }
	.content { padding-top: var(--s6); }
}

/* ── Countdown teaser ─────────────────────────────────────────────────── */
.article--teaser { text-align: left; }
.countdown {
	display: flex;
	gap: var(--s3);
	margin: var(--s5) 0;
	flex-wrap: wrap;
}
.countdown__cell {
	min-width: 4.5rem;
	padding: var(--s3);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-align: center;
}
.countdown__num {
	display: block;
	font-family: var(--display);
	font-size: var(--text-display);
	line-height: 1;
}
.countdown__label {
	font-family: var(--mono);
	font-size: var(--text-label);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ink-soft);
}

/* The verification nag: one line under the topbar until the email is
   confirmed, with the resend button beside it. */
.nag {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--s2) var(--s3);
	padding: var(--s2) var(--s3);
	border-bottom: 1px solid var(--line);
	background: color-mix(in srgb, var(--accent) 10%, var(--paper));
	font-size: 0.9rem;
}
.nag p { margin: 0; }
.nag .nag__note { font-weight: 600; }
.nag form { margin: 0; }
.nag button { padding: var(--s1) var(--s3); }

/* Pricing: three plans side by side on a wide screen, stacked on a phone.
   The member plan is the one the page is about, so it carries the accent. */
.pricing {
	display: grid;
	gap: var(--s4);
	margin-top: var(--s5);
}
@media (min-width: 48rem) {
	.pricing { grid-template-columns: repeat(3, 1fr); }
}
.pricing__plan {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--s4);
}
.pricing__plan--main { border-color: var(--accent); border-width: 2px; }
.pricing__name {
	font-family: var(--mono);
	font-size: var(--text-label);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink-soft);
	margin: 0 0 var(--s2);
}
.pricing__price {
	font-family: var(--display);
	font-size: 2rem;
	line-height: 1.1;
	margin: 0 0 var(--s3);
}
.pricing__or, .pricing__once {
	font-family: var(--mono);
	font-size: var(--text-label);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ink-soft);
}
.pricing__once { display: block; margin-top: var(--s1); }
.pricing__list { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--s1); }
.pricing__note { color: var(--ink-soft); margin: var(--s3) 0 0; font-size: 0.9rem; }
/* On /pricing each plan ends on its one action, pinned to the foot of the
   card so the buttons line up however long the lists above them run. */
.pricing > .pricing__plan { display: flex; flex-direction: column; }
.pricing__action { margin: auto 0 0; padding-top: var(--s4); }
.pricing__gate { margin: var(--s4) 0 0; font-weight: 600; color: var(--accent-text); }
.pricing__status { margin-top: var(--s5); }

/* The payments page: the standing line up top, one card per plan, tip tiers
   as a button row, and the history as a mono list. The badge pill is shared
   with the profile head, where it sits quietly beside the handle. */
.profile__badge {
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	padding: 0 var(--s2);
	font-family: var(--mono);
	font-size: var(--text-fine);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ink-soft);
}
.payments__total {
	display: flex;
	align-items: baseline;
	gap: var(--s2);
	margin: 0;
	font-size: 1.1rem;
}
.payments__closed { margin: var(--s4) 0 0; font-weight: 600; }
.payments__tiers { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: baseline; }
.payments__tiers--amounts { color: var(--ink-soft); font-family: var(--mono); font-size: var(--text-small); }
.payments__anything { margin-top: var(--s4); max-width: 18rem; }
.payments__history {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--s2);
	font-family: var(--mono);
	font-size: var(--text-small);
}
.payments__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2) var(--s3);
	align-items: baseline;
	border-bottom: 1px solid var(--line);
	padding-bottom: var(--s2);
}
.payments__status, .payments__note, .payments__date { color: var(--ink-soft); }