/* makingtaxdigitalcalculator.co.uk: Look A, "Ledger" (chosen by the owner on 6 Nov 2026; the approved
   mockup is docs/design/look-a-ledger.dc.html). White paper, blue-black ink, one red ink for
   thresholds and deadlines, IBM Plex (served from this site, renamed "Ledger", see assets/fonts).
   Never HMRC's or GOV.UK's look: no black bar, no GOV.UK blue or typeface, no crown. */

@font-face { font-family: "Ledger Sans"; src: url(../fonts/ledger-sans.woff2) format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Ledger Condensed"; src: url(../fonts/ledger-condensed.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Ledger Mono"; src: url(../fonts/ledger-mono.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Ledger Mono"; src: url(../fonts/ledger-mono-600.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
	color-scheme: light;
	--paper: #FBFAF6;
	--card: #FFFFFF;
	--ink: #172033;
	--ink-2: #3C4558;
	--ink-3: #545C6D;
	--ink-4: #6B7180;
	--rule: #DCD6C8;
	--rule-2: #E6E1D5;
	--wash: #F1EDE3;
	--wash-2: #F6F2E9;
	--red: #B3261E;
	--red-deep: #8E1D17;
	--red-wash: #FFF8F6;
	--link: #1D3A8A;
	--slate: #26324A;
	--slate-2: #3A4A66;
	--slate-3: #4A5A78;
	--mute: #9AA1AE;
	--mute-line: #7D8494;
	--sans: "Ledger Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--cond: "Ledger Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
	--mono: "Ledger Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--ease: cubic-bezier(.2, .7, .2, 1);
	--gutter: 32px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font: 17px/1.55 var(--sans); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); overflow-x: hidden; }
a { color: var(--link); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
img, svg { max-width: 100%; height: auto; }
button, input, select { font: inherit; color: inherit; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--cond); font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
h2 { font-size: 34px; margin: 0 0 6px; }
h3 { font-size: 22px; margin: 28px 0 6px; }
p { margin: 0 0 1em; }
.fig { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.cond { font-family: var(--cond); font-weight: 700; }
.kicker { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--red); text-transform: uppercase; margin: 0 0 14px; }
.muted { color: var(--ink-3); }
.small { font-size: 15px; }
.src { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.src a { color: var(--ink-2); }
.src-all { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }
.src-all summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.src-all ol { margin: 6px 0 0; padding-left: 20px; line-height: 1.5; }
.src-all li { margin: 0 0 4px; }
.src-all a { color: var(--ink-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; background: var(--card); padding: 8px 12px; z-index: 30; }

/* ---------------------------------------------------------------- header and footer */
.site-head { border-bottom: 1px solid var(--rule); background: var(--card); }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px; padding-top: 18px; padding-bottom: 18px; }
.brand { font-family: var(--cond); font-weight: 700; font-size: 22px; color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.brand:hover { color: var(--ink); }
.independent { font-size: 14px; color: var(--ink-3); margin: 0; }
.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 15px; }
.site-foot { border-top: 1px solid var(--rule); background: var(--card); margin-top: 40px; }
.site-foot .wrap { padding-top: 26px; padding-bottom: 30px; font-size: 14px; color: var(--ink-3); display: grid; gap: 10px; }
.site-foot p { margin: 0; max-width: 60em; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }

/* ---------------------------------------------------------------- page with its map */
.layout { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.layout > main { flex: 999 1 760px; min-width: 0; padding: 52px 0 40px; }
.layout > .minimap { flex: 1 1 200px; min-width: 0; max-width: 240px; padding: 52px 0 40px; position: sticky; top: 0; align-self: flex-start; max-height: 100vh; overflow: auto; }
.minimap .label { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--ink-3); margin: 0 0 10px; }
.minimap ol { list-style: none; margin: 0; padding: 8px; border: 1px solid var(--rule); background: var(--card); }
.minimap a { display: block; padding: 8px; text-decoration: none; color: var(--ink-2); font-size: 13px; transition: background 200ms; border-left: 3px solid transparent; }
.minimap a:hover { background: var(--wash); color: var(--ink); }
.minimap a[aria-current="true"] { border-left-color: var(--red); background: var(--wash-2); color: var(--ink); }
.minimap .glyph { display: block; margin-bottom: 4px; }
.g-lines { height: 34px; background: repeating-linear-gradient(0deg, var(--rule) 0 1px, transparent 1px 6px); }
.g-map { height: 24px; background: radial-gradient(circle at 50% 50%, var(--ink) 0 4px, transparent 5px), repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 14px); }
.g-cols { display: flex !important; align-items: flex-end; gap: 4px; height: 30px; }
.g-cols i { width: 14px; display: block; }
.g-cols i:nth-child(1) { height: 28px; background: var(--ink); }
.g-cols i:nth-child(2) { height: 17px; background: var(--red); }
.g-cols i:nth-child(3) { height: 11px; background: var(--slate-2); }
.g-people { height: 16px; background: repeating-linear-gradient(90deg, var(--mute) 0 6px, transparent 6px 10px); }
.g-dates { height: 28px; background: repeating-linear-gradient(0deg, var(--red) 0 1px, transparent 1px 7px); }
.g-dots { display: flex !important; gap: 4px; height: 14px; }
.g-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--red); display: block; }
.g-dots i:last-child { background: none; border: 2px dashed var(--red); }
.g-fork { display: flex !important; gap: 6px; height: 22px; border-top: 2px solid var(--ink); }
.g-fork i { flex: 1; display: block; border: solid var(--ink); border-width: 0 2px; }
.g-fork i:last-child { border-color: var(--ink-4); }
.g-steps { display: grid !important; gap: 4px; height: 28px; align-content: start; }
.g-steps i { display: block; height: 6px; border-left: 6px solid var(--ink); background: var(--rule); }
.map-toggle { display: none; }
.no-js .years, .no-js .seg, .no-js .points-buttons { display: none; }
.no-js .mm-node { pointer-events: none; cursor: default; }

