/* =================================================================================================
 * Two Colour Guides 1.0.0, the page components for The Bonus Press.
 *
 * Every page this plugin writes is one sheet of paper. The sheet holds, from the top down: the
 * trail, the hero, the ranking, the price line, and then the body of numbered parts with the
 * worked sum, the table, the figure, the questions, the care note and the colophon inside it.
 *
 * THE ONE WIDTH, which is the rule this file exists to keep.
 *
 * Every block in the page flow starts on the sheet's left rule and finishes on its right rule:
 * prose, headings, tables, figures, the price line and the ranking alike. No block in the flow
 * carries a horizontal inset, a width or a box of its own, and there is no second, narrower
 * measure for prose anywhere in this file. That holds inside the media queries at the foot of the
 * file as well, which is where it has been broken before: nothing down there touches a horizontal
 * padding, a margin or a max-width on a block in the flow. What the media queries change is the
 * number of columns a grid stands in, the size of type, and the press effects.
 *
 * An inset exists in exactly two places, and both of them are objects with an edge of their own,
 * which is what the brief allows: inside a table cell, and inside the frame of a figure. A list
 * keeps its marker inside its own content box, so a bullet starts on the rule rather than being
 * pushed in from it.
 *
 * Risograph. Flat colour, grain over flat areas, square corners. No gradient, no shadow, no
 * rounded corner, nothing floating above anything. Where a coral area and a blue area meet, the
 * overlap multiplies, which is what the press does.
 *
 * Colour, type and measure come from the theme on :root. The block below is the fallback, so a
 * sheet still reads if the theme is swapped out. No value in it is invented: each one is the token
 * as TOKENS.md sets it down.
 * ============================================================================================== */

