/* 2026 design */
/*
 * VARIABLES
 * FOCUS
 * ELEMENTS
 * IDS
 * CLASSES
 * MEDIA QUERIES
 */

@layer standard, main, components;
@layer main {

@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto; }
}

		/*** VARIABLES ***/
:root {
	--accent: rgba(255,146,0,0.15); /* antiquewhite */
	--drop-caps-indent: 14px; /* initialise for letter A. This will vary for each letter of the alphabet */
	--transition: 0.3s;
	color-scheme: light dark;
	font-size: 1.125em; /* 18px */ /* clamp(0.85em calc(1.45em - 4vw) 1.35em) is similar but increases on smaller screens */ }

		/*** FOCUS ***/
:focus-visible {
	background-color: cyan;
	outline: 1px dotted; }

summary:focus-visible {
	background-color: #0ff6; }

		/*** ELEMENTS ***/
:where(code, kbd, pre, samp, textarea) {
	font-family: "Courier New", monospace; }

body {
	color: oklch(0.28 0.074 234.18);
	margin: 0; }

a,
body,
.header-illustration {
		/* These transition are causing some unpleasant flickering in Firefox (not Safari or Opera) */
	transition-duration: var(--transition, 0); /* fallback to 0, just in case */
	transition-property: background-color, color, filter; }

		/* Only supported in Safari at the moment (Jan 2025)
		 * Would fix alignment of floated elements
		 * Messes up alignment of drop-caps
p {
	text-box-trim: trim-both;
	text-box-edge: cap;
	line-fit-edge: alphabetic; } line-fit-edge not supported yet */

footer,
header,
#acc-tools {
	border-block-end-style: solid;
	border-color: #00000008;
	border-width: 1px; }
footer,
#acc-tools {
	background-color: rgba(0,0,0,0.05); }

footer {
	border-block-start-style: solid;
	padding: 2em; }

header {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	font-size: 90%; }

main,
.header-illustration {
	margin-inline: auto; }

main {
	counter-reset: footnotes;
	margin-block-end: 1em;
	max-width: 720px; /* changed from 72ch to fit grid better and so it's the same regardless of font */
	padding: 1em; }

nav {
	border: 1px solid oklch(1 0 0 / 0%); /* so it can be transitioned */
	flex: 1;
	opacity: 0.6;
	transition-duration: var(--transition, 0);
	transition-property: border-color, opacity; }

nav ul {
	display: flex;
	gap: 1em;
	justify-content: flex-end;
	list-style-type: "";
	padding-inline-start: 0; }

nav a {
	padding: 0.5em; }

nav:where(:hover, :focus-within) {
	opacity: 1; }

a:link {
	color: oklch(0.46 0.21 29); /* #a00 */ }

a:visited {
	color: oklch(0.34 0.154 22.84); /* #6f0012 */ }

aside,
footer,
#sub-title {
	font-size: 90%; }

hr {
	margin-block: 0; /* Overkill?  Not really.  If it's between paragraphs, they will manage the spacing. */ }

h1 {
	line-height: 1.4; /* This can be below standard because the font-size is so big */
	text-wrap: balance; /* This looks fine in Firefox and Opera but terrible in Safari */ }

h2,
h3 {
	margin-block-end: 0.5em; }

:where(h2, h3) + :is(p, ul) {
	margin-block-start: 0; }

abbr {
	cursor: help; }

q {
		/* Only supported by Safari at time of writing */
	hanging-punctuation: first last; }

		/* I long resisted using :has for lack of a reasonable use-case, but I think I just found one. */
		/* But is this really better than adding a class to the li? */
		/* Not supported by Firefox (Feb. 2023) */
li:has(> a[target="_blank"]) {
	list-style-image: url(../icons/external-link.svg); }

:target {
	animation-delay: 0.1s;
	animation-duration: 2s;
	animation-iteration-count: 1;
	animation-name: highlight;
	animation-timing-function: ease-out; }

@keyframes highlight {
	0%,
	100% {
		background-color: #ffff0000; }
	30%,
	70% {
		background-color: #ffff00ff; }
}

:target::before {
	border-color: transparent transparent transparent #005577aa;
	border-style: solid;
	border-width: 0.25lh 0 0.25lh 10px;
	content: "";
	display: block;
	float: left;
	margin-left: -1em;
	margin-top: 0.43em; }

		/*** IDs ***/
#logo-home-link:not(:focus, :hover) {
	text-decoration: none; }

#logo {
	background-image: url("../favicon.svg");
	background-position: 0.1em;
	background-repeat: no-repeat;
	background-size: 3em;
	letter-spacing: 0.1ch;
	margin-inline: 1em;
	padding-inline-start: 3.4em;
	width: max-content; }