/* ---------------------------------------------------------------- homepage: the answer */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-areas: "words ledger" "facts ledger"; gap: 0 44px; align-items: start; }
.hero-words { grid-area: words; min-width: 0; }
.hero-facts { grid-area: facts; min-width: 0; margin-top: 26px !important; }
.hero h1 { font-size: 56px; line-height: 1.02; letter-spacing: -.02em; margin: 0 0 8px; }
.ink-rule { height: 4px; width: 180px; background: var(--red); margin: 0 0 22px; transform-origin: left center; }
.lede { font-size: 20px; color: var(--ink-2); max-width: 34em; margin: 0 0 24px; }
.private { font-size: 15px; color: var(--ink-3); margin: 0; }

/* the ledger card */
.ledger { grid-area: ledger; min-width: 0; background: var(--card); border: 1px solid var(--rule); box-shadow: 0 1px 0 var(--rule), 0 30px 60px -34px rgba(23, 32, 51, .45); }
.ledger-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 14px 24px 12px; border-bottom: 2px solid var(--ink); }
.ledger-title { font-family: var(--cond); font-weight: 700; font-size: 20px; margin: 0; }
.ledger-head .fig { font-size: 13px; color: var(--ink-3); }
.years { display: flex; border: 1px solid var(--ink); }
.years button { border: 0; background: var(--card); color: var(--ink); padding: 7px 10px 6px; cursor: pointer; text-align: left; line-height: 1.15; }
.years button + button { border-left: 1px solid var(--ink); }
.years button b { display: block; font-family: var(--mono); font-weight: 600; font-size: 14px; }
.years button span { display: block; font-size: 11px; color: var(--ink-3); }
.years button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.years button[aria-pressed="true"] span { color: #C9CFDB; }
.years button.filled b::after { content: " ●"; content: " ●" / ""; color: var(--red); font-size: 9px; vertical-align: 2px; }
.years button[aria-pressed="true"].filled b::after { color: #F2A29C; }
.example-mark { margin: 0; padding: 8px 24px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--red); background: var(--red-wash); border-bottom: 1px solid var(--rule-2); }
.example-mark[hidden] { display: none; }
.rows { display: grid; grid-template-columns: minmax(0, 1fr) 160px; font-size: 16px; }
.rows > label, .rows > .row-label { padding: 14px 24px; border-bottom: 1px solid var(--rule-2); }
.rows input, .rows select, .rows .cell { border: 0; border-bottom: 1px solid var(--rule-2); border-left: 1px solid var(--rule-2); padding: 14px 20px; font-family: var(--mono); font-size: 17px; text-align: right; background: var(--paper); color: var(--ink); min-width: 0; width: 100%; border-radius: 0; }
.rows select { font-size: 16px; text-align: left; -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: right 18px top 50%, right 13px top 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.rows .cell.out { color: var(--ink-4); text-decoration: line-through; background: var(--card); }
.rows .row-label.out { color: var(--ink-3); }
.rows .row-label small { font-size: 14px; }
.rows .total-label { font-weight: 600; padding: 16px 24px; border-bottom: 3px double var(--ink); }
.rows .total { font-family: var(--mono); font-weight: 600; font-size: 21px; text-align: right; padding: 16px 20px; border-left: 1px solid var(--rule-2); border-bottom: 3px double var(--ink); }
.rows input[aria-invalid="true"] { background: var(--red-wash); outline: 2px solid var(--red); outline-offset: -2px; }
.row-wide { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 10px 20px 10px 24px; border-bottom: 1px solid var(--rule-2); }
.row-wide label { flex: 1 1 200px; }
.rows .row-wide select { width: auto; min-width: 0; max-width: 100%; border: 1px solid var(--rule-2); padding: 10px 30px 10px 12px; font-size: 15px; }
.ledger-note { margin: 0; padding: 10px 24px 0; font-size: 13px; color: var(--ink-3); }
.field-error { grid-column: 1 / -1; margin: 0; padding: 8px 24px; font-size: 14px; color: var(--red); background: var(--red-wash); border-bottom: 1px solid var(--rule-2); }
.field-error[hidden] { display: none; }

/* the scale under the ledger: income against the three lines */
.scale { position: relative; margin: 30px 24px 8px; height: 48px; }
.scale .track { position: absolute; left: 0; right: 0; top: 22px; height: 6px; background: #EFEBE1; }
.scale .bar { position: absolute; left: 0; top: 22px; height: 6px; width: 0; background: var(--ink); transition: width 600ms var(--ease), background 300ms; }
.scale .bar.over { background: var(--red); }
.scale .tick { position: absolute; top: 10px; width: 1px; height: 30px; background: var(--mute); }
.scale .tick.on { top: 6px; width: 2px; height: 38px; background: var(--red); }
.scale .tick-label { position: absolute; top: -12px; transform: translateX(-50%); font-family: var(--mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.scale .tick-label.on { top: -14px; font-size: 12px; color: var(--red); }

/* the verdict */
.verdict { margin: 18px 24px 0; padding: 18px 20px; background: var(--ink); color: var(--paper); }
.verdict .v-kicker { margin: 0 0 6px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: #C9CFDB; }
.verdict .v-title { margin: 0; font-family: var(--cond); font-weight: 700; font-size: 34px; line-height: 1.1; }
.verdict .v-body { margin: 8px 0 0; font-size: 15px; color: #DDE2EA; }
.aprils { list-style: none; margin: 0 24px; padding: 0; border-bottom: 1px solid var(--rule-2); }
.aprils li { display: grid; grid-template-columns: 112px 38px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--rule-2); font-size: 14px; color: var(--ink-2); }
.aprils li:first-child { border-top: 0; }
.aprils .when { font-family: var(--mono); font-weight: 600; font-size: 13px; color: var(--ink); }
.aprils .mark { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .06em; text-align: center; }
.aprils .in .mark { color: var(--red); }
.aprils .not-in .mark { color: var(--ink-3); }
.aprils .unknown .mark { color: var(--ink-4); }
.ledger .src { margin: 0; padding: 12px 24px 18px; }
.ledger .caveats { margin: 0; padding: 0 24px 4px; font-size: 13px; color: var(--ink-3); }
.ledger .caveats p { margin: 0 0 6px; }

/* ---------------------------------------------------------------- sections */
.part { margin-top: 96px; scroll-margin-top: 16px; }
.part > .intro { margin: 0 0 22px; color: var(--ink-2); max-width: 44em; }
/* The homepage's index of live calculators and guides: a ledger's contents page. */
.site-index .ix-k { margin: 28px 0 0; padding: 0 0 6px; border-bottom: 1.5px solid var(--ink); font: 400 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.site-index .ix { list-style: none; margin: 0; padding: 0; counter-reset: ix; }
.site-index .ix li { counter-increment: ix; display: grid; grid-template-columns: 2.4em minmax(0, 1fr); column-gap: 10px; padding: 14px 0 13px; border-bottom: 1px solid var(--rule); }
.site-index .ix li::before { content: counter(ix, decimal-leading-zero); grid-row: 1 / span 2; padding-top: 3px; font: 400 13px/1.3 var(--mono); color: var(--red); }
.site-index .ix a { font: 600 18px/1.3 var(--cond); color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.site-index .ix a:hover { text-decoration-color: var(--ink); }
.site-index .ix p { margin: 5px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 46em; }
.facts { margin: 18px 0 0; }
.table-wrap { overflow-x: auto; }
.facts-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.facts-table th, .facts-table td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.facts-table thead th { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border-bottom: 2px solid var(--ink); }
.facts-table .fig { font-weight: 600; white-space: nowrap; }
.facts-table .red { color: var(--red); }
.in-words { margin: 14px 0 0; padding: 14px 18px; border-left: 3px solid var(--rule); background: var(--card); font-size: 15px; color: var(--ink-2); }
.in-words h3 { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.in-words ul { margin: 0; padding-left: 18px; }
.in-words li { margin: 0 0 6px; }
.in-words p:last-child { margin-bottom: 0; }

/* the mind map: what counts */
.mindmap-wrap { border: 1px solid var(--rule); background: var(--card); container-type: inline-size; }
.mindmap { position: relative; padding: 18px 16px 20px; background: repeating-linear-gradient(0deg, transparent 0 31px, var(--wash) 31px 32px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; }
.mm-hub { grid-column: 1 / -1; background: var(--ink); color: var(--paper); text-align: center; padding: 14px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mm-hub b { font-family: var(--cond); font-size: 20px; }
.mm-hub span { font-family: var(--mono); font-size: 12px; color: #C9CFDB; }
.mm-side { position: relative; display: grid; gap: 10px; align-content: start; padding-left: 14px; }
.mm-side::before { content: ""; position: absolute; left: 0; top: 0; bottom: 28px; width: 2px; background: var(--ink); transform-origin: top center; }
.mm-side.out::before { background: var(--mute-line); }
.mm-side h3 { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .08em; margin: 0 0 2px; color: var(--ink); }
.mm-side.out h3 { color: var(--ink-3); }
.mm-node { position: relative; display: block; width: 100%; min-height: 48px; border: 1px solid var(--ink); background: var(--card); color: var(--ink); font-size: 15px; font-weight: 500; text-align: left; padding: 8px 12px; cursor: pointer; transition: background 200ms, color 200ms, transform 200ms; line-height: 1.25; }
.mm-node::before { content: ""; position: absolute; left: -15px; top: 50%; width: 14px; height: 2px; background: var(--ink); }
.mm-side.out .mm-node { border-color: var(--mute-line); color: var(--ink-3); text-decoration: line-through; }
.mm-side.out .mm-node::before { background: var(--mute-line); }
.mm-node:hover { transform: translateY(-2px); }
.mm-node[aria-pressed="true"] { background: var(--ink); color: var(--paper); text-decoration: none; }
.mm-side.out .mm-node[aria-pressed="true"] { background: var(--ink-3); color: var(--paper); text-decoration: none; }
.mm-note { display: flex; gap: 16px; align-items: baseline; padding: 16px 20px; border: 1px solid var(--rule); border-top: 0; background: var(--red-wash); min-height: 58px; }
.mm-note .fig { font-size: 12px; color: var(--red); white-space: nowrap; }
.mm-note.out .fig { color: var(--ink-3); }
@container (min-width: 900px) {
	.mindmap { display: block; width: 900px; height: 500px; margin: 0 auto; padding: 0; }
	.mm-hub { position: absolute; left: 360px; top: 205px; width: 180px; height: 90px; }
	.mm-side { position: static; padding: 0; display: block; }
	.mm-side::before { left: 299px; top: 47px; bottom: auto; height: 406px; }
	.mm-side.out::before { left: 599px; }
	.mm-side::after { content: ""; position: absolute; left: 300px; top: 249px; width: 60px; height: 2px; background: var(--ink); transform-origin: left center; }
	.mm-side.out::after { left: 540px; background: var(--mute-line); }
	.mm-side h3 { position: absolute; left: 40px; top: -2px; }
	.mm-side.out h3 { left: 640px; }
	.mm-node { position: absolute; width: 220px; height: 56px; padding: 0 16px; font-size: 16px; }
	.mm-side .mm-node { left: 40px; }
	.mm-side.out .mm-node { left: 640px; }
	.mm-node::before { left: auto; right: -41px; width: 40px; }
	.mm-side.out .mm-node::before { left: -41px; right: auto; }
	.mm-node:nth-of-type(1) { top: 20px; }
	.mm-node:nth-of-type(2) { top: 121px; }
	.mm-node:nth-of-type(3) { top: 222px; }
	.mm-node:nth-of-type(4) { top: 323px; }
	.mm-node:nth-of-type(5) { top: 424px; }
}

/* the three Aprils, in 3D */
.waves { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.stage-box { flex: 1 1 520px; min-width: 0; height: 470px; perspective: 1500px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.stage-fit { width: 560px; height: 380px; flex: none; }
.stage { position: relative; width: 560px; height: 380px; transform-style: preserve-3d; transform: rotateX(-13deg) rotateY(-26deg); }
.floor { position: absolute; left: -20px; top: 280px; width: 600px; height: 200px; transform: rotateX(90deg); background: repeating-linear-gradient(90deg, var(--rule-2) 0 1px, transparent 1px 40px), repeating-linear-gradient(0deg, var(--rule-2) 0 1px, transparent 1px 40px), var(--wash-2); }
.col { position: absolute; bottom: 0; width: 120px; transform-style: preserve-3d; transform-origin: bottom center; }
.face { position: absolute; left: 0; top: 0; width: 120px; }
.face.front { color: var(--paper); padding: 14px; display: flex; flex-direction: column; justify-content: flex-end; transition: background 400ms; }
.face.front b { font-family: var(--mono); font-size: 22px; }
.face.front span { font-size: 13px; }
.face.lid { height: 120px; background: repeating-linear-gradient(0deg, var(--paper) 0 11px, var(--rule) 11px 12px); }
.col.c1 .front { background: var(--ink); } .col.c1 .side { background: var(--slate); } .col.c1 .back { background: #1B2539; }
.col.c2 .front { background: var(--slate); } .col.c2 .side { background: #33405C; } .col.c2 .back { background: #1B2539; }
.col.c3 .front { background: var(--slate-2); } .col.c3 .side { background: var(--slate-3); } .col.c3 .back { background: #2E3B55; }
.col.hit .front { background: var(--red); } .col.hit .side { background: var(--red-deep); }
.income-line { position: absolute; left: 0; bottom: 0; width: 560px; height: 3px; background: var(--red); transform: translateZ(64px); transition: bottom 600ms var(--ease); }
.income-label { position: absolute; right: -6px; bottom: 6px; transform: translateZ(64px); font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--red); background: var(--paper); padding: 0 4px; transition: bottom 600ms var(--ease); white-space: nowrap; }
.waves-table { flex: 1 1 260px; min-width: 0; }

/* the people */
.people-row { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; padding: 14px 0; border-top: 1px solid var(--rule); }
.people-row:last-of-type { border-bottom: 1px solid var(--rule); }
.people-count { width: 190px; }
.people-count b { font-family: var(--mono); font-size: 20px; }
.people-count span { display: block; font-size: 14px; color: var(--ink-3); }
.people-icons { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 300px; min-width: 0; }
.people-icons span { display: inline-block; overflow: hidden; height: 40px; }
.people-icons svg { display: block; width: 30px; max-width: none; height: 40px; }
.people-row.r1 { --c: var(--ink); } .people-row.r2 { --c: var(--red); } .people-row.r3 { --c: var(--slate-2); }
.people-icons svg * { stroke: var(--c); }

/* the first year */
.year-head { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; }
.year-head p { margin: 0; color: var(--ink-2); }
.seg { display: flex; border: 1px solid var(--ink); }
.seg button { font-weight: 600; font-size: 15px; padding: 10px 14px; border: 0; cursor: pointer; background: var(--card); color: var(--ink); }
.seg button + button { border-left: 1px solid var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.year-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.yrow { display: grid; grid-template-columns: 150px minmax(0, 1fr) 230px; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.yrow .due { font-family: var(--mono); font-weight: 600; color: var(--red); }
.yrow .due small { display: block; font-weight: 400; font-size: 12px; color: var(--ink-3); }
.yrow.return .due { color: var(--ink); }
.yrow .note { font-size: 14px; color: var(--ink-3); }
.fn { margin: 14px 0 0; font-size: 14px; color: var(--ink-3); }
.fn p { margin: 0 0 6px; }
.alt-counts { padding-left: 18px; }
.alt-counts li { margin: 0 0 4px; }

/* the penalty points */
.points-box { display: flex; flex-wrap: wrap; gap: 24px 28px; align-items: center; padding: 24px; border: 1px solid var(--rule); background: var(--card); }
.slots { display: flex; gap: 14px; }
.slot { width: 52px; height: 52px; border-radius: 50%; border: 3px dashed var(--red); display: block; }
.slot.on { background: var(--red); border: 0; }
.points-read { flex: 1 1 260px; min-width: 0; }
.points-read .fig { margin: 0; font-size: 13px; color: var(--ink-3); }
.points-read .fine { margin: 2px 0 0; font-family: var(--cond); font-weight: 700; font-size: 30px; color: var(--ink); }
.points-read .fine.red { color: var(--red); }
.points-read .when { margin: 4px 0 0; font-size: 14px; color: var(--ink-3); }
.points-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { font-weight: 600; font-size: 16px; padding: 12px 16px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); cursor: pointer; }
.btn.ghost { background: var(--card); color: var(--ink); }
.btn[disabled] { opacity: .45; cursor: default; }

/* ---------------------------------------------------------------- articles (guides and tools) */
.entry h1 { font-size: 48px; line-height: 1.04; letter-spacing: -.02em; margin: 0 0 8px; max-width: 22em; }
/* Prose keeps a reading width; explainers, tables and embeds may use the whole column. */
.entry-body { max-width: none; font-size: 18px; line-height: 1.6; }
.entry-body > p, .entry-body > ul, .entry-body > ol, .entry-body > h2, .entry-body > h3, .entry-body > blockquote, .entry-body > .src { max-width: 40em; }
.entry-body > h2 { font-size: 32px; margin: 64px 0 12px; }
.entry-body > h3 { font-size: 22px; margin: 32px 0 8px; }
.entry-body > p:first-child { font-size: 20px; color: var(--ink-2); }
.entry-body ul, .entry-body ol { padding-left: 22px; }
.entry-body li { margin: 0 0 8px; }
/* A figure in running text reads in the text's own face (tables and explainers keep the mono). */
.entry-body .f { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.entry-body .eg { font-variant-numeric: tabular-nums lining-nums; }
.entry-body blockquote { margin: 24px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--red); color: var(--ink-2); }
.entry-body figure.facts { margin: 22px 0 28px; }
.entry-body figure.facts caption { text-align: left; caption-side: top; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 0 0 8px; }
.entry-body figure.facts .notes { margin: 10px 0 0; padding-left: 18px; font-size: 14px; color: var(--ink-3); }
.entry-body figure.facts small { color: var(--ink-3); }
.x { margin: 28px 0 10px; }
.x-wide { margin-left: 0; margin-right: 0; }
/* A video or post from another website: the site's caption beside the platform's own frame. */
.social { margin: 32px 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--rule); background: var(--card); }
.social-frame { background: var(--wash); min-width: 0; }
/* A video keeps its shape from the frame's aspect-ratio; no minimum height, or the shape would force it wider than a phone. */
.social-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.social-x .social-frame iframe, .social-linkedin .social-frame iframe { height: 520px; }
.social-tall { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
.social-tall .social-frame { max-width: 280px; }
.social figcaption { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; border-left: 1px solid var(--rule); }
.social-who { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.social-when { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.social-title { font-family: var(--cond); font-size: 20px; line-height: 1.15; }
.social-note { font-size: 15px; color: var(--ink-2); }
.social-link { font-size: 14px; margin-top: auto; }
.entry .dates { margin: 0 0 18px; font-size: 13px; letter-spacing: .02em; color: var(--ink-3); }
.entry .checked-by { margin: -12px 0 18px; font-size: 13px; letter-spacing: .02em; color: var(--ink-2); }
.entry .checked-by::before { content: ""; display: inline-block; width: 9px; height: 5px; margin: 0 8px 3px 1px; border: solid var(--ink); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.entry .lead-picture { margin: 22px 0 28px; border: 1px solid var(--rule); background: var(--card); }
.entry .lead-picture img { display: block; width: 100%; height: auto; }
.entry-body h2 { margin-top: 56px; scroll-margin-top: 16px; }
.post-list { padding-left: 20px; }

/* ---------------------------------------------------------------- motion, only with the script running */
@keyframes ink { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes sway { from { transform: rotateX(-16deg) rotateY(-36deg); } to { transform: rotateX(-10deg) rotateY(-16deg); } }
@keyframes pop { 0% { transform: scale(.4); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
.js .ink-rule { animation: ink 900ms var(--ease) 240ms both; }
.js .hero-words, .js .ledger { animation: rise 700ms var(--ease) both; }
.js .ledger { animation-delay: 120ms; }
.reveal-on .part.reveal { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal-on .part.reveal.seen { opacity: 1; transform: none; }
.js .seen .stage { animation: sway 9s ease-in-out infinite alternate; }
.js .seen .col { animation: grow 1100ms var(--ease) both; }
.js .seen .col.c2 { animation-delay: 120ms; } .js .seen .col.c3 { animation-delay: 240ms; }
.js .seen .mm-side::before { animation: grow 800ms var(--ease) both; }
.js .seen .mm-node::before, .js .seen .mm-side::after { animation: ink 600ms var(--ease) 240ms both; }
.js .seen .people-icons span { animation: rise 500ms var(--ease) both; }
.slot.on.pop { animation: pop 380ms var(--ease) both; }
@media (hover: hover) and (min-width: 1100px) {
	.ledger { transform: perspective(1800px) rotateX(5deg) rotateY(-7deg); transition: transform 500ms var(--ease), box-shadow 500ms; }
	.ledger:hover, .ledger:focus-within { transform: perspective(1800px) rotateX(0) rotateY(0); }
}

/* ---------------------------------------------------------------- narrower screens */
@media (max-width: 1099px) {
	.layout > .minimap { display: none; }
	.layout > .minimap.open { display: block; position: fixed; z-index: 20; right: 12px; bottom: 70px; top: auto; width: 240px; max-height: 70vh; padding: 0; box-shadow: 0 20px 50px -20px rgba(23, 32, 51, .5); }
	.minimap.open .label { background: var(--card); margin: 0; padding: 10px 16px 0; border: 1px solid var(--rule); border-bottom: 0; }
	.map-toggle { display: block; position: fixed; z-index: 21; right: 12px; bottom: 12px; min-height: 44px; font-family: var(--mono); font-size: 13px; padding: 9px 14px; background: var(--ink); color: var(--paper); border: 0; cursor: pointer; transition: opacity 200ms; }
	.map-toggle.away, .map-toggle.busy, .home .map-toggle:not(.show) { opacity: 0; pointer-events: none; }
	.site-foot .wrap { padding-bottom: 76px; }
	.no-js .map-toggle { display: none; }
}
@media (max-width: 860px) {
	.hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "words" "ledger" "facts"; gap: 26px; }
	.hero-facts { margin-top: 0 !important; }
}
@media (max-width: 900px) {
	.stage-box { height: 380px; }
	.stage-fit { transform: scale(.8); }
}
@media (max-width: 700px) {
	:root { --gutter: 16px; }
	html { font-size: 16px; }
	.site-head .wrap { padding-top: 14px; padding-bottom: 12px; gap: 4px 18px; }
	.site-nav { margin-left: 0; width: 100%; }
	.site-nav ul { gap: 4px 16px; font-size: 14px; }
	.layout > main { padding-top: 28px; }
	.hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "words" "ledger" "facts"; gap: 26px; }
	.hero h1 { font-size: 38px; }
	.lede { font-size: 18px; }
	h2 { font-size: 28px; }
	.part { margin-top: 64px; }
	.ledger-head { padding: 12px 14px; }
	.years button { padding: 6px 8px 5px; }
	.years button b { font-size: 13px; }
	.example-mark, .rows > label, .rows > .row-label, .rows .total-label { padding-left: 14px; padding-right: 10px; }
	.rows { grid-template-columns: minmax(0, 1fr) 128px; font-size: 15px; }
	.rows input, .rows select, .rows .cell, .rows .total { padding-left: 10px; padding-right: 12px; }
	.rows .total { font-size: 19px; }
	.scale, .aprils { margin-left: 14px; margin-right: 14px; }
	.verdict { margin-left: 14px; margin-right: 14px; padding: 16px; }
	.verdict .v-title { font-size: 28px; }
	.aprils li { grid-template-columns: 92px 34px minmax(0, 1fr); gap: 6px; }
	.ledger .src, .ledger .caveats { padding-left: 14px; padding-right: 14px; }
	.mindmap { grid-template-columns: 1fr; }
	.stage-box { height: 300px; }
	.stage-fit { transform: scale(.58); }
	.yrow { grid-template-columns: 1fr; gap: 2px; }
	.points-box { padding: 18px; }
	.slot { width: 44px; height: 44px; }
	.entry h1 { font-size: 34px; }
	.entry-body { font-size: 17px; }
	.entry-body > h2 { font-size: 26px; margin-top: 48px; }
	.social, .social-tall { grid-template-columns: minmax(0, 1fr); }
	.social-tall .social-frame { max-width: 280px; margin: 0 auto; }
	.social figcaption { border-left: 0; border-top: 1px solid var(--rule); }
	.facts-table { font-size: 14px; }
}
@media (max-width: 480px) {
	/* The scale's labels alternate above and below the line, so £20,000 and £30,000 never touch. */
	.scale { height: 62px; margin-top: 26px; }
	.scale .tick-label:not(.on) { top: 40px; }
	.rows select { font-size: 14px; padding-right: 26px; background-position: right 15px top 50%, right 10px top 50%; }
	.row-wide { padding-left: 14px; padding-right: 10px; }
}
@media (max-width: 360px) {
	.hero h1 { font-size: 33px; }
	.rows { grid-template-columns: minmax(0, 1fr) 112px; }
	.stage-fit { transform: scale(.5); }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.ledger { transform: none !important; }
	.reveal-on .part.reveal { opacity: 1; transform: none; }
}
@media print {
	.reveal-on .part.reveal { opacity: 1 !important; transform: none !important; }
	.site-nav, .minimap, .map-toggle, .years, .seg, .points-buttons { display: none !important; }
	.ledger { transform: none !important; box-shadow: none; }
}

/* ---------------------------------------------------------------- lead picture (begin)
   Every tool, guide and the homepage: its own picture right under the title and summary, the same
   one its WordPress featured image is (the plugin's includes/pictures.php and featured.php; drawn by
   tools/pictures/build.mjs). Its caption says what it shows; the site's address is printed on the picture. */
.lead-pic { margin: 6px 0 30px; max-width: 1000px; }
.lead-pic img { display: block; width: 100%; height: auto; aspect-ratio: auto 16 / 9; border: 1px solid var(--rule); background: var(--card); }
.lead-pic figcaption { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-3); max-width: 44em; }
.hero .lead-pic { margin: 0 0 22px; }
@media print {
	.lead-pic { break-inside: avoid; }
}
/* ---------------------------------------------------------------- lead picture (end) */

/* ---------------------------------------------------------------- who stands behind a page (begin)
   Under every title (functions.php: mtdc_theme_byline): the dates and who publishes the site, the
   "Figures checked" mark once he has given it, and how the pages are written and checked. Then the
   note that it is general information, not tax advice (mtdc_theme_not_advice). */
.byline { margin: 0 0 20px; font-size: 13px; line-height: 1.5; letter-spacing: .02em; color: var(--ink-3); }
.byline p, .entry .byline .dates, .entry .byline .checked-by { margin: 0 0 4px; }
.byline a { color: var(--ink-2); text-underline-offset: 2px; }
.byline .checked-by { color: var(--ink-2); }
.byline .checked-by::before { content: ""; display: inline-block; width: 9px; height: 5px; margin: 0 8px 3px 1px; border: solid var(--ink); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.by-links a { display: inline-flex; align-items: center; min-height: 44px; }
.byline .by-links { margin: -6px 0 0; }
.not-advice { margin: 0 0 24px; padding: 10px 14px; border-left: 3px solid var(--ink); background: var(--card); font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 46em; }
.not-advice b { color: var(--ink); }
.ledger .not-advice { margin: 14px 24px 0; }
.yrow.pay .due { color: var(--ink-2); }
/* ---------------------------------------------------------------- who stands behind a page (end) */

/* ---------------------------------------------------------------- who is left out (begin)
   The homepage's exemptions: one fork, two ways out, each with its own list. */
.fork { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--rule); background: var(--card); }
.fork-side { min-width: 0; padding: 18px 22px 20px; border-top: 4px solid var(--ink); }
.fork-side.apply { border-top-color: var(--ink-4); border-left: 1px solid var(--rule); }
.fork-k { margin: 0 0 4px; font: 400 12px/1.2 var(--mono); letter-spacing: .08em; color: var(--ink-3); }
.fork h3 { margin: 0 0 4px; font: 600 21px/1.2 var(--cond); color: var(--ink); }
.fork-sub { margin: 0 0 10px; font-size: 15px; color: var(--ink-3); }
.fork ul { margin: 0 0 12px; padding-left: 18px; font-size: 15px; color: var(--ink-2); }
.fork li { margin: 0 0 6px; }
.fork-side > p:last-child { margin: 0; font-size: 15px; color: var(--ink-2); }
@media (max-width: 700px) {
	.fork { grid-template-columns: 1fr; }
	.fork-side { padding: 16px 16px 18px; }
	.fork-side.apply { border-left: 0; }
}
/* ---------------------------------------------------------------- who is left out (end) */

/* ---------------------------------------------------------------- what to do next (begin) */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: st; border-top: 2px solid var(--ink); }
.steps li { counter-increment: st; display: grid; grid-template-columns: 2.6em minmax(0, 1fr); column-gap: 12px; padding: 16px 0 15px; border-bottom: 1px solid var(--rule); }
.steps li::before { content: counter(st, decimal-leading-zero); grid-row: 1 / span 2; padding-top: 2px; font: 600 20px/1.1 var(--mono); color: var(--ink); }
.steps h3 { margin: 0 0 4px; font: 600 20px/1.25 var(--cond); color: var(--ink); }
.steps p { margin: 0; font-size: 16px; color: var(--ink-2); max-width: 44em; }
/* ---------------------------------------------------------------- what to do next (end) */
/* Each calculator's own job, said where the two meet (the homepage's test box). */
.in-words .job { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--rule); }