/* ── AI declaration marks ────────────────────────────────────────────────
   The need2know mark, in the two places this site declares anything: beside
   a post's reading time, and once in the front page's footer for the site
   itself.

   Not on the project rows. A mark is not a trade mark, and a splash row is a
   product's name and its claim -- a declaration about that product belongs
   where its metadata is shown.

   The artwork is one set of black SVGs used as a MASK over currentColor
   rather than drawn as a picture, so the shape comes from the file and the
   colour from whatever text the mark sits in. This dark site needs no second,
   light copy of thirty files to keep in step with the first.

   ONE size, 48px, everywhere. A level is read by counting the pins around
   the chip; the scheme's own floor for that is 40px, which is where the
   count stops being possible at all and so a bad place to sit. Nothing here
   may shrink a mark below it. */

.ai-mark {
	display:		inline-flex;
	align-items:		center;
	gap:			0.5rem;
	text-decoration:	none;
	color:			inherit;
	vertical-align:		middle;
}

/* The shape. `currentColor` is the whole colour story: put the mark in muted
   text and it is muted, put it in a heading and it is not. */
.ai-mark-ink {
	display:		inline-block;
	flex:			none;
	width:			var(--ai-mark-size, 48px);
	height:			var(--ai-mark-size, 48px);
	background-color:	currentColor;
	-webkit-mask-repeat:	no-repeat;
	mask-repeat:		no-repeat;
	-webkit-mask-position:	center;
	mask-position:		center;
	-webkit-mask-size:	contain;
	mask-size:		contain;
}

.ai-mark-words {
	letter-spacing:		0.01em;
}

/* Reaching the scheme is worth showing as reachable, and the accent is what
   every other link on this site brightens to. */
.ai-mark:hover,
.ai-mark:focus-visible {
	color:			var(--accent, #D2604F);
}

.ai-mark:focus-visible {
	outline:		2px solid var(--accent, #D2604F);
	outline-offset:		3px;
	border-radius:		2px;
}

/* ── Where the marks sit ─────────────────────────────────────────────── */

/* In the meta line of a card and of a post, immediately right of the reading
   time. That line is text-sized and the mark is 48px, so it becomes a
   centred row rather than a line of text with something tall dropped into
   it. */
.aside-item-meta,
.aside-date {
	display:		flex;
	align-items:		center;
	flex-wrap:		wrap;
}

/* The line separates its parts with a dot, which cannot be used before the
   mark -- it would sit inside the link and read as punctuation the mark
   owns. So the mark brings its own space instead. */
.aside-date .ai-mark,
.aside-item-meta .ai-mark {
	margin-left:		0.7rem;
	color:			var(--text-secondary, #A79E92);
}

/* A card's meta line is `align-items: baseline` in blog.css, at a specificity
   this file cannot beat with `.aside-item-meta` alone -- so the mark sat ON
   the text baseline and stuck up above the line, which is what made it look
   oversized in the head. Same selector, same weight, centred. The full post
   was never affected: its line is `.aside-date`, which this file already
   centres. */
.aside-card .aside-item-meta {
	align-items:		center;
}

/* The front page's own declaration, under the one control down there.
   Right-aligned: it is a footnote about the site, not a second navigation,
   and the left of that strip already belongs to Manage. */
.foot-declare {
	display:		flex;
	justify-content:	flex-end;
	align-items:		center;
	margin-top:		clamp(20px, 2.4vw, 32px);
	font-size:		15px;
	color:			var(--text-secondary, #A79E92);
}

@media (prefers-reduced-motion: no-preference) {
	.ai-mark {
		transition:	color 0.18s ease;
	}
}