/*
 * The Noticing Project — the look.
 *
 * A child of Blocksy (6 Nov 2026): Blocksy draws the header, the footer, an essay and the lists, set by refresh/look.php;
 * this sheet dresses them (parts 8 to 12) and draws the front page's own sections.
 *
 * NOT in this sheet: Blocksy's palette, header and footer structure, widths (they are settings), any font from
 * another server, any rule naming a plugin except the subscribe form's own classes.
 *
 * The idea: noticing is highlighting. One highlighter yellow does the site's pointing: under a link, behind a word,
 * along the top as you read, at the edge of a button. Ink on paper for everything else. No other colour.
 *
 * MOTION RULES (decided before anything moves; a new moving thing must fit these or not be added):
 *  - One beat = 1.6 s. The only loop is the lens on the front page: it moves to a word in 2 beats, rests 2 beats.
 *    It runs only while on screen, follows the pointer on hover, and stops for reduced motion.
 *  - Three durations only: --t-quick (a press), --t-move (a line or highlight sliding), --t-settle (arriving).
 *  - Things arrive once (the first screen in steps of 80 ms; each section as it comes into view). Nothing leaves.
 *  - A highlight draws left to right, the way a pen does. That is the one gesture, and it always means "noticed".
 *  - Transform and opacity only, never hiding content without script; off under prefers-reduced-motion.
 */

