<!--Excerpt from https://humanewebmanifesto.com/-->

<main>
	<article class="content">
   <p>The web is becoming hostile to humans. Users are tracked and their privacy is routinely violated. Search results are populated with ads. We are constantly spammed by bots. Generative AI threatens to turn previously useful public forums into soulless marketing soup, while sacrificing the livelihoods of the creators that unwittingly power them <a class="popover-replace" href="#1"><sup>1</sup></a><button popovertarget="ref_1"><sup>1</sup></button>, an interview with artist Molly Crabapple from the podcast Tech Won’t Save Us
	</span>. Power-hungry data centres<a class="popover-replace" href="#2"><sup>2</sup></a><button popovertarget="ref_2"><sup>2</sup></button>, from The Guardian
	</span> demand the burning of fossil fuels, and divert water and energy from communities, emitting tonnes of carbon in order to power this digital junkyard. Users abandon hostile websites that take too long to load on low-powered devices, or are forced to upgrade, as the pile of electronic waste grows<a class="popover-replace" href="#3"><sup>3</sup></a><button popovertarget="ref_3"><sup>3</sup></button>, book by Gerry McGovern
	</span>.</p>
		<p>We need a web <strong>by and for humans</strong>.</p>
	</article>
	
	<hr />
	
	<ol class="references">
		<li id="1">
			<cite><a href="https://techwontsave.us/episode/174_why_ai_is_a_threat_to_artists_w_molly_crabapple">Why AI is a Threat to Artists</a></cite>, an interview with artist Molly Crabapple from the podcast Tech Won’t Save Us
		</li>

		<li id="2">
			<cite><a href="https://www.theguardian.com/world/2024/feb/15/power-grab-hidden-costs-of-ireland-datacentre-boom">Power grab: the hidden costs of Ireland’s datacentre boom</a></cite>, from The Guardian
		</li>
		
		<li id="3">
			<cite><a href="https://gerrymcgovern.com/world-wide-waste/">World Wide Waste</a></cite>, book by Gerry McGovern
		</li>
	</ol>
	<p>Content below the footnotes</p>
</main>

/* Styles for browsers that don’t support anchor positioning */
[popovertarget] {
	display: none;
}

@supports (anchor-name: --ref_1) {
	[popovertarget] {
		position: relative;
		display: inline;
		color: blue;
		text-decoration: underline;
		padding: 0.1em 0.3em;
		
		&::after {
			content: '';
			position: absolute;
			inset: -1rem;
			border: 2px solid red;
		}
		
		&:hover,
		&:focus {
			color: inherit;
			outline: none;
		}
	}
	
	[popover] {
		/* Reset */
		margin: 0;
		padding: 0;
		border: 0;

		padding: 1rem;
		background: lavender;
		border-radius: 0.5rem;
		font-size: 1rem;
		max-width: 15rem;
		
		--anchor: --ref_1;
		position-anchor: var(--anchor);
		top: anchor(var(--anchor) bottom);
		left: anchor(var(--anchor) left);
		
		position-try-options: --pos-right, --pos-left;
		position-try-order: most-width;
		
		&#ref_2 {
			--anchor: --ref_2;
		}
		
		&#ref_3 {
			--anchor: --ref_3;
		}
	}
	
	@position-try --pos-right {
		left: anchor(var(--anchor) left);
	}
	
	@position-try --pos-left {
		right: anchor(var(--anchor) right);
		left: auto;
	}
	
	.popover-replace {
		display: none;
	}
	
	.content {
		position: relative;
	}

	[popovertarget="ref_1"]::after {
		anchor-name: --ref_1;
	}

	[popovertarget="ref_2"]::after {
		anchor-name: --ref_2;
	}

	[popovertarget="ref_3"]::after {
		anchor-name: --ref_3;
	}
	
	[popovertarget]:has(+ :popover-open) {
		position: relative;
		background: yellow;
		
		&::before {
			--clip: polygon(50% 0, 100% 100%, 0 100%);
			content: '';
			position: absolute;
			top: 100%;
			left: 50%;
			width: 1rem;
			height: 1rem;
			background: lavender;
			transform: translateX(-50%);
			-webkit-clip-path: var(--clip);
			clip-path: var(--clip);
		}
	}
}

@layer base {
	*, *::before, *::after {
		box-sizing: border-box;
	}
	
	body {
		font-family: 'Syne', sans-serif;
		line-height: 1.6;
		font-size: 1.35rem;
	}
	
	button {
		appearance: none;
		border: none;
		background: none;
		font-size: 1rem;
		cursor: pointer;
	}
	
	main {
		--space-s-l: clamp(1rem, 2vw, 3rem);
		width: 100%;
		max-width: 75ch;
		margin: 0 auto;
		padding: var(--space-s-l);
	}
}

if (HTMLElement.prototype.hasOwnProperty("popover")) {
	const references = document.querySelector(".references");
	const duplicateReferences = references.cloneNode(true);
	duplicateReferences.setAttribute("aria-hidden", true); // hide from screen readers
	references.parentNode.insertBefore(duplicateReferences, references.nextSibling);
	
	const popovers = duplicateReferences.querySelectorAll("li");
	popovers.forEach(popover => {
		popover.id = `ref_${popover.id}`;
		popover.setAttribute("popover", true);
	});
}