/*
 * EVTaxUK homepage.
 *
 * ---------------------------------------------------------------------------
 * The organising idea: a document that carries its own evidence
 * ---------------------------------------------------------------------------
 *
 * Every page is two columns. The wide one makes a claim. The narrow one says
 * where the claim came from and when it was last checked. The narrow column is
 * always there, always the same shape, and never empty.
 *
 * That is the whole design. It is derived from the one thing this project does
 * that competitors do not, rather than applied on top as decoration, which is
 * why it should survive contact with a non-designer maintaining it.
 *
 * Three decisions do most of the work:
 *
 * 1. WARM PAPER, NOT WHITE. #faf9f6 rather than #ffffff. Almost every SaaS
 *    site in this category is pure white, so an off-white ground reads as a
 *    printed document before a single word is read. It costs nothing.
 *
 * 2. A SERIF FOR THE CLAIM. UK EV content is uniformly sans-serif. A serif
 *    headline over a sans body is the register of a newspaper or a government
 *    paper rather than a product launch, which is the tone a tax site wants.
 *
 * 3. TABULAR MONOSPACE FOR EVIDENCE. Dates, sources and status tags are set in
 *    the system monospace stack. It signals "recorded" rather than "claimed",
 *    and it makes the rail visually distinct from the prose at a glance.
 *
 * What is deliberately absent: gradients, shadows on everything, rounded
 * cards, emoji, icons, and any colour that is not carrying information.
 *
 * @since 23.0.0
 */

.ev-home{
	--ev-paper:#faf9f6;
	--ev-ink:#16181d;
	--ev-ink-soft:#5b6068;
	--ev-rule:#ddd8ce;
	--ev-rule-strong:#16181d;
	--ev-link:#1d4ed8;
	--ev-flag:#b45309;

	/* One serif, one sans, one mono. Source Serif is loaded by the theme if
	 * available; the fallbacks are real serifs, not sans, so nothing collapses
	 * into the generic look if it is not. */
	--ev-serif:"Source Serif 4","Source Serif Pro",Charter,"Bitstream Charter","Iowan Old Style",Georgia,"Times New Roman",serif;
	--ev-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	--ev-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

	max-width:1180px;
	margin:0 auto;
	padding:0 24px 64px;
	background:var(--ev-paper);
	color:var(--ev-ink);
	font-family:var(--ev-sans);
	font-size:1.0625rem;
	line-height:1.6;
}
.ev-home *{box-sizing:border-box}
.ev-home a{color:var(--ev-link)}

/* ---------------------------------------------------------------------
 * The two-column frame
 *
 * Claim left, evidence right. On narrow screens the rail moves underneath
 * its claim rather than to the end of the page, so a figure and its source
 * are never separated by a scroll.
 * ------------------------------------------------------------------ */
.ev-lead,
.ev-block__body{
	display:grid;
	grid-template-columns:minmax(0,1fr) 15rem;
	gap:40px;
	align-items:start;
}

@media(max-width:900px){
	.ev-lead,
	.ev-block__body{grid-template-columns:1fr;gap:24px}
}

/* ---------------------------------------------------------------------
 * The lead story
 * ------------------------------------------------------------------ */
.ev-lead{padding:56px 0 48px;border-bottom:1px solid var(--ev-rule)}

.ev-kicker{
	display:flex;
	gap:10px;
	align-items:center;
	margin:0 0 20px;
	font-family:var(--ev-mono);
	font-size:.72rem;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--ev-ink-soft);
}
/* A small solid square rather than an icon. Prints, scales, never breaks. */
.ev-kicker__mark{
	width:9px;
	height:9px;
	background:var(--ev-flag);
	flex:0 0 auto;
}

.ev-lead__head{
	margin:0 0 20px;
	font-family:var(--ev-serif);
	font-size:clamp(2.1rem,5.2vw,3.4rem);
	font-weight:600;
	line-height:1.08;
	letter-spacing:-.015em;
	text-wrap:balance;
}
/* The figure itself is the only emphasised thing on the page. */
.ev-lead__head em{
	font-style:normal;
	box-shadow:inset 0 -.28em 0 rgba(180,83,9,.22);
}