#logo > h1 {
	font-size: 1em;
	font-weight: 400;
	margin: 0; }
#title {
	font-size: 1.6em;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase; }

#acc-tools {
	display: flex; }
#acc-tools > :last-child {
	margin-inline-start: auto; }

#acc-settings {
	display: flex;
	flex-wrap: wrap;
	font-size: 75%;
	justify-content: space-evenly; }
#acc-settings [type="range"] {
	margin-inline-end: 2em;
	width: 100px; }
#acc-settings > p {
	margin-block: 0; }
#acc-settings > span {
	align-items: center;
	display: flex; }

		/*** CLASSES ***/
.active {
	font-weight: 700; }

.sub-title { /* Used within h1 or other headings */
	display: block;
	font-size: 70%;
	font-style: italic; }

.meta {
	font-style: italic;
	text-wrap: pretty; }

.header-illustration {
		/* syntax: <source> <slice>/<width>/<outset> <repeat> */
/*	border-image: linear-gradient(#a3c3d000 50%, #a3c3d033 70%, #a3c3d0) fill 0/0/10px 99vw;
	border-image: linear-gradient(177deg,
			#f9e4cf00 35%,
			#f9e4cf 35%,
			rgb(213, 198, 200) 70%,
			rgb(213 198 200 / 0) 70%)
		fill 0/0/0px 100vw 70px; /* This could have been achieved with clip-path, but this is easier */
	display: block; }

.slogan {
	font-size: 1.7em;
	margin-block: 3em 5em;
	text-align: center; }
.slogan::first-line {
	font-size: 2.3em; }

.introduction {
	font-size: 1.1em; }

		/* Drop-caps */
		/* initial-letter not widely supported and can't achieve what I'm doing here */
.introduction span[class^="drop-caps-"] {
	float: left;
	font-size: 3.3em;
	font-weight: 700;
	line-height: 1;
	width: 1em; }

.drop-caps-a {
	shape-outside: polygon(44% 0, 85% 85%, 0 85%); }
.drop-caps-i {
	--shape-indent: 37%;
	margin-block-start: -0.04em;
	shape-outside: polygon(51% 0em, 51% 28%, var(--shape-indent) 28%, var(--shape-indent) 72%, 51% 72%, 51% 90%, 0 90%, 0 0); }

.conversation {
	padding-inline-start: 2em; }

.conversation p::before {
	content: open-quote; }

.conversation p::after {
	content: close-quote; }

.footnote::before {
	counter-increment: footnotes;
	content: counter(footnotes); }

		/* Rainbow colours.
		 * These were inline, but they should be adjusted for dark theme. */
.red {
	color: #e00; }
.orange {
	color: #dd7b00; }
.yellow {
	color: #b09200; }
.green {
	color: green; }
.blue {
	color: blue; }
.indigo {
	color: #80e; }
.violet {
	color: #b647b6; }

		/*** MEDIA QUERIES ***/

@media screen { /* don't print dark theme */
	:root:has(> body.dark) {
		color-scheme: dark; }

	body.dark {
		background-color: oklch(0.17 0.059 142.5);
		background-image: none;
		border-color: black;
		color: oklch(0.59 0.201353 142.4953); /* #090 */ }

	.dark footer,
	.dark nav {
		background-color: oklch(1 0 0 / 3%);
		border-color: oklch(1 0 0 / 1%);
		border-radius: 3px; }

	.dark a {
		color: oklch(0.92 0.20027 109.7692); /* #ee0 */ }

	.dark a:visited {
		color: oklch(0.78 0.1837 126.64); /* yellowgreen */ }

	.dark #logo {
		color: oklch(0.95 0.0311 75.22); /* antiquewhite */ }

	.dark .header-illustration {
		filter: brightness(0.5) contrast(3); }

	.dark .red {
		color: #f11; }
	.dark .orange {
		color: orange; }
	.dark .yellow {
		color: yellow; }
	.dark .green {
		color: #0b0; }
	.dark .blue {
		color: #48f; }
	.dark .indigo {
		color: #a5f; }
	.dark .violet {
		color: #b6b; }
}

} /* END @layer main */