.tc-sheet {
	--tcs-paper: var(--tc-paper, #F7F3EC);
	--tcs-paper-2: var(--tc-paper-2, #EFE9DF);
	--tcs-ink: var(--tc-ink, #16181F);
	--tcs-ink-2: var(--tc-ink-2, #4A4F5C);
	--tcs-navy: var(--tc-navy, #27356B);
	--tcs-blue-d: var(--tc-blue-d, #005A90);
	--tcs-coral-d: var(--tc-coral-d, #C9263A);

	/* The two press inks. Flat areas and display figures of 2rem and over, and nothing else:
	   coral measures 3.13 on the paper and blue 4.28, so neither of them carries a sentence. */
	--tcs-blue: var(--tc-blue, #0078BF);
	--tcs-coral: var(--tc-coral, #F15060);

	/* Tints. Backgrounds only. Ink on the blue tint measures 14.27 and on the coral tint 14.24. */
	--tcs-tint-b: var(--tc-tint-b, #DCE8F5);
	--tcs-tint-c: var(--tc-tint-c, #FBE0E2);

	--tcs-rule: var(--tc-rule, #CFC7B8);
	--tcs-display: var(--tc-display, "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif);
	--tcs-body: var(--tc-body, "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
	--tcs-mono: var(--tc-mono, "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
	--tcs-gap: var(--tc-gap, clamp(28px, 3.4vw, 46px));

	/* No width and no inset. The sheet fills the column the theme has already measured, so the
	   left and the right rule of this sheet are the left and the right rule of the header row and
	   of the footer row. */
	box-sizing: border-box;
	display: block;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--tcs-ink);
	font-family: var(--tcs-body);
	font-size: 1.0625rem;
	line-height: 1.62;
	font-variant-numeric: lining-nums;
}

.tc-sheet *,
.tc-sheet *::before,
.tc-sheet *::after {
	box-sizing: border-box;
	border-radius: var(--tc-radius, 0);
	box-shadow: none;
	text-shadow: none;
}

/* =================================================================================================
 * The gate.
 *
 * Read this before adding anything to the file. Every block that stands in the flow is cleared of
 * a horizontal inset, of a width and of a measure of its own, right here, once. A block added
 * later inherits the rule by standing in one of these places, and the only way to give something
 * an inset is to state it again below with the same weight, which the two sanctioned objects do
 * and nothing else does.
 * ============================================================================================== */
.tc-sheet > *,
.tc-sheet .tc-body > *,
.tc-sheet .tc-part > *,
.tc-sheet .tc-trail > ol,
.tc-sheet .tc-priceline > *,
.tc-sheet .tc-sum > *,
.tc-sheet .tc-care > *,
.tc-sheet .tc-colophon > * {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
	float: none;
}

/* The vertical rhythm between blocks. One measure, from the theme. */
.tc-sheet > * + * {
	margin-top: var(--tcs-gap);
}

/* =================================================================================================
 * Headings, prose and links
 * ============================================================================================== */
.tc-sheet h1,
.tc-sheet h2,
.tc-sheet h3,
.tc-sheet h4 {
	font-family: var(--tcs-display);
	font-weight: 700;
	color: var(--tcs-navy);
	letter-spacing: -0.015em;
	font-variant-numeric: lining-nums tabular-nums;
	text-wrap: balance;
}

.tc-sheet h1 {
	font-size: clamp(2.05rem, 1.35rem + 3.1vw, 3.3rem);
	line-height: 1.06;
	margin: 0;
}

.tc-sheet h2 {
	font-size: clamp(1.5rem, 1.22rem + 1.25vw, 2.05rem);
	line-height: 1.14;
	margin: 0 0 0.6rem;
}

.tc-sheet h3 {
	font-size: clamp(1.14rem, 1.06rem + 0.4vw, 1.32rem);
	line-height: 1.2;
	margin: 1.6rem 0 0.45rem;
}

.tc-sheet p {
	margin: 0 0 1rem;
}

.tc-sheet strong,
.tc-sheet b {
	font-weight: 700;
}

/* Emphasis in the darker coral, which measures 4.97 and carries a word safely. */
.tc-sheet em {
	font-style: normal;
	font-weight: 700;
	color: var(--tcs-coral-d);
}

.tc-sheet a {
	color: var(--tcs-blue-d);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

.tc-sheet a:hover,
.tc-sheet a:focus-visible {
	color: var(--tcs-coral-d);
	text-decoration-thickness: 2px;
}

/* Lists. The marker sits inside the content box, so the first character of a bullet stands on the
   sheet's left rule and a wrapped line returns to that same rule. This is why no list in here
   carries a padding on its start edge. */
.tc-sheet .tc-part ul,
.tc-sheet .tc-part ol {
	margin: 0 0 1.1rem;
	list-style-position: inside;
}

.tc-sheet .tc-part ul {
	list-style-type: square;
}

.tc-sheet .tc-part li {
	margin: 0 0 0.45rem;
}

.tc-sheet .tc-part li::marker {
	color: var(--tcs-coral-d);
	font-family: var(--tcs-mono);
}

/* =================================================================================================
 * tc-trail: the breadcrumb, three steps. Home, the section, this page.
 * ============================================================================================== */
.tc-sheet .tc-trail {
	font-family: var(--tcs-mono);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tcs-ink-2);
	border-bottom: 1px solid var(--tcs-rule);
	padding-bottom: 0.5rem;
}

.tc-sheet .tc-trail ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.1rem 0.55rem;
	margin: 0;
	list-style: none;
}

.tc-sheet .tc-trail li + li::before {
	content: "/";
	margin-right: 0.55rem;
	color: var(--tcs-rule);
}

.tc-sheet .tc-trail a {
	color: var(--tcs-blue-d);
	text-decoration: none;
}

.tc-sheet .tc-trail a:hover,
.tc-sheet .tc-trail a:focus-visible {
	text-decoration: underline;
}

.tc-sheet .tc-trail__here {
	color: var(--tcs-ink);
	font-weight: 700;
}

/* =================================================================================================
 * tc-top: the hero. The key as a statement, a dated line, and the one figure that decides the page.
 * ============================================================================================== */
.tc-sheet .tc-top {
	border-bottom: 3px solid var(--tcs-ink);
	padding-bottom: 1.1rem;
}

.tc-sheet .tc-top__dated {
	font-family: var(--tcs-mono);
	font-size: 0.78rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--tcs-ink-2);
	margin: 0 0 0.7rem;
}

/* The one figure. A display numeral in the bright ink, which is the one place type is set in it,
   and it is never smaller than 2rem at any width. */
/* The figure reads second, not first.
 *
 * Ten of these pages turn on a nought: a British licensee may take £0.00 from a credit card,
 * online bingo publishes no payback at all, this site asks a reader for 0 pieces of personal
 * information. On each of them the nought is the whole point of the page. Set first and alone in
 * display coral, it read instead as a sum that had failed, and the line that explained it sat
 * underneath where the eye arrived too late. Turning the order round costs nothing and fixes it
 * everywhere: the reader is told what is being counted, and only then given the number, so a
 * nought lands as an answer rather than as a blank. The markup is untouched, so no page had to be
 * rewritten for it.
 */
.tc-sheet .tc-top__decider {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	margin: 1.1rem 0 0;
}

.tc-sheet .tc-top__says {
	order: 1;
}

.tc-sheet .tc-top__num {
	order: 2;
}

.tc-sheet .tc-top__num {
	font-family: var(--tcs-display);
	font-weight: 700;
	font-size: clamp(2.5rem, 1.9rem + 3.4vw, 4.4rem);
	line-height: 0.92;
	letter-spacing: -0.03em;
	color: var(--tcs-coral);
	font-variant-numeric: lining-nums tabular-nums;
}

.tc-sheet .tc-top__says {
	font-family: var(--tcs-mono);
	font-size: 0.86rem;
	line-height: 1.4;
	color: var(--tcs-ink-2);
}

/* =================================================================================================
 * tc-stand: the slot the ranking stands in.
 *
 * The ranking is drawn by the Offer Columns plugin and nothing here touches how it looks. This is
 * an anchor and a place in the flow, with no inset, no background and no edge of its own.
 * ============================================================================================== */
.tc-sheet .tc-stand {
	display: block;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	border: 0;
	background: none;
}

/* =================================================================================================
 * tc-priceline: the signature block.
 *
 * A ruled strip that puts this page's offer into pounds per pound, printed like an entry in a
 * price list. Rules above and below, the items standing in columns across the sheet, and the sum
 * marked by a rule of its own. The strip has no horizontal padding, so the first label stands on
 * the left rule and the last figure finishes on the right one.
 * ============================================================================================== */
.tc-sheet .tc-priceline {
	position: relative;
	border-top: 1px solid var(--tcs-ink);
	border-bottom: 1px solid var(--tcs-ink);
	padding-top: 1rem;
	padding-bottom: 1rem;
}

/* The press band. Two flat areas of ink, coral under blue, overlapping by two pixels, with the
   overlap multiplied, which is the third colour the press gives where two inks meet. Grain over
   both. Decorative, and there is no text on it. */
.tc-sheet .tc-priceline::before,
.tc-sheet .tc-priceline::after {
	content: "";
	position: absolute;
	top: -7px;
	left: 0;
	height: 6px;
	background-color: var(--tcs-coral);
	background-image: var(--tc-grain);
	background-repeat: repeat;
	width: 62%;
}

.tc-sheet .tc-priceline::after {
	left: 60%;
	width: 40%;
	background-color: var(--tcs-blue);
	mix-blend-mode: multiply;
}

.tc-sheet .tc-priceline__what {
	font-family: var(--tcs-mono);
	font-size: 0.78rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--tcs-ink-2);
	margin: 0 0 0.85rem;
}

/* The strip is now a table of two columns, because it compares two prices for one offer: what the
   rack above charges, and what the same offer would cost under a British licence. It carries no
   padding of its own, so the row labels start on the sheet's left rule and the right column
   finishes on its right rule. The figures are tabular so the two columns line up digit for digit,
   which is the whole point of setting them side by side. */
.tc-sheet .tc-priceline__set {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-variant-numeric: lining-nums tabular-nums;
}

.tc-sheet .tc-priceline__set thead th {
	font-family: var(--tcs-body);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-align: right;
	color: var(--tcs-ink-2);
	padding: 0 0 0.5rem;
	border-bottom: 1px solid var(--tcs-rule);
}

.tc-sheet .tc-priceline__set thead th:last-child {
	color: var(--tcs-blue-d);
}

.tc-sheet .tc-priceline__set tbody th {
	font-family: var(--tcs-body);
	font-size: 0.95rem;
	font-weight: 600;
	text-align: left;
	color: var(--tcs-ink-2);
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--tcs-rule);
	width: 44%;
}

.tc-sheet .tc-priceline__figure {
	font-family: var(--tcs-mono);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.15;
	text-align: right;
	color: var(--tcs-ink);
	margin: 0;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--tcs-rule);
	width: 28%;
}

/* The comparison column is set in the second ink, so the eye can tell at a glance which price is
   the one on sale here and which is the measure it is being sold against. */
.tc-sheet .tc-priceline__figure--alt {
	color: var(--tcs-blue-d);
}

/* The sum, which is what the page is about. */
.tc-sheet .tc-priceline__row--sum th,
.tc-sheet .tc-priceline__row--sum td {
	border-bottom: 0;
	border-top: 3px solid var(--tcs-coral-d);
	padding-top: 0.7rem;
}

.tc-sheet .tc-priceline__row--sum th {
	color: var(--tcs-coral-d);
}

.tc-sheet .tc-priceline__row--sum .tc-priceline__figure {
	font-family: var(--tcs-display);
	font-size: clamp(1.7rem, 1.4rem + 1.1vw, 2.4rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--tcs-coral);
}

.tc-sheet .tc-priceline__row--sum .tc-priceline__figure--alt {
	color: var(--tcs-blue);
}

.tc-sheet .tc-priceline__foot {
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--tcs-ink-2);
	margin: 1rem 0 0;
}

/* =================================================================================================
 * tc-body and tc-part: the numbered parts of prose, each opening on a question.
 * ============================================================================================== */
.tc-sheet .tc-body {
	display: block;
}

.tc-sheet .tc-body > * + * {
	margin-top: var(--tcs-gap);
}

.tc-sheet .tc-part {
	display: block;
	border-top: 1px solid var(--tcs-rule);
	padding-top: 1.1rem;
}

/* The part number. A display numeral in the second ink, never under 2rem, standing over the
   heading rather than beside it, so the heading starts on the rule like everything else. */
.tc-sheet .tc-part__num {
	font-family: var(--tcs-display);
	font-weight: 700;
	font-size: clamp(2rem, 1.75rem + 1vw, 2.5rem);
	line-height: 0.9;
	letter-spacing: -0.02em;
	color: var(--tcs-blue);
	margin: 0 0 0.35rem;
	font-variant-numeric: lining-nums tabular-nums;
}

/* =================================================================================================
 * tc-sum: the worked calculation, shown as arithmetic.
 *
 * The figures are a mono column that lines up on the right, and the answer carries a rule over it,
 * the way a sum is set on paper. Nothing is drawn as a chart.
 * ============================================================================================== */
.tc-sheet .tc-sum {
	display: block;
	border-top: 1px solid var(--tcs-ink);
	border-bottom: 1px solid var(--tcs-ink);
	padding-top: 0.9rem;
	padding-bottom: 0.9rem;
	margin: 0 0 1.2rem;
}

.tc-sheet .tc-sum__head {
	font-family: var(--tcs-mono);
	font-size: 0.78rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--tcs-ink-2);
	margin: 0 0 0.7rem;
}

.tc-sheet .tc-sum__steps {
	margin: 0;
	list-style: none;
	font-family: var(--tcs-mono);
	font-variant-numeric: lining-nums tabular-nums;
}

.tc-sheet .tc-sum__steps li {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.3rem 1rem;
	align-items: baseline;
	padding-top: 0.3rem;
	padding-bottom: 0.3rem;
}

.tc-sheet .tc-sum__says {
	font-family: var(--tcs-body);
	font-size: 0.95rem;
	color: var(--tcs-ink-2);
}

.tc-sheet .tc-sum__maths {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--tcs-ink);
	text-align: right;
	white-space: nowrap;
}

/* The answer. The rule over it is the rule of the sum, and it runs the whole width of the sheet. */
.tc-sheet .tc-sum__total {
	border-top: 2px solid var(--tcs-ink);
	margin-top: 0.4rem;
	padding-top: 0.5rem;
}

.tc-sheet .tc-sum__total .tc-sum__says {
	font-weight: 700;
	color: var(--tcs-ink);
}

.tc-sheet .tc-sum__total .tc-sum__maths {
	font-size: 1.25rem;
	color: var(--tcs-coral-d);
}

.tc-sheet .tc-sum__note {
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--tcs-ink-2);
	margin: 0.8rem 0 0;
}

/* =================================================================================================
 * tc-table: figures in rows.
 *
 * The table stands on both rules of the sheet. The cell is an object with an edge of its own, so
 * the inset lives inside it, and the first and the last cell of a row give that inset up, which
 * puts the words in the first column and the figures in the last one on the sheet's own rules.
 * ============================================================================================== */
.tc-sheet .tc-table {
	width: 100%;
	border-collapse: collapse;
	border-top: 3px solid var(--tcs-ink);
	border-bottom: 1px solid var(--tcs-ink);
	font-size: 0.95rem;
	margin: 0 0 1.2rem;
}

.tc-sheet .tc-table caption {
	caption-side: top;
	text-align: left;
	font-family: var(--tcs-mono);
	font-size: 0.78rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--tcs-ink-2);
	padding-bottom: 0.55rem;
}

.tc-sheet .tc-table th,
.tc-sheet .tc-table td {
	padding: 0.55rem clamp(0.5rem, 1.1vw, 0.85rem);
	border-bottom: 1px solid var(--tcs-rule);
	text-align: left;
	vertical-align: top;
}

.tc-sheet .tc-table th:first-child,
.tc-sheet .tc-table td:first-child {
	padding-left: 0;
}

.tc-sheet .tc-table th:last-child,
.tc-sheet .tc-table td:last-child {
	padding-right: 0;
}

.tc-sheet .tc-table thead th {
	background-color: var(--tcs-tint-b);
	font-family: var(--tcs-body);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.03em;
	color: var(--tcs-navy);
	border-bottom: 1px solid var(--tcs-ink);
}

.tc-sheet .tc-table tbody tr:nth-child(even) {
	background-color: var(--tcs-paper-2);
}

.tc-sheet .tc-table tbody th {
	font-weight: 600;
	color: var(--tcs-ink);
}

/* A numeral cell. Mono, lined and tabular, so a column of figures can be read down. */
.tc-sheet .tc-table__num {
	font-family: var(--tcs-mono);
	font-variant-numeric: lining-nums tabular-nums;
	white-space: nowrap;
}

/* =================================================================================================
 * tc-figure: the chart, in a frame.
 *
 * The frame is the second of the two places an inset is allowed. The frame itself stands on the
 * sheet's two rules; the drawing sits inside it.
 * ============================================================================================== */
.tc-sheet .tc-figure {
	display: block;
	border: 1px solid var(--tcs-ink);
	padding-left: clamp(0.75rem, 1.6vw, 1.2rem);
	padding-right: clamp(0.75rem, 1.6vw, 1.2rem);
	padding-top: clamp(0.75rem, 1.6vw, 1.2rem);
	padding-bottom: clamp(0.6rem, 1.3vw, 1rem);
	margin: 0 0 1.2rem;
	background-color: var(--tcs-paper);
}

.tc-sheet .tc-figure img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

.tc-sheet .tc-figure__said {
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--tcs-ink-2);
	margin: 0.7rem 0 0;
	padding-top: 0.6rem;
	border-top: 1px solid var(--tcs-rule);
}

.tc-sheet .tc-figure__said b {
	color: var(--tcs-ink);
}

/* =================================================================================================
 * tc-ask: the questions, as a plain ruled list.
 *
 * A definition list and nothing more: no accordion, no two column band, no panel. Each question
 * carries a rule over it and the answer stands under it in full.
 * ============================================================================================== */
.tc-sheet .tc-ask {
	margin: 0;
}

.tc-sheet .tc-ask dt {
	font-family: var(--tcs-body);
	font-weight: 700;
	font-size: 1.06rem;
	line-height: 1.35;
	color: var(--tcs-navy);
	border-top: 1px solid var(--tcs-rule);
	padding-top: 0.75rem;
	margin: 0.9rem 0 0.4rem;
}

.tc-sheet .tc-ask dt:first-child {
	margin-top: 0;
}

.tc-sheet .tc-ask dd {
	margin: 0 0 1rem;
	padding: 0;
	color: var(--tcs-ink);
}

/* =================================================================================================
 * tc-care: the care note.
 *
 * Rules and a chip, not a panel: the note stands on the sheet's two rules like every other block,
 * so nothing in it is pushed in from them. The chip is an inline object with an edge of its own.
 * ============================================================================================== */
.tc-sheet .tc-care {
	display: block;
	border-top: 3px solid var(--tcs-blue-d);
	border-bottom: 1px solid var(--tcs-rule);
	padding-top: 1rem;
	padding-bottom: 1rem;
	font-size: 0.95rem;
}

.tc-sheet .tc-care h2 {
	font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
}

.tc-sheet .tc-care__age {
	display: inline-block;
	font-family: var(--tcs-mono);
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1;
	color: var(--tcs-paper);
	background-color: var(--tcs-coral-d);
	padding: 0.35rem 0.5rem;
	margin-right: 0.5rem;
}

.tc-sheet .tc-care__help {
	font-family: var(--tcs-mono);
	font-size: 0.95rem;
	color: var(--tcs-ink);
	margin: 0.6rem 0 0;
}

.tc-sheet .tc-care__help strong {
	font-size: 1.1rem;
}

/* =================================================================================================
 * tc-colophon: where to go next, three links, set like the colophon of a printed sheet.
 * ============================================================================================== */
.tc-sheet .tc-colophon {
	display: block;
	border-top: 1px solid var(--tcs-ink);
	padding-top: 1rem;
}

.tc-sheet .tc-colophon__title {
	font-family: var(--tcs-mono);
	font-size: 0.78rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--tcs-ink-2);
	margin: 0 0 0.9rem;
}

.tc-sheet .tc-colophon ol {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.2rem var(--tcs-gap);
	margin: 0;
	list-style: none;
}

.tc-sheet .tc-colophon li {
	border-top: 1px solid var(--tcs-rule);
	padding-top: 0.6rem;
}

.tc-sheet .tc-colophon a {
	display: block;
	text-decoration: none;
}

.tc-sheet .tc-colophon__name {
	display: block;
	font-family: var(--tcs-display);
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1.2;
	color: var(--tcs-blue-d);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

.tc-sheet .tc-colophon__said {
	display: block;
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--tcs-ink-2);
	margin-top: 0.25rem;
}

.tc-sheet .tc-colophon a:hover .tc-colophon__name,
.tc-sheet .tc-colophon a:focus-visible .tc-colophon__name {
	color: var(--tcs-coral-d);
	text-decoration-thickness: 2px;
}

/* =================================================================================================
 * The press effects.
 *
 * Misregistration: the second ink landing two pixels off the first, which is what a risograph does
 * when the paper shifts between passes.
 *
 * This was drawn as a second copy of the heading in a span, aria-hidden and laid behind the real
 * one. It looked right and it read wrong: aria-hidden keeps a copy away from a screen reader but
 * not out of the page's text, so every h1 on the site carried its own wording twice, and with it
 * the page's focus keyword twice. On a site whose whole purpose is ranking, a hundred headings
 * each stating their key two times over is not a risk worth taking for a two pixel offset.
 *
 * A shadow does the same job with no second copy of anything. The colour is the blue ink at the
 * same weight the copy carried, so the heading looks as it did.
 * ============================================================================================== */
.tc-sheet .tc-top__claim {
	position: relative;
	text-shadow: 2px 2px 0 rgba(0, 120, 191, 0.42);
}

/* A page written before the change may still carry the span. It is not drawn. */
.tc-sheet .tc-ghost {
	display: none;
}

/* =================================================================================================
 * The media queries.
 *
 * Columns, type and the press effects only. Not one rule below touches a horizontal padding, a
 * horizontal margin or a max-width on a block in the flow, so the one width holds at 1920, 1440,
 * 1280, 1100, 1024, 768 and 390 alike.
 * ============================================================================================== */

/* The price line and the colophon drop from three and four columns to two. */
@media (max-width: 860px) {
	/* A table of five or six columns of figures does not fit a phone and must not be made to: cut
	   the type down far enough and the numbers stop being readable, which is the one thing a table
	   on this site is for. So the table scrolls inside itself. Without this it simply overflowed,
	   and a page with a wide table took the whole document sideways with it: 179px of scroll at
	   390, which moved the header, the heading and every paragraph off their left rule together.
	   Turning the table into a block is what gives it a scroll port of its own; the rules above and
	   below it still start and finish on the sheet's two rules. */
	.tc-sheet .tc-table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		overscroll-behavior-x: contain;
	}

	/* The arithmetic is set on one line and held with nowrap, which is right while there is room
	   and wrong the moment there is not: at 600 the longest line ran 62px past the sheet and took
	   the whole document sideways with it, header and prose together. It gives up the nowrap here
	   rather than at 560, which is where the overflow actually began. */
	.tc-sheet .tc-sum__maths {
		text-align: left;
		white-space: normal;
	}

	/* The strip is a table now, so it needs type that fits rather than a column count. */
	.tc-sheet .tc-priceline__set tbody th,
	.tc-sheet .tc-priceline__set thead th {
		font-size: 0.82rem;
	}

	.tc-sheet .tc-priceline__figure {
		font-size: 1.05rem;
	}

	.tc-sheet .tc-colophon ol {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* One column, and the hero's figure sits over its line rather than beside it. */
@media (max-width: 560px) {
	.tc-sheet .tc-priceline__set thead th {
		font-size: 0.72rem;
		line-height: 1.25;
	}

	.tc-sheet .tc-priceline__set tbody th {
		width: 38%;
	}

	.tc-sheet .tc-colophon ol {
		grid-template-columns: 1fr;
	}

	/* On a phone this used to go back to a block, which puts the figure above its own caption
	   again and brings the nought problem back on exactly the screens with least room to recover
	   from it. The column stays. */
	.tc-sheet .tc-top__decider {
		gap: 0.3rem;
	}

	.tc-sheet .tc-table {
		font-size: 0.88rem;
	}

	/* The sum stacks: the words on one line and the arithmetic under them, left aligned and free to
	   wrap, so a long line of figures cannot push the sheet wider than the screen. */
	.tc-sheet .tc-sum__steps li {
		grid-template-columns: 1fr;
	}

}

/* A sheet on paper. The press effects are of no use to a printer that has one ink. */
@media print {
	.tc-sheet {
		font-size: 11pt;
	}

	.tc-sheet .tc-ghost,
	.tc-sheet .tc-priceline::before,
	.tc-sheet .tc-priceline::after {
		display: none;
	}

	.tc-sheet .tc-part,
	.tc-sheet .tc-figure,
	.tc-sheet .tc-table {
		break-inside: avoid;
	}
}

/* Forced colours: the grain, the ghost and the tints go, and the system takes the page over. */
@media (forced-colors: active) {
	.tc-sheet .tc-ghost,
	.tc-sheet .tc-priceline::before,
	.tc-sheet .tc-priceline::after {
		display: none;
	}

	.tc-sheet .tc-table thead th,
	.tc-sheet .tc-table tbody tr:nth-child(even),
	.tc-sheet .tc-care__age {
		background-color: Canvas;
		color: CanvasText;
		border: 1px solid CanvasText;
		forced-color-adjust: none;
	}
}

/* A reader who has asked for less movement gets no offset copy of the heading. */
@media (prefers-reduced-motion: reduce) {
	.tc-sheet .tc-ghost {
		display: none;
	}
}