.ev-lead__stand{
	margin:0 0 28px;
	max-width:44ch;
	font-size:1.15rem;
	line-height:1.55;
	color:var(--ev-ink-soft);
}

.ev-lead__more{margin:22px 0 0;font-size:1rem}
.ev-lead__more a{
	text-decoration:none;
	border-bottom:1px solid currentColor;
	padding-bottom:1px;
}

/* ---------------------------------------------------------------------
 * The rail — the signature element
 *
 * Hairline top rule, monospace micro-labels, values in ink. It is the same
 * component wherever it appears, which is what makes it read as apparatus
 * rather than as a sidebar.
 * ------------------------------------------------------------------ */
.ev-rail{
	border-top:2px solid var(--ev-rule-strong);
	padding-top:12px;
	font-family:var(--ev-mono);
	font-size:.75rem;
	line-height:1.45;
}
.ev-rail__item{
	padding:9px 0;
	border-bottom:1px solid var(--ev-rule);
}
.ev-rail__item:last-child{border-bottom:0}
.ev-rail__label{
	display:block;
	margin-bottom:3px;
	font-size:.66rem;
	letter-spacing:.11em;
	text-transform:uppercase;
	color:var(--ev-ink-soft);
}
.ev-rail__value{
	display:block;
	color:var(--ev-ink);
	overflow-wrap:break-word;
}
a.ev-rail__value{color:var(--ev-link);text-decoration:underline;text-underline-offset:2px}

@media(max-width:900px){
	/* Under its claim, but visually tied to it rather than floating. */
	.ev-rail{background:rgba(0,0,0,.02);padding:12px 14px}
}

/* ---------------------------------------------------------------------
 * The calculator
 *
 * Ruled like a form on an official document: no card, no shadow, no radius
 * beyond the input itself.
 * ------------------------------------------------------------------ */
.ev-calc{
	margin:0;
	padding:22px 0 0;
	border-top:1px solid var(--ev-rule);
}
.ev-calc__inputs{
	display:flex;
	flex-wrap:wrap;
	gap:22px 36px;
	align-items:flex-end;
}
.ev-calc__field span,
.ev-calc__type legend{
	display:block;
	margin-bottom:7px;
	font-family:var(--ev-mono);
	font-size:.7rem;
	letter-spacing:.09em;
	text-transform:uppercase;
	color:var(--ev-ink-soft);
}
.ev-calc__field input{
	width:7.5em;
	padding:8px 2px;
	border:0;
	border-bottom:2px solid var(--ev-ink);
	background:transparent;
	font-family:var(--ev-serif);
	font-size:1.75rem;
	font-variant-numeric:tabular-nums;
	color:var(--ev-ink);
}
.ev-calc__field input:focus{outline:2px solid var(--ev-link);outline-offset:3px}
.ev-calc__type{margin:0;padding:0;border:0}
.ev-calc__type label{
	display:inline-flex;
	gap:7px;
	align-items:center;
	margin-right:18px;
	font-size:.95rem;
}

/* The answer. Serif, large, tabular, so it reads as a figure not a headline. */
.ev-calc__out{display:block;margin:26px 0 0}
.ev-calc__out .evtaxuk-eved__figure{
	display:flex;
	flex-wrap:wrap;
	gap:4px 14px;
	align-items:baseline;
	margin:0 0 8px;
}
.ev-calc__out .evtaxuk-eved__figure strong{
	font-family:var(--ev-serif);
	font-size:clamp(2.4rem,7vw,3.6rem);
	font-weight:600;
	line-height:1;
	font-variant-numeric:tabular-nums;
	letter-spacing:-.02em;
}
.ev-calc__out .evtaxuk-eved__figure small{
	font-family:var(--ev-mono);
	font-size:.78rem;
	color:var(--ev-ink-soft);
}
.ev-calc__out p{margin:0 0 8px;max-width:52ch;color:var(--ev-ink-soft);font-size:.95rem}

.ev-calc__prompt{
	margin:22px 0 0;
	max-width:52ch;
	font-size:.92rem;
	color:var(--ev-ink-soft);
}

/* ---------------------------------------------------------------------
 * Status tags
 *
 * The honest part, and the part a competitor cannot copy without doing the
 * work: every number says what kind of number it is.
 * ------------------------------------------------------------------ */