:root {
	--paper: var(--wp--preset--color--paper);
	--paper-2: var(--wp--preset--color--paper-2);
	--ink: var(--wp--preset--color--ink);
	--ink-2: var(--wp--preset--color--ink-2);
	--ink-3: var(--wp--preset--color--ink-3);
	--rule: var(--wp--preset--color--rule);
	--mark: var(--wp--preset--color--mark);
	--mark-soft: var(--wp--preset--color--mark-soft);
	--night: var(--wp--preset--color--night);
	--on-night: var(--wp--preset--color--on-night);
	--on-night-2: var(--wp--preset--color--on-night-2);
	--sans: var(--wp--preset--font-family--manrope);
	--text: var(--wp--preset--font-family--vollkorn);
	--serif: var(--wp--preset--font-family--literata);
	--text: var(--wp--preset--font-family--vollkorn);
	--t-quick: 140ms;
	--t-move: 320ms;
	--t-settle: 640ms;
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--lift: 0 1px 0 rgba(24, 22, 15, 0.06), 0 22px 40px -26px rgba(24, 22, 15, 0.45);
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga"; }
::selection { background: var(--mark); color: var(--ink); }
:where(a, button, input, summary):focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html .wp-site-blocks > * + * { margin-block-start: 0; }
img { height: auto; }

/* ---------- The highlight: the one gesture ---------- */
mark.tnp-hl {
	color: inherit;
	background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 82% / 100% 0.42em;
	padding: 0 0.06em;
	margin: 0 -0.06em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
/* Text links in reading text: a thin highlight that grows to full height when pointed at. */
.tnp-essay__body a, .tnp-author a, .tnp-muted a, .tnp-404 p a, .tnp-hero__lede a {
	color: var(--ink);
	text-decoration: none;
	background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 100% / 100% 0.22em;
	transition: background-size var(--t-move) var(--ease);
}
.tnp-essay__body a:hover, .tnp-author a:hover, .tnp-muted a:hover, .tnp-404 p a:hover, .tnp-hero__lede a:hover,
.tnp-essay__body a:focus-visible, .tnp-author a:focus-visible { background-size: 100% 100%; color: var(--ink); }

/* ---------- Small type ---------- */
.tnp-kicker, .tnp-section-label, .form-popup__label, .tnp-meta, .tnp-row__date {
	font-family: var(--sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-2);
}
.tnp-kicker a { color: var(--ink-2); text-decoration: none; }
.tnp-kicker a:hover, .tnp-kicker a:focus-visible { color: var(--ink); background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 100% / 100% 0.3em; }
.tnp-kicker .wp-block-post-terms__separator { color: var(--ink-3); }
/* In a list, an essay is labelled with its first theme only; the essay itself lists them all. */
.tnp-row .tnp-kicker a ~ a, .tnp-row .tnp-kicker .wp-block-post-terms__separator,
.tnp-feature .tnp-kicker a ~ a, .tnp-feature .tnp-kicker .wp-block-post-terms__separator { display: none; }
.tnp-section-label, .form-popup__label { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 1.5rem; }
.tnp-section-label::before, .form-popup__label::before { content: ""; width: 1.75rem; height: 0.42rem; background: var(--mark); border-radius: 1px; flex: none; }
.tnp-section-label--night { color: var(--on-night-2); }
.tnp-meta { gap: 0 0.7rem; color: var(--ink-3); letter-spacing: 0.06em; }
.tnp-meta > * { margin: 0 !important; }
.tnp-meta > * + *::before { content: "·"; margin-right: 0.7rem; color: var(--ink-3); }
.tnp-meta a { color: var(--ink); text-decoration: none; }
.tnp-meta a:hover, .tnp-meta a:focus-visible { background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 100% / 100% 0.3em; color: var(--ink); }
.tnp-muted { color: var(--ink-2); font-size: var(--wp--preset--font-size--small); }
.tnp-textlink, .tnp-textlink a {
	font-family: var(--sans); font-weight: 700; font-size: var(--wp--preset--font-size--small);
	color: var(--ink); text-decoration: none;
}
.tnp-textlink a, a.tnp-textlink {
	background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 100% / 100% 0.3em;
	transition: background-size var(--t-move) var(--ease);
	padding-bottom: 0.05em;
}
.tnp-textlink a::after, a.tnp-textlink::after { content: " →"; }
.tnp-textlink a:hover, a.tnp-textlink:hover, .tnp-textlink a:focus-visible, a.tnp-textlink:focus-visible { background-size: 100% 100%; color: var(--ink); }
.tnp-textlink--night a, .tnp-textlink--night a:link, .tnp-textlink--night a:visited { color: var(--on-night); }
.tnp-textlink--night a:hover, .tnp-textlink--night a:focus-visible { color: var(--night); }

/* ---------- Buttons: ink, sitting on a highlighter edge they press down onto ---------- */
.tnp-btn .wp-block-button__link, :is(.tnp-subscribe, .form-popup) .ff-btn-submit, .tnp-search-page .wp-block-search__button {
	font-family: var(--sans) !important;
	font-weight: 700 !important;
	font-size: var(--wp--preset--font-size--small) !important;
	letter-spacing: 0.01em;
	line-height: 1.2 !important;
	background: var(--ink) !important;
	color: var(--paper) !important;
	border: 0 !important;
	border-radius: 4px !important;
	padding: 0.9rem 1.3rem !important;
	box-shadow: 0 4px 0 0 var(--mark) !important;
	transform: translateY(0);
	transition: transform var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease);
	text-decoration: none;
	cursor: pointer;
}
.tnp-btn .wp-block-button__link:hover, :is(.tnp-subscribe, .form-popup) .ff-btn-submit:hover, .tnp-search-page .wp-block-search__button:hover {
	transform: translateY(-1px); box-shadow: 0 5px 0 0 var(--mark) !important; color: var(--paper) !important; background: var(--ink) !important; opacity: 1 !important;
}
.tnp-btn .wp-block-button__link:active, :is(.tnp-subscribe, .form-popup) .ff-btn-submit:active, .tnp-search-page .wp-block-search__button:active {
	transform: translateY(3px); box-shadow: 0 1px 0 0 var(--mark) !important;
}
.tnp-btn--quiet .wp-block-button__link {
	background: transparent !important; color: var(--ink) !important;
	box-shadow: inset 0 0 0 2px var(--ink), 0 4px 0 0 var(--rule) !important;
}
.tnp-btn--quiet .wp-block-button__link:hover { background: var(--paper-2) !important; color: var(--ink) !important; box-shadow: inset 0 0 0 2px var(--ink), 0 5px 0 0 var(--rule) !important; }
.tnp-btn--quiet .wp-block-button__link:active { box-shadow: inset 0 0 0 2px var(--ink), 0 1px 0 0 var(--rule) !important; }

/* ---------- Hero: the lens ---------- */
.tnp-hero { padding-block: clamp(2.5rem, 7vw, 6rem) clamp(3rem, 7vw, 6rem); overflow: clip; }
.tnp-hero__inner { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.tnp-hero__copy > * { margin-block: 0; }
.tnp-hero__copy > * + * { margin-block-start: 1.35rem; }
.tnp-hero__title { font-size: var(--wp--preset--font-size--display); line-height: 1.02; letter-spacing: -0.028em; max-width: 12ch; font-weight: 700; margin-left: 0 !important; }
.tnp-hero__lede { font-family: var(--text); font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.55; color: var(--ink-2); max-width: 34ch; }
.tnp-hero__aside { font-family: var(--sans); font-weight: 600; font-size: var(--wp--preset--font-size--small); color: var(--ink-3); }
.tnp-hero__actions { gap: 1rem 1.1rem; padding-top: 0.4rem; }

.tnp-lens-field { position: relative; aspect-ratio: 5 / 6; max-height: 560px; width: 100%; }
.tnp-lens-field__page {
	position: absolute; inset: 0; border-radius: 6px; overflow: hidden;
	background:
		repeating-linear-gradient(to bottom, transparent 0 calc(var(--lh) - 1px), rgba(24, 22, 15, 0.07) calc(var(--lh) - 1px) var(--lh)),
		var(--paper-2);
	box-shadow: var(--lift), inset 0 0 0 1px rgba(24, 22, 15, 0.05);
	transform: rotate(-1.4deg);
}
.tnp-lens-field__text { position: absolute; inset: 1.4rem 1.6rem; margin: 0; }
.tnp-lens-field__text p {
	margin: 0; font-family: var(--text); font-size: clamp(1.15rem, 1.75vw, 1.55rem); line-height: var(--lh); letter-spacing: 0.01em;
	word-spacing: 0.18em;
}
.tnp-lens-field__text b { font-weight: 600; }
.tnp-lens-field__text--blur { color: var(--ink-3); filter: blur(2.4px); opacity: 0.55; }
.tnp-lens-field__text--sharp {
	color: var(--ink);
	--r: 5.2rem;
	-webkit-mask-image: radial-gradient(circle calc(var(--r) / 1.14) at var(--x, 50%) var(--y, 50%), #000 0 97%, transparent 100%);
	mask-image: radial-gradient(circle calc(var(--r) / 1.14) at var(--x, 50%) var(--y, 50%), #000 0 97%, transparent 100%);
	transform: scale(1.14); transform-origin: var(--x, 50%) var(--y, 50%);
}
.tnp-lens-field__text--sharp [data-word] {
	background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 85% / 0% 0.5em;
	transition: background-size var(--t-settle) var(--ease);
}
.tnp-lens-field__text--sharp [data-word].is-noticed { background-size: 100% 0.5em; }
.tnp-lens {
	position: absolute; width: calc(var(--r, 5.2rem) * 3); height: auto; color: var(--ink);
	left: calc(1.6rem + var(--x, 50%) - var(--r, 5.2rem) * 1.25);
	top: calc(1.4rem + var(--y, 50%) - var(--r, 5.2rem) * 1.25);
	filter: drop-shadow(0 12px 14px rgba(24, 22, 15, 0.22));
	pointer-events: none;
}
.tnp-lens-field { --r: 5.2rem; --lh: 2.4rem; }

/* ---------- The latest essay ---------- */
.tnp-latest { padding-block: 0 clamp(3rem, 6vw, 5rem); }
.tnp-feature__list { list-style: none; margin: 0; padding: 0; }
.tnp-feature__card { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.tnp-feature__card > * { margin: 0 !important; }
.tnp-feature__img { overflow: hidden; border-radius: 6px; box-shadow: var(--lift); }
.tnp-feature__img img { border-radius: 6px; transition: transform 900ms var(--ease), filter var(--t-move) var(--ease); filter: saturate(0.9); }
.tnp-feature__card:hover .tnp-feature__img img { transform: scale(1.025); filter: saturate(1); }
.tnp-feature__text > * { margin-block: 0; }
.tnp-feature__text > * + * { margin-block-start: 1rem; }
.tnp-feature__title { font-size: clamp(1.9rem, 3.3vw, 2.9rem); line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; }
.tnp-feature__excerpt { font-size: 1.1rem; color: var(--ink-2); }
.tnp-feature__excerpt .wp-block-post-excerpt__more-text { display: none; }

/* Titles that are links: pointing at one highlights it, line by line (inline: WordPress makes a title's link an
   inline block, which would draw one bar under the whole box). Until 6 Nov an inner pages' rule caught the front page
   too and drew every title's bar at rest; it is now held to body.page. */
html .tnp-feature__title a, html .tnp-row__title a, html .tnp-card__title a { display: inline; }
.tnp-feature__title a, .tnp-row__title a, .tnp-card__title a {
	color: var(--ink); text-decoration: none;
	background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 88% / 0% 0.36em;
	transition: background-size var(--t-move) var(--ease);
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.tnp-feature__card:hover .tnp-feature__title a, .tnp-row:hover .tnp-row__title a, .tnp-card:hover .tnp-card__title a,
.tnp-feature__title a:focus-visible, .tnp-row__title a:focus-visible, .tnp-card__title a:focus-visible { background-size: 100% 0.36em; color: var(--ink); }

/* ---------- Recent essays: six cards, a picture and a title each (6 Nov: cleaner than rows with openings) ---------- */
.tnp-cards__list {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 3.5vw, 3rem) clamp(1.25rem, 2.5vw, 2.25rem);
}
html .tnp-card { margin: 0; display: flex; flex-direction: column; gap: 1.1rem; }
html .tnp-card > *, html .tnp-card__text > * { margin-block: 0; }
.tnp-card__text > * + * { margin-block-start: 0.5rem !important; }
.tnp-card__img { margin: 0; overflow: hidden; border-radius: 4px; background: var(--paper-2); }
.tnp-card__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; filter: saturate(0.85); transition: transform 900ms var(--ease), filter var(--t-move) var(--ease); }
.tnp-card:hover .tnp-card__img img { transform: scale(1.04); filter: saturate(1); }
.tnp-card__img:empty, .tnp-card__img:not(:has(img)) { display: none; }
.tnp-card__title { font-size: clamp(1.2rem, 1.55vw, 1.4rem); line-height: 1.24; font-weight: 600; text-wrap: pretty; }
.tnp-card .tnp-kicker a ~ a, .tnp-card .tnp-kicker .wp-block-post-terms__separator { display: none; }

/* ---------- Lists of essays: one rule, the date in the margin, a small picture ---------- */
.tnp-list-section { padding-block: clamp(2.5rem, 6vw, 5rem); }
.tnp-list-head { margin-bottom: 1.25rem; gap: 1rem; }
.tnp-list-head__title { margin: 0; font-size: var(--wp--preset--font-size--x-large); }
.tnp-rows__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
html .tnp-row {
	display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 12.5rem; gap: 1.25rem 2.25rem; align-items: start;
	padding-block: 1.75rem; border-top: 1px solid var(--rule); margin: 0;
}
html .tnp-row > *, html .tnp-row__text > * { margin-block: 0; }
.tnp-row__text > * + * { margin-block-start: 0.55rem !important; }
.tnp-row__date { padding-top: 0.45rem; color: var(--ink-3); letter-spacing: 0.06em; }
.tnp-row__title { font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.2; font-weight: 600; }
.tnp-row__excerpt { color: var(--ink-2); }
.tnp-row__excerpt p { margin: 0; }
.tnp-row__excerpt .wp-block-post-excerpt__more-text { display: none; }
.tnp-row__img { overflow: hidden; border-radius: 4px; }
.tnp-row__img img { border-radius: 4px; filter: saturate(0.85); transition: transform 900ms var(--ease), filter var(--t-move) var(--ease); }
.tnp-row:hover .tnp-row__img img { transform: scale(1.04); filter: saturate(1); }
.tnp-row__img:empty, .tnp-row__img:not(:has(img)) { display: none; }

.tnp-pages { margin-top: 2.5rem; font-family: var(--sans); font-weight: 700; font-size: var(--wp--preset--font-size--small); }
.tnp-pages a { color: var(--ink); text-decoration: none; background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 100% / 100% 0.25em; }
.tnp-pages .page-numbers.current { background: var(--mark); color: var(--ink); padding: 0.1rem 0.5rem; border-radius: 2px; }

/* ---------- The pattern: the one dark moment ---------- */
.tnp-pattern { padding-block: clamp(4rem, 9vw, 7.5rem); background: var(--night); color: var(--on-night); }
.tnp-pattern a:link, .tnp-pattern a:visited { color: var(--on-night); }
.tnp-pattern__lines { list-style: none; counter-reset: tnp; margin: 0 0 2.5rem; padding: 0; }
.tnp-pattern__lines li {
	counter-increment: tnp; display: grid; grid-template-columns: 4.5rem 1fr; align-items: baseline;
	font-family: var(--serif); font-weight: 700; font-size: var(--wp--preset--font-size--display); line-height: 1.12; letter-spacing: -0.025em;
	color: var(--on-night); padding-block: 0.2rem;
}
.tnp-pattern__lines li::before {
	content: counter(tnp, decimal-leading-zero); font-family: var(--sans); font-size: 0.95rem; font-weight: 700;
	letter-spacing: 0.1em; color: var(--on-night-2); transform: translateY(-0.4em);
}
.tnp-pattern mark.tnp-hl { color: var(--night); background-size: 100% 0.86em; background-position: 0 70%; }
.tnp-pattern__foot { padding-left: 4.5rem; }
.tnp-pattern__note { max-width: 46ch; color: var(--on-night-2); font-size: 1.15rem; margin: 0 0 1.5rem; }
.tnp-pattern .tnp-textlink { margin: 0; }

/* ---------- Read by theme: a book's index ---------- */
.tnp-themes { padding-block: clamp(3.5rem, 7vw, 6rem); }
.tnp-themes h2 { margin-top: 0; }
.tnp-index { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 3rem; }
.tnp-index li { break-inside: avoid; }
.tnp-index a { display: flex; align-items: baseline; gap: 0.6rem; padding-block: 0.7rem; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.tnp-index__name {
	font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1.25;
	background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 88% / 0% 0.36em; transition: background-size var(--t-move) var(--ease);
}
.tnp-index__dots { flex: 1; border-bottom: 2px dotted var(--rule); transform: translateY(-0.3rem); min-width: 1rem; }
.tnp-index__n { font-family: var(--sans); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.tnp-index a:hover .tnp-index__name, .tnp-index a:focus-visible .tnp-index__name { background-size: 100% 0.36em; }
.tnp-index a:hover .tnp-index__n { color: var(--ink); }
.tnp-index a:hover, .tnp-index a:focus-visible { color: var(--ink); }

/* ---------- Subscribe band (and the Fluent Forms form inside it) ---------- */
.tnp-subscribe { background: var(--paper-2); border-block: 1px solid var(--rule); padding-block: clamp(3rem, 6vw, 4.5rem); }
.tnp-subscribe__inner { gap: clamp(1.5rem, 4vw, 4rem); }
.tnp-subscribe--page { background: transparent; border: 0; padding-block: 0.75rem 0; }
.tnp-subscribe__title { font-size: var(--wp--preset--font-size--x-large); margin: 0 0 0.6rem; }
.tnp-subscribe__lede { color: var(--ink-2); margin: 0; font-size: 1.05rem; max-width: 40ch; }
:is(.tnp-subscribe, .form-popup) .ff-el-section-break, :is(.tnp-subscribe, .form-popup) .ff-el-section-title, :is(.tnp-subscribe, .form-popup) hr { display: none !important; }
:is(.tnp-subscribe, .form-popup) .fluentform .ff-el-group { margin-bottom: 0 !important; }
:is(.tnp-subscribe, .form-popup) .fluentform .ff-t-container { gap: 0.75rem; align-items: stretch; }
:is(.tnp-subscribe, .form-popup) .fluentform .ff-t-cell { padding: 0 !important; }
:is(.tnp-subscribe, .form-popup) .fluentform .ff-el-form-control {
	height: 3.25rem; font-family: var(--sans); font-size: 1rem; color: var(--ink) !important;
	background: var(--paper) !important; border: 2px solid var(--ink) !important; border-radius: 4px !important; padding: 0 1rem !important;
	box-shadow: none !important;
}
:is(.tnp-subscribe, .form-popup) .fluentform .ff-el-form-control::placeholder { color: var(--ink-3); opacity: 1; }
/* The box's ring is ink, outside its own edge: a yellow ring on the band read 1.36 to 1 (measured 6 Nov). */
:is(.tnp-subscribe, .form-popup) .fluentform .ff-el-form-control:focus { outline: 3px solid var(--ink); outline-offset: 2px; border-color: var(--ink) !important; box-shadow: inset 0 -4px 0 var(--mark) !important; }
:is(.tnp-subscribe, .form-popup) .ff-btn-submit { height: 3.25rem; width: 100%; white-space: nowrap; }
/* Fluent Forms draws its own faint focus glow on the button and takes the outline off: ours, heavier. */
html body :is(.tnp-subscribe, .form-popup) form .ff-btn-submit:focus-visible, html body :is(.tnp-subscribe, .form-popup) form .ff-btn-submit:focus { outline: 3px solid var(--wp--preset--color--ink) !important; outline-offset: 3px !important; }
/* Its ring appears at once: Fluent Forms animates every property of its button, the outline's colour included. */
html body :is(.tnp-subscribe, .form-popup) form .ff-btn-submit { transition-property: transform, box-shadow !important; }
:is(.tnp-subscribe, .form-popup) .ff-message-success { border: 0 !important; border-left: 4px solid var(--mark) !important; background: var(--paper) !important; color: var(--ink) !important; box-shadow: none !important; font-family: var(--sans); padding: 1rem 1.25rem !important; }
:is(.tnp-subscribe, .form-popup) .error.text-danger { font-family: var(--sans); font-size: 0.875rem; color: #8A1C12 !important; }

/* Reading line along the top of an essay. */
.tnp-progress { position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 60; pointer-events: none; }
.admin-bar .tnp-progress { top: var(--wp-admin--admin-bar--height, 32px); }
.tnp-progress span { display: block; height: 100%; background: var(--mark); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* ---------- 8. Blocksy: the type, the ground, the site's width ---------- */
:root:root { --theme-font-family: var(--text); }
html body { font-family: var(--text); color: var(--ink); background: var(--paper); }
html :is(h1, h2, h3, h4, h5, h6, .page-title, .entry-title) { font-family: var(--serif); color: var(--ink); letter-spacing: -0.012em; text-transform: none; }
html :is(h1, .page-title) { font-weight: 700; }
html :is(h2, h3, h4) { font-weight: 600; line-height: 1.15; }
.tnp-wrap { box-sizing: border-box; width: 100%; max-width: calc(var(--wp--style--global--wide-size, 1180px) + 2 * clamp(1rem, 4vw, 2.5rem)); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
html .entry-content > .alignfull { margin-block: 0; }
.tnp-quiet { font-family: var(--sans); font-size: var(--wp--preset--font-size--small); color: var(--ink-2); }

/* ---------- 9. Blocksy's header: the wordmark, the menu with its moving line, Subscribe ---------- */
#header [data-row="middle"] { border-bottom: 1px solid var(--rule); }
#header .site-title, #header .site-title a { font-family: var(--sans); font-weight: 800; font-size: 0.8rem; line-height: 0.98; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink); }
#header .site-title a { display: inline-flex; align-items: center; gap: 0.6rem; max-width: 9.5em; text-decoration: none; }
#header .site-title a::before {
	content: ""; flex: none; width: 2.5rem; height: 2.5rem; background: currentColor;
	-webkit-mask: url("../img/mark.svg") center / contain no-repeat; mask: url("../img/mark.svg") center / contain no-repeat;
	transition: transform var(--t-move) var(--ease);
}
#header .site-title a:hover::before { transform: rotate(-8deg); }
#header .site-title a:hover, #header .site-title a:focus-visible { color: var(--ink); }
#header nav[data-id^="menu"] > ul { position: relative; }
#header nav[data-id^="menu"] .ct-menu-link,
#header nav[data-id^="menu"] .ct-menu-link:hover,
#header nav[data-id^="menu"] .current-menu-item > .ct-menu-link {
	font-family: var(--sans); font-size: 0.95rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink);
}
.tnp-nav__line { position: absolute; left: 0; bottom: 1.1rem; height: 0.32rem; background: var(--mark); border-radius: 1px;
	transform: translateX(var(--nx, 0)); width: var(--nw, 0); opacity: var(--no, 0); pointer-events: none; z-index: 0;
	transition: transform var(--t-move) var(--ease), width var(--t-move) var(--ease), opacity var(--t-move) var(--ease); }
#header nav[data-id^="menu"] .ct-menu-link { position: relative; z-index: 1; }
#header .ct-header-search, #header .ct-header-search:hover { color: var(--ink); }
#header .ct-header-cta .ct-button, #offcanvas .ct-header-cta .ct-button {
	font-family: var(--sans); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.01em; text-transform: none;
	background: var(--ink); color: var(--paper); border: 0; border-radius: 4px; min-height: 0; padding: 0.62rem 1rem;
	box-shadow: 0 4px 0 0 var(--mark); transition: transform var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease);
}
#header .ct-header-cta .ct-button:hover { background: var(--ink); color: var(--paper); transform: translateY(-1px); box-shadow: 0 5px 0 0 var(--mark); }
#header .ct-header-cta .ct-button:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--mark); }
/* The phone panel is paper (look.php); its words ink in every state, the page you are on marked. */
#offcanvas .ct-panel-inner { background: var(--paper); }
#offcanvas .mobile-menu a, #offcanvas .mobile-menu a:hover { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; color: var(--ink); text-transform: none; }
#offcanvas .mobile-menu .current-menu-item > a { background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 88% / 100% 0.32em; }
#offcanvas .ct-toggle-close { color: var(--ink); }

/* ---------- 10. Blocksy's essay ---------- */
.single-post .hero-section .entry-header { text-align: start; }
.single-post .hero-section .page-title { font-size: clamp(2.3rem, 5.2vw, 4.1rem); line-height: 1.06; letter-spacing: -0.025em; text-wrap: balance; }
.single-post .hero-section .entry-meta, .single-post .hero-section .entry-meta a { font-family: var(--sans); font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.single-post .hero-section .entry-meta a:hover { color: var(--ink); background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 100% / 100% 0.3em; }
.single-post .hero-section .entry-meta .meta-author a { color: var(--ink); }
.single-post .hero-section .entry-meta, .entries .entry-card .entry-meta { gap: 0 0.6rem; }
.single-post .hero-section .entry-meta > li + li::before, .entries .entry-card .entry-meta > li + li::before { content: "·"; margin-right: 0.6rem; color: var(--ink-3); }
.single-post .hero-section .entry-meta > li::after, .entries .entry-card .entry-meta > li::after { display: none; }
.single-post .ct-featured-image { margin-top: 1.5rem; }
.single-post .ct-featured-image img { border-radius: 6px; box-shadow: var(--lift); }
.single-post .entry-content { font-family: var(--text); font-size: clamp(1.15rem, 1.4vw, 1.28rem); line-height: 1.72; font-weight: 420; }
.single-post .entry-content :is(p, li) { color: #2A2720; }
.single-post .entry-content h2 { margin-top: 2.8rem; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.single-post .entry-content h3 { margin-top: 2.2rem; }
.single-post .entry-content strong { font-weight: 700; color: var(--ink); }
.single-post .entry-content img { border-radius: 4px; }
.single-post .entry-content blockquote { border-left: 4px solid var(--mark); padding-left: 1.4rem; margin-left: 0; font-style: italic; font-size: 1.15em; }
/* An essay's links, and a page's. Not the plugins' own buttons and cards at an essay's end or on /series/: their look is
   their own (15b), and the highlight under a pill or a card read as a stray line (8 Nov). */
.single-post .entry-content a:not(:is(.share-links, .article-series__steps) a), body.page:not(.home) .entry-content > :not(.tnp-subscribe, .article-series-cards) a, .tnp-author a {
	color: var(--ink); text-decoration: none;
	background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 100% / 100% 0.22em; transition: background-size var(--t-move) var(--ease);
}
.single-post .entry-content a:not(:is(.share-links, .article-series__steps) a):hover, body.page:not(.home) .entry-content > :not(.tnp-subscribe, .article-series-cards) a:hover, .tnp-author a:hover,
.single-post .entry-content a:not(:is(.share-links, .article-series__steps) a):focus-visible, body.page:not(.home) .entry-content > :not(.article-series-cards) a:focus-visible { background-size: 100% 100%; color: var(--ink); }
.single-post .entry-content :is(hr, .wp-block-separator), .page .entry-content :is(hr, .wp-block-separator) {
	border: 0 !important; height: 1.4rem; margin-block: 2.6rem; opacity: 1;
	background: no-repeat center / 1.4rem url("../img/mark.svg");
}
.single-post .entry-tags, .single-post .entry-tags a { font-family: var(--sans); font-size: var(--wp--preset--font-size--x-small); font-weight: 600; color: var(--ink-2); text-transform: none; }
.single-post .entry-tags a { border: 0; padding: 0; background: linear-gradient(var(--rule), var(--rule)) no-repeat 0 100% / 100% 1px; }
.single-post .entry-tags a:hover { color: var(--ink); background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 100% / 100% 100%; }
.tnp-essay-end { margin-top: 2.5rem; }
.tnp-essay-end .tnp-author { max-width: var(--theme-narrow-container-max-width, 720px); width: var(--theme-container-edge-spacing, 88vw); margin: 0 auto 3rem; padding-top: 1.25rem; border-top: 2px solid var(--ink); }

.tnp-author > * { margin: 0; }
.tnp-author__label { font-family: var(--sans); font-weight: 700; font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.5rem !important; }
.tnp-author__text { color: var(--ink-2); font-size: 1.05rem; }
.ct-related-posts-container { background: var(--paper); }
.ct-related-posts .ct-module-title { font-family: var(--serif); font-size: var(--wp--preset--font-size--x-large); font-weight: 600; text-transform: none; text-align: start; }
.ct-related-posts .related-entry-title a { color: var(--ink); background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 88% / 0% 0.36em; transition: background-size var(--t-move) var(--ease); }
.ct-related-posts article:hover .related-entry-title a { background-size: 100% 0.36em; }
.ct-related-posts .entry-meta, .ct-related-posts .entry-meta a { font-family: var(--sans); font-size: var(--wp--preset--font-size--x-small); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }

/* ---------- 11. Blocksy's lists: all essays, a theme, a search ---------- */
:is(.blog, .archive, .search) .hero-section .page-title { font-size: var(--wp--preset--font-size--xx-large); }
:is(.blog, .archive, .search) .hero-section .page-description { color: var(--ink-2); max-width: 52ch; }
.entries[data-layout="simple"] > article.entry-card {
	display: grid; grid-template-columns: minmax(0, 1fr) 12.5rem; gap: 0.4rem 2.25rem; align-items: start;
	padding-block: 1.75rem; border-top: 1px solid var(--rule); margin: 0; background: none; box-shadow: none;
}
.entries[data-layout="simple"] > article.entry-card:last-child { border-bottom: 1px solid var(--rule); }
.entries[data-layout="simple"] > article.entry-card { padding-inline: 0; border-radius: 0; }
.entries[data-layout="simple"] > article.entry-card > .ct-media-container { grid-column: 2; grid-row: 1 / span 4; width: 100%; max-width: none; margin: 0; border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 3; }
.entries[data-layout="simple"] > article.entry-card > .ct-media-container img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); transition: transform 900ms var(--ease), filter var(--t-move) var(--ease); }
.entries[data-layout="simple"] > article.entry-card:hover > .ct-media-container img { transform: scale(1.04); filter: saturate(1); }
.entries[data-layout="simple"] > article.entry-card > .card-content { grid-column: 1; grid-row: 1; padding: 0; margin: 0; }
.entries[data-layout="simple"] > article.entry-card > .card-content > * { margin-block: 0 0.55rem; }
.entries .entry-card .entry-meta, .entries .entry-card .entry-meta a { font-family: var(--sans); font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.entries .entry-card .entry-title { font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.2; font-weight: 600; }
.entries .entry-card .entry-title a { color: var(--ink); background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 88% / 0% 0.36em; transition: background-size var(--t-move) var(--ease); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.entries .entry-card:hover .entry-title a, .entries .entry-card .entry-title a:focus-visible { background-size: 100% 0.36em; }
.entries .entry-card .entry-excerpt { font-family: var(--text); color: var(--ink-2); font-size: var(--wp--preset--font-size--small); }
.ct-pagination { font-family: var(--sans); font-weight: 700; }
.ct-pagination .current { background: var(--mark); color: var(--ink); border-color: var(--mark); }

/* ---------- 12. Blocksy's footer: dark, so every state of every word is set here ---------- */
[data-footer] .ct-footer.ct-footer, [data-footer] .ct-footer [data-row] { background: var(--night); }
[data-footer] .ct-footer [data-row="bottom"] { border-top: 1px solid rgba(238, 232, 217, 0.14); }
[data-footer] .ct-footer, [data-footer] .ct-footer :is(p, li, span, .ct-footer-copyright) { color: var(--on-night-2); font-family: var(--sans); }
[data-footer] .ct-footer a:link, [data-footer] .ct-footer a:visited { color: var(--on-night); text-decoration: none; background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 100% / 0% 0.18em; transition: background-size var(--t-move) var(--ease); }
[data-footer] .ct-footer a:hover, [data-footer] .ct-footer a:focus-visible { color: var(--on-night); background-size: 100% 0.18em; }
[data-footer] .ct-footer a:active { color: var(--mark); }
[data-footer] .ct-footer a:focus-visible { outline: 3px solid var(--mark); outline-offset: 3px; }
[data-footer] .ct-footer .tnp-mark { display: block; width: 2.5rem; height: 2.5rem; color: var(--on-night); }
[data-footer] .ct-footer .tnp-mark svg { width: 100%; height: 100%; }
[data-footer] .ct-footer .tnp-footer__name { font-weight: 800; font-size: 0.8rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--on-night); margin: 0.6rem 0 0; }
[data-footer] .ct-footer .tnp-footer__line { font-family: var(--text); font-style: normal; font-size: 1.05rem; max-width: 32ch; margin-top: 1.1rem; }
[data-footer] .ct-footer .tnp-footer__head { font-weight: 700; font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 0.75rem; }
[data-footer] .ct-footer .tnp-footer__links { list-style: none; margin: 0; padding: 0; font-weight: 600; font-size: var(--wp--preset--font-size--small); }
[data-footer] .ct-footer .tnp-footer__links li { margin: 0 0 0.55rem; }
[data-footer] .ct-footer .ct-footer-copyright { font-size: var(--wp--preset--font-size--x-small); }

/* ---------- 13b. A missing address ---------- */
.tnp-404 { padding-block: clamp(3rem, 9vw, 7rem); max-width: calc(720px + 2 * clamp(1rem, 4vw, 2.5rem)); }
.tnp-404 > * { margin: 0 0 1.1rem; }
.tnp-404__title { font-size: clamp(2.3rem, 5.2vw, 4.1rem); line-height: 1.06; letter-spacing: -0.025em; }
.tnp-404__text { font-family: var(--text); font-size: 1.15rem; color: var(--ink-2); max-width: 48ch; }
.tnp-404__text a { color: var(--ink); background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 100% / 100% 0.22em; transition: background-size var(--t-move) var(--ease); }
.tnp-404__text a:hover, .tnp-404__text a:focus-visible { background-size: 100% 100%; }
.tnp-404 .ct-search-form { max-width: 30rem; margin-top: 1.5rem; }
.tnp-404 .ct-search-form input[type="search"] { border: 2px solid var(--ink); border-radius: 4px; background: var(--paper); font-family: var(--sans); color: var(--ink); }

/* ---------- 13. Pages (About, Subscribe) ---------- */
body.page:not(.home) .hero-section .page-title { font-size: clamp(2.3rem, 5.2vw, 4.1rem); line-height: 1.06; letter-spacing: -0.025em; }
body.page:not(.home) .entry-content { font-family: var(--text); font-size: clamp(1.15rem, 1.4vw, 1.28rem); line-height: 1.72; }
.tnp-subscribe--page { background: transparent; border: 0; padding-block: 0.75rem 0; }

/* ---------- 14. An essay's outline: Autoriah Outline makes it, places it and moves it; this is its look ---------- */
/* functions.php answers post_outline_plain_look with no, so the plugin's plain look stays off and these draw it. Its
   own stylesheet places the rail (beside the essay where it fits, from 1300), holds it in view and shows the button.
   🔴 A modifier is written with its block (.post-outline.post-outline--rail): Blocksy's width for every block in an
   essay has one class's weight and loads later (the plugin's README). */
.single-post .entry-content > .post-outline { margin-block: 0 2.5rem; font-family: var(--sans); }
.post-outline__box { border-block: 1px solid var(--rule); }
.post-outline__head {
	display: flex; align-items: center; gap: 0.75rem; padding: 0.95rem 0; cursor: pointer; list-style: none;
	font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
}
.post-outline__head::-webkit-details-marker { display: none; }
.post-outline__count { color: var(--ink-3); letter-spacing: 0.06em; }
.post-outline__head::after {
	content: ""; margin-left: auto; width: 0.55rem; height: 0.55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: translateY(-0.15rem) rotate(45deg); transition: transform var(--t-move) var(--ease);
}
.post-outline__box[open] > .post-outline__head::after { transform: translateY(0.12rem) rotate(-135deg); }
.post-outline__list { list-style: none; counter-reset: part; margin: 0; padding: 0 0 1rem; }
.post-outline__list > li { counter-increment: part; display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); align-items: baseline; margin: 0; }
.post-outline__list > li::before { content: counter(part, decimal-leading-zero); font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-3); }
html .post-outline__list a, html .single-post .entry-content .post-outline__list a {
	display: block; padding: 0.42rem 0; font-family: var(--sans); font-size: 0.94rem; font-weight: 600; line-height: 1.35; color: var(--ink-2); text-decoration: none;
	background: none; transition: color var(--t-quick) var(--ease);
}
html .post-outline__list a:hover, html .post-outline__list a:focus-visible, html .single-post .entry-content .post-outline__list a:hover { color: var(--ink); background: none; }
html .post-outline__head:focus-visible, html .post-outline__list a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
/* The part you are reading: ink, its number ink, a highlight behind its words (the link stays a full-width target). */
html .post-outline__list a[aria-current] { color: var(--ink); }
.post-outline__list a > span { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.post-outline__list a[aria-current] > span { background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 82% / 100% 0.38em; }
.post-outline__list > li:has(> a[aria-current])::before { color: var(--ink); }
/* Beside the essay (the plugin adds post-outline--rail only where it measured that it fits). */
.post-outline.post-outline--rail .post-outline__box { border: 0; scrollbar-width: thin; }
.post-outline.post-outline--rail .post-outline__head { padding-top: 0; }
.post-outline.post-outline--rail .post-outline__head::after { display: none; }
html .post-outline.post-outline--rail .post-outline__list a { font-size: 0.86rem; padding-block: 0.34rem; }
/* The phone's way in: a small ink button, bottom right, once the outline at the top has scrolled away. */
.post-outline-button {
	display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.7rem 1rem; border: 0; border-radius: 999px; cursor: pointer;
	font-family: var(--sans); font-size: 0.85rem; font-weight: 700; color: var(--paper); background: var(--ink);
	box-shadow: 0 4px 0 0 var(--mark), 0 14px 30px -14px rgba(20, 19, 14, 0.6);
	transform: translateY(0.75rem);
	transition: opacity var(--t-move) var(--ease), transform var(--t-move) var(--ease), visibility 0s linear var(--t-move);
}
.post-outline-button.post-outline-button--on { transform: none; transition-delay: 0s; }
.post-outline-button__n { font-variant-numeric: tabular-nums; color: var(--mark); }
html .post-outline-button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---------- 15. Pop-ups: Autoriah Form Pop-up's subscribe card, and the outline's sheet on a phone (their look) ---------- */
/* functions.php answers form_popup_look with no. The plugins' own stylesheets centre the card, keep the page still
   behind it, raise it from the bottom edge on a phone and place the cross. */
:is(.form-popup, .post-outline-sheet) { color: var(--ink); }
:is(.form-popup, .post-outline-sheet)::backdrop { background: rgba(20, 19, 14, 0.58); }
html .form-popup__card, html .post-outline-sheet__card {
	padding: clamp(1.75rem, 4vw, 2.5rem); background: var(--paper); color: var(--ink); border-radius: 8px; box-shadow: 0 30px 80px -30px rgba(20, 19, 14, 0.7);
}
.form-popup__label { margin-bottom: 1rem; }
.form-popup__title { font-size: clamp(1.6rem, 3.4vw, 2.1rem); line-height: 1.15; margin: 0 0 0.6rem; padding-right: 2.5rem; }
.form-popup__lines { color: var(--ink-2); margin: 0 0 1.4rem; font-size: 1.05rem; max-width: 40ch; }
.form-popup__note { margin: 1rem 0 0; font-family: var(--sans); font-size: var(--wp--preset--font-size--x-small); color: var(--ink-2); }
.form-popup__close, .post-outline-sheet__close { border-radius: 50%; color: var(--ink); transition: background-color var(--t-quick) var(--ease); }
html .form-popup__close { top: 0.75rem; right: 0.75rem; }
html .post-outline-sheet__close { top: 0.75rem; right: 0.75rem; }
.form-popup__close:hover, .post-outline-sheet__close:hover { background: var(--paper-2); }
html .form-popup__close:focus-visible, html .post-outline-sheet__close:focus-visible { outline: 3px solid var(--ink); outline-offset: 0; }
html .post-outline-sheet__card { padding-top: 1.4rem; }
.post-outline-sheet__title { margin: 0.2rem 3rem 0.9rem 0; font-family: var(--sans); font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.post-outline-sheet .post-outline__list { padding-bottom: 0.25rem; }
@media (prefers-reduced-motion: no-preference) {
	:is(.form-popup, .post-outline-sheet)[open] :is(.form-popup__card, .post-outline-sheet__card) { animation: tnp-arrive var(--t-settle) var(--ease) both; }
	:is(.form-popup, .post-outline-sheet)[open]::backdrop { animation: tnp-fade var(--t-move) var(--ease) both; }
}
@keyframes tnp-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 15b. Share links and series: the plugins' own plain looks, in this site's type and colours ---------- */
.share-links, .article-series, .article-series-cards { font-family: var(--sans); }
.share-links { --share-links-line: var(--rule); }
.article-series, .article-series-cards {
	--article-series-accent: var(--ink); --article-series-rule: var(--rule); --article-series-surface: var(--paper-2); --article-series-muted: var(--ink-2);
}
/* A series' card (the front page's "Read in order", /series/) is drawn like a Recent essays card: a picture and a title,
   no box, on the same three columns, so two series sit where two essays would. */
.article-series-cards { --article-series-picture-ratio: 3 / 2; }
.article-series-cards .article-series-cards__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 3.5vw, 3rem) clamp(1.25rem, 2.5vw, 2.25rem); }
html .article-series-card { gap: 1.1rem; overflow: visible; border: 0; border-radius: 0; background: none; }
.article-series-card__picture { overflow: hidden; border-radius: 4px; background: var(--paper-2); }
.article-series-card__img { border-radius: 4px; filter: saturate(0.85); transition: transform 900ms var(--ease), filter var(--t-move) var(--ease); }
.article-series-card:hover .article-series-card__img { transform: scale(1.04); filter: saturate(1); }
html .article-series-card__title, html .article-series-card__count, html .article-series-card__teaser { padding-inline: 0; }
html .article-series-card__title { padding-block: 0; font-family: var(--serif); font-size: clamp(1.2rem, 1.55vw, 1.4rem); line-height: 1.24; font-weight: 600; text-wrap: pretty; }
html .article-series-card__link { color: var(--ink); text-decoration: none; }
.article-series-card__name {
	display: inline !important; background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 88% / 0% 0.36em;
	transition: background-size var(--t-move) var(--ease); -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
html .article-series-card__link:hover .article-series-card__name { text-decoration: none; }
.article-series-card:hover .article-series-card__name, .article-series-card__link:focus-visible .article-series-card__name { background-size: 100% 0.36em; }
html .article-series-card__count { margin: -0.6rem 0 0; font-size: var(--wp--preset--font-size--x-small); font-weight: 600; color: var(--ink-3); }
@media (max-width: 960px) { .article-series-cards .article-series-cards__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .article-series-cards .article-series-cards__list { grid-template-columns: 1fr; } }

/* ---------- Phones and narrow windows ---------- */
@media (max-width: 960px) {
	.tnp-hero__inner { grid-template-columns: 1fr; }
	.tnp-lens-field { aspect-ratio: auto; height: 17rem; max-width: 36rem; }
	.tnp-feature__card { grid-template-columns: 1fr; }
	.tnp-index { columns: 1; }
	.tnp-cards__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* A phone: pop-ups rise from the bottom edge, full width, within reach of a thumb. */
@media (max-width: 600px) {
	html .form-popup__card, html .post-outline-sheet__card { border-radius: 14px 14px 0 0; padding-bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 781px) {
	.tnp-pattern__lines li { grid-template-columns: 3rem 1fr; }
	.tnp-pattern__foot { padding-left: 3rem; }
}
@media (max-width: 720px) {
	.entries[data-layout="simple"] > article.entry-card { grid-template-columns: minmax(0, 1fr) 6.5rem; gap: 0.3rem 1rem; padding-block: 1.25rem; }
	.entries .entry-card .entry-excerpt { display: none; }
	#header .site-title, #header .site-title a { font-size: 0.72rem; }
	#header .site-title a::before { width: 2.15rem; height: 2.15rem; }
	html .tnp-row { grid-template-columns: minmax(0, 1fr) 6.5rem; grid-template-areas: "date img" "text img"; gap: 0.4rem 1rem; padding-block: 1.25rem; }
	.tnp-row__date { grid-area: date; padding-top: 0; }
	.tnp-row__text { grid-area: text; }
	.tnp-row__img { grid-area: img; }
	.tnp-row__excerpt { display: none; }
	/* The cards become rows again on a phone: the title beside a small picture, one rule each. */
	.tnp-cards__list { grid-template-columns: 1fr; gap: 0; border-bottom: 1px solid var(--rule); }
	html .tnp-card { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: 1rem; align-items: start; padding-block: 1.25rem; border-top: 1px solid var(--rule); }
	.tnp-card__img { grid-column: 2; grid-row: 1; }
	.tnp-card__text { grid-column: 1; grid-row: 1; }
	.tnp-card__title { font-size: 1.2rem; }
	.tnp-lens-field { --r: 3.4rem; --lh: 1.9rem; height: 15rem; }
	.tnp-lens-field__text--sharp { --r: 3.4rem; }
	.tnp-lens-field__text p { font-size: 1rem; }
	.tnp-lens-field__text { inset: 0.9rem 1rem; }
	.tnp-lens { left: calc(1rem + var(--x, 50%) - var(--r) * 1.25); top: calc(0.9rem + var(--y, 50%) - var(--r) * 1.25); }
	.tnp-wordmark__words { font-size: 0.72rem; }
	.tnp-mark { width: 2.15rem; height: 2.15rem; }
}

/* A touch screen has no pointer resting on anything: a highlight that means "pointed at" must not stick after a tap. */
@media (hover: none) {
	.tnp-feature__card:hover .tnp-feature__title a, .tnp-row:hover .tnp-row__title a, .tnp-card:hover .tnp-card__title a, .entries .entry-card:hover .entry-title a,
	.ct-related-posts article:hover .related-entry-title a, .tnp-index a:hover .tnp-index__name { background-size: 0% 0.36em; }
	.tnp-kicker a:hover { background: none; }
}

/* ---------- Arrivals (only with script on; never for reduced motion) ---------- */
@keyframes tnp-arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tnp-draw { from { background-size: 0% 0.42em; } to { background-size: 100% 0.42em; } }
@media (prefers-reduced-motion: no-preference) {
	.tnp-js .tnp-arrive { animation: tnp-arrive var(--t-settle) var(--ease) both; }
	.tnp-js .tnp-hero__copy > :nth-child(2), .tnp-js .tnp-essay__head > :nth-child(2) { animation-delay: 80ms; }
	.tnp-js .tnp-hero__copy > :nth-child(3), .tnp-js .tnp-essay__head > :nth-child(3) { animation-delay: 160ms; }
	.tnp-js .tnp-hero__copy > :nth-child(4) { animation-delay: 240ms; }
	.tnp-js .tnp-hero__copy > :nth-child(5) { animation-delay: 320ms; }
	.tnp-js .tnp-hero__title mark.tnp-hl { animation: tnp-draw var(--t-settle) var(--ease) 560ms both; }
	.tnp-ready .tnp-settle:not(.is-in) { opacity: 0; transform: translateY(18px); }
	.tnp-ready .tnp-settle { transition: opacity var(--t-settle) var(--ease), transform var(--t-settle) var(--ease); }
	.tnp-ready .tnp-pattern:not(.is-in) .tnp-pattern__lines mark.tnp-hl { background-size: 0% 0.86em; }
	.tnp-ready .tnp-pattern .tnp-pattern__lines mark.tnp-hl { transition: background-size var(--t-settle) var(--ease); }
	.tnp-ready .tnp-pattern .tnp-pattern__lines li:nth-child(2) mark.tnp-hl { transition-delay: 400ms; }
	.tnp-ready .tnp-pattern .tnp-pattern__lines li:nth-child(3) mark.tnp-hl { transition-delay: 800ms; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
	html { scroll-behavior: auto !important; }
}