.ev-status{
	display:flex;
	flex-wrap:wrap;
	gap:8px 12px;
	align-items:center;
	margin:22px 0 0;
	padding-top:14px;
	border-top:1px solid var(--ev-rule);
}
.ev-status__tag{
	display:inline-flex;
	gap:7px;
	align-items:center;
	font-family:var(--ev-mono);
	font-size:.68rem;
	letter-spacing:.09em;
	text-transform:uppercase;
	color:var(--ev-ink);
}
.ev-status__tag::before{
	content:"";
	width:8px;
	height:8px;
	flex:0 0 auto;
}
.ev-status__tag.is-published::before{background:var(--ev-ink)}
.ev-status__tag.is-yours::before{background:transparent;border:2px solid var(--ev-ink)}
.ev-status__note{
	flex:1 1 22ch;
	font-size:.85rem;
	color:var(--ev-ink-soft);
}

/* ---------------------------------------------------------------------
 * Blocks below the lead
 * ------------------------------------------------------------------ */
.ev-block{padding:44px 0;border-bottom:1px solid var(--ev-rule)}
.ev-block__head{
	margin:0 0 26px;
	font-family:var(--ev-serif);
	font-size:clamp(1.5rem,3vw,2rem);
	font-weight:600;
	line-height:1.2;
	letter-spacing:-.01em;
}

/* Questions and answers, ruled rather than boxed. */
.ev-qa{margin:0}
.ev-qa dt{
	margin:0 0 6px;
	font-family:var(--ev-serif);
	font-size:1.2rem;
	font-weight:600;
}
.ev-qa dd{
	margin:0 0 26px;
	max-width:60ch;
	color:var(--ev-ink-soft);
}
.ev-qa dd:last-child{margin-bottom:0}
.ev-qa strong{color:var(--ev-ink)}

/* Figures. Serif numerals, tabular, ruled list. */
.ev-figures{margin:0;padding:0;list-style:none}
.ev-figures li{
	display:grid;
	grid-template-columns:8.5rem minmax(0,1fr);
	gap:4px 22px;
	padding:16px 0;
	border-bottom:1px solid var(--ev-rule);
}
.ev-figures li:first-child{padding-top:0}
.ev-figures li:last-child{border-bottom:0}
.ev-figures__n{
	grid-row:span 2;
	font-family:var(--ev-serif);
	font-size:2.1rem;
	font-weight:600;
	line-height:1;
	font-variant-numeric:tabular-nums;
	letter-spacing:-.02em;
}
.ev-figures__n span{color:var(--ev-rule);font-weight:400}
.ev-figures__l{align-self:end;font-weight:500}
.ev-figures__m{align-self:start;font-size:.9rem;color:var(--ev-ink-soft)}

@media(max-width:520px){
	.ev-figures li{grid-template-columns:1fr}
	.ev-figures__n{grid-row:auto;margin-bottom:2px}
}

/* Tools. A list, not cards. */
.ev-tools{margin:0;padding:0;list-style:none}
.ev-tools li{
	padding:13px 0;
	border-bottom:1px solid var(--ev-rule);
}
.ev-tools li:first-child{padding-top:0}
.ev-tools li:last-child{border-bottom:0}
.ev-tools a{
	display:block;
	font-family:var(--ev-serif);
	font-size:1.15rem;
	font-weight:600;
	text-decoration:none;
	border-bottom:1px solid transparent;
}
.ev-tools a:hover{border-bottom-color:currentColor}
.ev-tools span{display:block;font-size:.9rem;color:var(--ev-ink-soft)}

/* ---------------------------------------------------------------------
 * Foot
 * ------------------------------------------------------------------ */
.ev-foot{
	margin:36px 0 0;
	max-width:66ch;
	font-size:.9rem;
	line-height:1.65;
	color:var(--ev-ink-soft);
}

/* Focus must stay obvious: this page removes most borders. */
.ev-home a:focus-visible,
.ev-home input:focus-visible{
	outline:2px solid var(--ev-link);
	outline-offset:3px;
}

@media(prefers-reduced-motion:no-preference){
	.ev-tools a,
	.ev-lead__more a{transition:border-color .15s}
}