/* ---
Title:	Chad Helmer Styles
Author:	Chad Helmer, me@chadhelmer.com
Date:	2022-12-04
TOC:	1. Declarations
			1.1 Variables
			1.2 Variations
			1.3 Fonts
		2. Sensible Defaults
		3. Theme
		4. Media Query Overrides
--- */

/* 1. Declarations */

/* 1.1 Variables */
:root {

	/* Ratios */
	--ratio-line:                           1.6; /* Line-height in relation to font size (math: 24 (comfortable line-height in px) / 16 (1rem in px)) */
	--ratio-large:                       1.1875; /* Large font size (math: 19 (in px) / 16 (1rem in px)) */
	--ratio-small:                        0.875; /* Small font size (math: 14 (in px) / 16 (1rem in px)) */

	/* Browser Units */
	--lh:                                 1.6em; /* Line-height unit; indents, margins, etc. (use until `lh` supported) (math: --ratio-line * --size-font) */
	--rlh:                               1.6rem; /* Root line-height unit; basic size for vertical rhythm on page (use until `rlh` supported) (math: --ratio-line * --size-font) */

	/* Page and Block Sizes (relative to root/viewport) */
	--size-border:                    0.9375rem; /* Border and separator width; fixed size to make consistent across page */
	--size-font:                           1rem; /* Root font size; 1rem (or 100%) usually equals 16px */
	--size-padding:                         8vw; /* Padding for articles and page sections (math: 24 (--rlh in px) / 320 (mobile width in px) * 100vw) */
	--size-radius:                     0.375rem; /* Border radius; fixed size to make consistent across page */

	/* Fonts and Inline Sizes (relative to font) */
	--font-body: "Karla", system-ui, sans-serif; /* Default/body typeface stack */
	--font-code:        ui-monospace, monospace; /* Fixed-width typeface stack */
	--font-title:              var(--font-body); /* Title/display typeface stack */
	--weight-normal:                        450; /* Default font weight, expecting variable font */
	--weight-bold:                          750; /* Bold font weight, expecting variable font */
	--size-line:                           40em; /* Line measure; max. length of content for readability; also set @media breakpoint where var() isn't valid */
	--size-gap:                          0.15em; /* Line gap (space between font ascenders/descenders and line-height); pads inline elements */
	--size-space:                       0.375em; /* Approx. size of space character for font */

	/* Colors (use in hsl() until lch() or oklch() supported)*/
	--hue-1:                                195; /* Base color; angle of 0-360 color circle (= greenblueish) */
	--hue-2:                                345; /* Secondary color; angle of 0-360 color circle (split complementary of base color; math: --hue-1 + 150) */
	--hue-3:                                 45; /* Tertiary color; angle of 0-360 color circle (split complementary of base color; math: --hue-1 - 150) */
	--hsl-text:        var(--hue-1),  90%,  10%; /* Text/borders */
	--hsl-shadow:      var(--hue-1),  90%,  10%; /* Shadows */
	--hsl-link:        var(--hue-1), 100%,  25%; /* Links */
	--hsl-accent:      var(--hue-2),  65%,  45%; /* Accents */
	--hsl-highlight:   var(--hue-3), 100%,  50%; /* Highlights */
	--hsl-background:  var(--hue-3),  15%,  90%; /* Backgrounds */
	--hsl-whitewash:   var(--hue-3),   5%, 100%; /* Code and accent backgrounds */

	/* Interactions */
	--transition-duration:                 50ms;
}

/* 1.2 Theme Variations */

/* Larger Font Sizes for Larger Screens */
@media (min-width: 640px) {
	:root {
		--size-font: 1.125rem;
	}
}
@media (min-width: 1280px) {
	:root {
		--size-font: 1.25rem;
	}
}

/* Presentation Gradient Color Cycle */
:root[data-theme], /* default */
:root[data-theme="dawn"] {
	--stop-color-0:   hsl( 25, 100%, 75%);
	--stop-color-50:  hsl(275,  15%, 50%);
	--stop-color-100: hsl(195, 100%, 10%);
}
:root[data-theme="day"]  {
	--stop-color-0:   hsl(200,  65%, 75%);
	--stop-color-50:  hsl(190,  25%, 95%);
	--stop-color-100: hsl(170, 100%, 20%);
}
:root[data-theme="dusk"] {
	--stop-color-0:   hsl( 25, 100%, 70%);
	--stop-color-50:  hsl(230,  33%, 55%);
	--stop-color-100: hsl( 30,  30%, 10%);
}
/*
:root[data-theme="dusk"] {
	--stop-color-0:   hsl( 25, 100%, 90%);
	--stop-color-50:  hsl( 10,  85%, 70%);
	--stop-color-100: hsl(335,  30%, 20%);
}
*/
:root[data-theme="dark"] {
	--stop-color-0:   hsl(220,  15%, 50%);
	--stop-color-50:  hsl(210,  55%, 25%);
	--stop-color-100: hsl(170, 100%,  5%);
}

/* 1.3 Fonts */

/* Karla variable typeface by Jonathan Pinhorn: https://github.com/googlefonts/karla */
@supports (font-variation-settings: normal) {
	@font-face {
		font-display: swap;
		font-family: "Karla";
		font-style: normal;
		font-weight: 200 800; /* variable limits of font */
		src: url("/fonts/karla-x.woff2") format('woff2-variations');
	}
	@font-face {
		font-display: swap;
		font-family: "Karla";
		font-style: italic;
		font-weight: 200 800; /* variable limits of font */
		src: url("/fonts/karla-i-x.woff2") format('woff2-variations');
	}
}

/* 2. Sensible Defaults */

/* Reset. Besting the user-agent stylesheet should come with a "don't try this at home" disclaimer. */
/* Hat tips to Sanitize (https://csstools.github.io/sanitize.css), H5BP (https://html5boilerplate.com), Andy Bell (https://piccalil.li/blog/a-modern-css-reset) */
/* This section also styles all HTML elements output by rendered Markdown, in alphabetical order, with sensible defaults for custom properties */

*,
::after,
::before {
	/* outline: 1px dotted cyan; */ /* debugging */
	background: transparent no-repeat;
	border: 0 solid currentcolor;
	box-sizing: border-box;
	color: inherit;
	font: inherit; /* resets font-family, -kerning, -size, -size-adjust, -stretch, -style, -variant, -weight, line-height */
	margin: 0;
	overflow: visible;
	padding: 0;
	text-align: left;
	text-decoration-color: inherit;
	transition: none calc(5 * var(--transition-duration)) ease-out;
}
::after,
::before {
	text-decoration: inherit;
	vertical-align: inherit;
}
:active,
:focus,
:hover {
	transition-duration: var(--transition-duration);
}
:focus-within,
:target-within {
	scroll-behavior: smooth;
}

:any-link { /* Mimic user-agent stylesheets and match actual links; could also use a[href] */
	color: hsl(var(--hsl-link));
	text-decoration-color: hsla(var(--hsl-link), 0.2);
	text-decoration-thickness: 0.09375rem; /* maintain consistency across page */
	text-underline-offset: 0.09375rem;
	transition-property: text-decoration-color;
}
:any-link:active,
:any-link:focus,
:any-link:hover {
	text-decoration-color: inherit;
}

/* abbr[aria-label], */
abbr[title] {
	cursor: help;
	text-decoration-color: hsl(var(--hsl-text), 0.5);
	text-decoration-line: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: 0.09375rem;
	text-underline-offset: 0.09375rem;
}

article,
aside {
	box-sizing: content-box;
	margin-left: auto;
	margin-right: auto;
	max-width: var(--size-line);
	padding: calc(var(--size-padding));
}
article :not([style*="display:none"]) + :not(dd):not(figcaption):not(li):not(hr):not(section) {
	margin-top: var(--rlh);
}

audio,
canvas,
iframe,
img,
svg,
video {
	border-radius: var(--size-radius);
	display: block;
	height: auto;
	max-width: 100%;
}

audio:not([controls]) {
	display: none; /* iOS 4-7 */
	height: 0; /* iOS 4-7 */
}

b,
strong {
	font-weight: var(--weight-bold);
}

blockquote {
	border-left-width: var(--size-border);
	border-left-color: hsl(var(--hsl-accent));
	padding-left: calc(var(--rlh) - var(--size-border));
}

body {
	height: inherit;
}

button,
[type="button" i],
[type="reset" i],
[type="submit" i] {
	cursor: pointer;
	-webkit-appearance: button;
}
button,
input,
select,
textarea {
	border-radius: var(--size-radius);
	border-width: var(--size-border);
	height: auto;
	margin-bottom: calc(var(--size-border) * -1);
	margin-top: calc(var(--size-border) * -1);
	max-width: 100%;
	padding: calc(0.25rem - (var(--size-border) / 2)) calc(0.5rem - (var(--size-border) / 2));
}
button:focus,
input:focus,
select:focus,
textarea:focus {
	border-color: hsl(var(--hsl-accent));
}

cite,
dfn,
em,
i {
	font-style: italic;
}
cite > em,
cite > i,
em > cite,
em > i,
i > cite,
i > em {
	font-style: normal; /* invert */
}

code,
kbd,
samp {
	background-color: hsl(var(--hsl-whitewash));
	border-radius: var(--size-radius);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	color: hsl(var(--hsl-background));
	font-family: var(--font-code);
	font-size: calc(1em * 0.9375);
	line-height: calc(var(--ratio-line) / 0.9375);
	padding: var(--size-gap) calc(var(--size-gap) * 2);
}

del,
s {
	text-decoration-color: hsla(var(--hsl-accent), 0.75);
	text-decoration-style: strikethrough;
	text-decoration-thickness: 0.125rem;
}

details {
	padding: var(--rlh);
	position: relative; /* for summary::before */
}
details > summary {
	cursor: pointer;
	display: list-item; /* Safari */
	font-weight: var(--weight-bold);
	list-style-type: none;
	outline: none; /* inconsistent implementation */
}
details > summary::after {
	background-color: hsl(var(--hsl-link));
	content: "";
	display: inline-block;
	float: right;
	height: var(--lh);
	margin-left: 1em;
	-webkit-mask: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' stroke-linecap='round' stroke-linejoin='round' fill='none' stroke='black' stroke-width='1.5'><path d='M4 6l4 4 4-4'/></svg>") center / var(--lh) no-repeat;
	width: var(--lh);
}
details[open] > summary::after {
	transform: rotate(180deg);
}
details > summary::before {
	bottom: 0;
	border-radius: var(--size-radius);
	box-shadow: 0 0 0 var(--size-border); /* border */
	content: ""; /* enlarge interactive area */
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}
details > summary:focus::before {
	outline: 2px auto -webkit-focus-ring-color; /* fallback */
	outline-offset: 2px;
}
details > summary:focus:not(:focus-visible) {
	outline: none; /* until :focus-visible widely supported */
}
details > summary:focus-visible {
	outline: 2px auto -webkit-focus-ring-color; /* show on keyboard focus */
	outline-offset: 2px;
}
details > summary::-webkit-details-marker {
	display: none; /* Safari */
}

dialog {
	background-color: hsl(var(--hsl-whitewash));
	height: fit-content;
	left: 0;
	margin: auto;
	padding: var(--size-padding);
	position: absolute;
	right: 0;
	width: fit-content;
}
dialog:not([open]) {
	display: none; /* Safari */
}

dl dd {
	display: list-item;
	list-style-type: "—\A0\A0"; /* em dash + white space */
	margin-left: var(--rlh);
}
dl dd::marker {
	color: hsl(var(--hsl-accent));
	font-size: calc(1em * var(--ratio-small));
	font-weight: calc(var(--weight-normal) / var(--ratio-small));
	line-height: calc(var(--ratio-line) / var(--ratio-small));
}
dl dt {
	font-weight: var(--weight-bold);
}

fieldset {
	border-width: var(--size-border);
	padding: var(--rlh);
}

figure > * {
	width: 100%;
}
figure figcaption {
	font-size: calc(1em * var(--ratio-small));
	font-weight: calc(var(--weight-normal) / var(--ratio-small));
	line-height: calc(var(--ratio-line) / var(--ratio-small));
	opacity: 0.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-title);
	font-variant-numeric: lining-nums;
}
h1 {
	font-size: var(--lh);
	font-weight: var(--weight-bold);
	line-height: 1;
}
h2 {
	font-size: var(--lh);
	font-weight: calc(var(--weight-normal) / var(--ratio-line));
	line-height: 1;
}
h3 {
	font-weight: var(--weight-bold);
	line-height: 1;
	margin-top: calc(var(--lh) - 1em);
}
h4 {
	line-height: 1;
	margin-top: calc(var(--lh) - 1em);
}
h5 {
	font-weight: var(--weight-bold);
}
h5,
h6 {
	float: left; /* inline */
	margin-right: var(--rlh);
	vertical-align: baseline;
}

hr {
	height: var(--rlh); /* Firefox */
	margin: calc(var(--rlh) * 1.5) auto;
}
hr::after {
	color: hsl(var(--hsl-accent));
	content: "•\A0\A0\A0\A0•\A0\A0\A0\A0•";
	display: block;
	font-weight: var(--weight-bold);
	text-align: center;
}

html {
	caret-color: currentcolor;
	color: hsl(var(--hsl-text));
	cursor: default;
	font-family: var(--font-body);
	font-size: var(--size-font);
	font-variant-numeric: oldstyle-nums proportional-nums;
	font-weight: var(--weight-normal);
	hanging-punctuation: first last;
	height: 100%;
	line-height: var(--ratio-line);
	overflow-wrap: break-word;
	overflow-x: hidden;
	overflow-y: scroll;
	scroll-behavior: smooth;
	scroll-padding: calc(var(--size-padding) + 6rem);
	tab-size: 4;
	-webkit-tap-highlight-color: transparent; /* iOS */
	text-rendering: optimizeSpeed;
	-webkit-text-size-adjust: 100%; /* iOS */
	word-break: break-word;
}

main li {
	margin-left: var(--rlh);
}
main li::marker {
	color: hsl(var(--hsl-accent));
	font-size: calc(1em * var(--ratio-small));
	font-weight: calc(var(--weight-normal) / var(--ratio-small));
	line-height: calc(var(--ratio-line) / var(--ratio-small));
}
main ul > li {
	list-style-type: "•\A0\A0\A0\A0"; /* bullet + white space */
}
header li,
footer li {
	list-style-type: none; /* Note: removes list semantics in Safari (bug) */
}
header li::before,
footer li::before {
	content: "\200B"; /* Non-breaking space; adds list semantics back in Safari (bug) */
	float: left;
}

mark {
	background-color: hsla(var(--hsl-highlight), 0.4);
	border-radius: 0.25em 100% / 100% 0.25em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	margin: calc(var(--size-gap) * -1)  calc(var(--size-gap) * -2);
	mix-blend-mode: multiply;
	padding: var(--size-gap) calc(var(--size-gap) * 2);
}

pre {
	white-space: pre-wrap;
	word-break: normal;
}
pre > code {
	display: block;
	padding: var(--rlh);
	word-wrap: break-word; /* = overflow-wrap; no other way to break lines within markdown-rendered `code` */
}

progress {
	vertical-align: baseline;
}
progress,
[type="checkbox"],
[type="radio"],
[type="range"] {
	accent-color: hsl(var(--hsl-accent));
}

select {
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' stroke-linecap='round' stroke-linejoin='round' fill='none' stroke='currentcolor'><path d='M2 3l2 2 2-2'/></svg>");
	background-position: right 0.25em center;
	background-size: 1em;
	padding-right: 1em;
}
select[multiple] {
	background-image: none;
}

small {
	font-size: calc(1em * var(--ratio-small));
	font-weight: calc(var(--weight-normal) / var(--ratio-small));
	line-height: calc(var(--ratio-line) / var(--ratio-small));
}

sub,
sup {
	font-style: normal;
	font-weight: var(--weight-normal);
	vertical-align: baseline;
}
sub {
	font-feature-settings: "subs" 1;
}
sup {
	font-feature-settings: "sups" 1;
}
@supports (font-variant-position: sub) and (font-variant-position: super) {
	sub,
	sup {
		font-feature-settings: normal;
	}
	sub {
		font-variant-position: sub;
	}
	sup {
		font-variant-position: super;
	}
}
sub > a,
sup > a {
	padding: 0.25em;
}

svg {
	pointer-events: none; /* SVG with fills capture pointer-events, unwanted behavior unless SVG is interactive */
}
svg:not([fill]) {
	fill: currentcolor;
}

table {
	border-collapse: collapse;
	overflow: scroll;
	/* position: relative; *//* for sticky thead */
	scroll-snap-type: both mandatory;
	table-layout: fixed;
	text-indent: 0; /* Chrome, Edge, Safari */
	width: 100%;
}
table > caption {
	caption-side: bottom;
	font-size: calc(1em * var(--ratio-small));
	font-weight: calc(var(--weight-normal) / var(--ratio-small));
	line-height: calc(var(--ratio-line) / var(--ratio-small));
	opacity: 0.5;
}
/*
table thead {
	position: sticky;
	top: 0;
}
*/
table td,
table th {
	/* background-color: hsla(var(--hsl-text), 0.05); */
	/* box-shadow: 0 0 0 var(--size-border) hsl(var(--hsl-background)); */ /* simulate borders */
	font-size: calc(1em * var(--ratio-small));
	font-variant-numeric: lining-nums tabular-nums;
	font-weight: calc(var(--weight-normal) / var(--ratio-small));
	line-height: calc(1 / var(--ratio-small));
	padding: 0 calc(var(--rlh) - 1rem) calc(var(--rlh) - 1rem) 0;
	scroll-snap-align: start;
}
table td {
	vertical-align: top;
}
table th {
	font-weight: var(--weight-bold);
	vertical-align: bottom;
}
table > thead th:first-child {
	border-top-left-radius: var(--size-radius);
}
table > thead th:last-child {
	border-top-right-radius: var(--size-radius);
}
table tr:last-child td:first-child {
	border-bottom-left-radius: var(--size-radius); /* assumes no tfoot and no td in thead */
}
table tr:last-child td:last-child {
	border-bottom-right-radius: var(--size-radius); /* assumes no tfoot and no td in thead */
}

textarea {
	resize: vertical;
	vertical-align: bottom; /* textarea has unspecified baseline */
}

time {
	font-variant-numeric: lining-nums tabular-nums;
}

[align="right" i] {
	float: right;
	margin: var(--rlh) 0 var(--rlh) var(--rlh);
}
[align="left" i] {
	float: left;
	margin: var(--rlh) var(--rlh) var(--rlh) 0;
}

[aria-busy="true" i] {
	cursor: progress;
}

[aria-controls] {
	cursor: pointer;
}

[aria-disabled="true" i],
[disabled] {
	cursor: not-allowed;
}

[hidden][aria-hidden="false" i] {
	display: initial;
}
[hidden][aria-hidden="false" i]:not(:focus) {
	clip: rect(0, 0, 0, 0);
	position: absolute;
}

[rel="tag" i] {
	white-space: nowrap;
}

[type="search" i] {
	-webkit-appearance: textfield; /* Chrome, Edge, Safari */
	/* outline-offset: -2px; */ /* Safari */
}

::selection {
	background-color: hsl(var(--hue-1), 100%, 90%); /* fallback matches browser default hue in #b3d4fc */
	text-shadow: none;
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

::-webkit-input-placeholder {
	color: inherit;
	opacity: 0.54;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
	opacity: 1; /* always-on number increments for Chrome */
}

::-webkit-search-decoration {
	-webkit-appearance: none;
}

/* 3. Theme */

[data-theme] {
	background-color: hsl(var(--hsl-background));
	overflow: hidden; /* defer to body for perspective/parallax scrolling */
}

[data-theme] body {
	display: grid;
/* 	gap: var(--size-padding); */
	grid-template-columns: 100%;
	grid-template-rows: 100vmin auto 1fr; /* for header (100vh on widescreen, square on narrow), main, footer (1fr ensures it always stretches to bottom of viewport) */
	justify-items: center;
	overflow: hidden scroll;
	perspective-origin: 100vw 100vmin;
	perspective: 1px; /* enable parallax */
	scroll-behavior: inherit;
	scroll-padding: inherit;
	/* -webkit-overflow-scrolling: touch; *//* older iOS */
}

/* Skip to content link */
[data-theme] #start {
	left: calc(0.5 * var(--size-padding));
	position: absolute;
	top: calc(0.5 * var(--size-padding));
	z-index: 1; /* above header */
}
[data-theme] #start a {
	--hsl-link: var(--hsl-background);
	background-color: hsla(var(--hsl-shadow), 0.25);
	border-radius: var(--size-radius);
	box-shadow: 0 0 var(--rlh) hsla(var(--hsl-shadow), 0.15);
	display: inline-block;
	opacity: 0;
	padding: calc(var(--rlh) / 3);
	pointer-events: none; /* keyboard only */
	transition-property: opacity;
}
[data-theme] #start a:active,
[data-theme] #start a:focus {
	opacity: 1;
}

[data-theme] #header {
	align-items: flex-end;
	align-self: end;
	color: hsl(var(--hsl-background));
	display: flex;
	flex-wrap: wrap;
	gap: var(--rlh);
	justify-content: space-between;
	line-height: 1;
	padding: var(--size-padding);
	position: sticky;
	top: 0;
	transform-style: preserve-3d;
	width: 100%;
}

[data-theme] #header > * {
	transform-style: inherit; /* Warning: this is aggressive (for Firefox) and creates unnecessary stacking contexts */
}
[data-theme] #header a {
	border-radius: var(--size-radius);
	color: inherit;
	display: inline-block;
	margin: calc(var(--rlh) / -3); /* counteract padding */
	mix-blend-mode: hard-light;
	padding: calc(var(--rlh) / 3);
	position: relative;
	text-decoration: none;
	transition-property: background-color; /* not ideal, but fine in small doses */
}
[data-theme] #header a:active,
[data-theme] #header a:focus,
[data-theme] #header a:hover {
	background-color: hsla(var(--hsl-shadow), 0.25);
}
[data-theme] #header h1 {
	font-size: inherit;
}
[data-theme] #header [role="doc-subtitle"] {
	opacity: 0.6;
	margin-top: calc(var(--lh) - 1em);
}

[data-theme] #nav ul {
	display: flex;
	flex-wrap: wrap;
}
[data-theme] #nav li + li {
	margin-left: var(--rlh);
	position: relative;
}
[data-theme] #nav li + li::before {
	color: hsla(var(--hsl-background), 0.4);
	content: "•"; /* bullet */
	height: 1em;
	margin-right: 0.0625em; /* art direction; offset half of `#nav a` letter-spacing */
	position: absolute;
	right: 100%;
	text-align: center;
	width: var(--rlh);
}
[data-theme] #nav a {
	font-size: calc(1em * var(--ratio-small));
	font-weight: calc(var(--weight-normal) / var(--ratio-small));
	line-height: calc(1 / var(--ratio-small));
	letter-spacing: 0.125em;
	text-transform: uppercase;
}

[data-theme] #presentation {
	bottom: 0;
	box-shadow:
		0 -100vh     0 100vh var(--stop-color-0),
		0      0   5vh   5vh var(--stop-color-100),
		0      0  50vh  50vh var(--stop-color-100),
		0      0     0 100vh hsl(var(--hsl-shadow)); /* continue gradient beyond footer without taking up space; but watch performance */
	height: 100vmin;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	z-index: -1;
}

[data-theme] #presentation > svg {
	--z-factor: 0.25; /* perceived distance between layers */
	border-radius: 0;
	bottom: 0;
	height: 100%;
	margin-bottom: -1px; /* rounding bug */
	max-width: none;
	position: absolute;
	transform:
		translateZ(calc(var(--z-index, 0) * var(--z-factor) * -1px)) /* distant elements scroll slowly */
		scale(calc(var(--z-index, 0) * var(--z-factor) + 1)); /* preserve size of distant elements */
	transform-origin: 100vw 100vmin;
	width: 100%;
}
[data-theme] #sky       { --z-index: 8; }
[data-theme] #mountain  { --z-index: 5; }
[data-theme] #hill-far  { --z-index: 3; }
[data-theme] #hill-mid  { --z-index: 2; }
[data-theme] #hill-near { --z-index: 1; }
[data-theme] #trees,
[data-theme] #birds     { --z-index: 0; }
[data-theme] #gradient stop[offset="0%"]   { stop-color: var(--stop-color-0); }
[data-theme] #gradient stop[offset="50%"]  { stop-color: var(--stop-color-50); }
[data-theme] #gradient stop[offset="100%"] { stop-color: var(--stop-color-100); }

[data-theme] #content {
	pointer-events: none; /* keep #header interactive when possible */
	position: relative;
	width: 100%;
	z-index: 2; /* above #header and #footer */
}
[data-theme] #content > * {
	pointer-events: auto; /* counter #content rule */
}

[data-theme] #work dt mark + strong {
	margin-left: var(--rlh);
	position: relative;
}
[data-theme] #work dt mark + strong::before {
	color: hsl(var(--hsl-accent));
	content: "•"; /* bullet */
	font-weight: bold;
	height: var(--lh);
	position: absolute;
	right: 100%;
	text-align: center;
	width: var(--rlh);
}

[data-theme] #footer {
	--hsl-link: var(--hsl-background); /* inherit */
	align-content: end;
	color: hsla(var(--hsl-background), 0.6);
	display: grid;
	gap: var(--size-padding);
	grid-template-columns: 100%;
	grid-template-rows: calc(var(--size-padding) + (5 * var(--rlh))); /* create dummy track for sticky children (try not to exceed minimum height of #main)  */
	justify-content: center;
	line-height: 1;
	margin-top: calc(-2 * var(--size-padding) - (5 * var(--rlh))); /* counteract dummy grid track */
	max-width: calc(var(--size-line) + (2 * var(--size-padding))); /* as wide as can be covered by article */
	padding: var(--size-padding);
	width: 100%;
	z-index: 1; /* above #header, below #content */
}
[data-theme] #footer::before {
	content: ""; /* occupy dummy track */
}
[data-theme] #footer > * {
	bottom: var(--size-padding);
	position: sticky;
}

[data-theme] #contact {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
}
[data-theme] #contact h2 {
	color: hsl(var(--hsl-accent));
	filter: brightness(150%) saturate(80%);
	flex: 0 0 100%;
	font-size: inherit;
	font-weight: var(--weight-bold);
	letter-spacing: 0.125em;
	text-transform: uppercase;
}
[data-theme] #contact ul {
	display: flex;
	flex-wrap: wrap;
}
[data-theme] #contact li {
	margin-right: var(--rlh);
	margin-top: calc(var(--lh) - 1em);
}
[data-theme] #contact a[href="#start"] {
	margin-top: var(--rlh);
	margin-left: auto;
}

[data-theme] article {
	background-color: hsl(var(--hsl-background));
	border-radius: var(--size-radius);
	box-shadow:
		0 0 var(--rlh) hsla(var(--hsl-shadow), 0.15),
		inset 0  1px hsla(var(--hsl-whitewash), 0.7),
		inset 0 -1px hsla(var(--hsl-shadow), 0.3);
	box-sizing: content-box;
	margin-left: auto;
	margin-right: auto;
	max-width: var(--size-line);
	padding: calc(var(--size-padding));
}
[data-theme] article + article {
	margin-top: var(--size-padding);
}
[data-theme] article > h2 {
	color: hsl(var(--hsl-accent));
	font-size: inherit;
	font-weight: var(--weight-bold);
	letter-spacing: 0.125em;
	text-transform: uppercase;
}

[data-theme] #hello p:first-of-type {
	font-size: calc(1em * var(--ratio-large));
	font-weight: calc(var(--weight-normal) / var(--ratio-large));
	line-height: calc(var(--ratio-line) / var(--ratio-large));
}
[data-theme] #hello dl,
[data-theme] #work dl {
	display: grid;
	gap: var(--rlh);
	grid-template-columns: repeat(auto-fit, minmax(10rem, auto));
	grid-auto-rows: 1fr;
	padding: var(--rlh);
}
[data-theme] #work dl {
	grid-template-columns: auto;
	grid-auto-rows: auto;
}
[data-theme] #hello dl div,
[data-theme] #work dl div {
	display: grid;
	grid-template-rows: auto 1fr;
	margin: 0;
}
[data-theme] #hello dl div,
[data-theme] #work dd {
	font-size: calc(1em * var(--ratio-small));
	font-weight: calc(var(--weight-normal) / var(--ratio-small));
}
[data-theme] #hello dt {
	letter-spacing: 0.125em;
	text-transform: uppercase;
}
[data-theme] #hello dd,
[data-theme] #work dd {
	color: hsla(var(--hsl-text), 0.66);
	font-style: italic;
	list-style-type: none; /* Note: removes list semantics in Safari (bug) */
	margin-left: 0;
	margin-top: 0.5em;
}
[data-theme] #hello dd::before,
[data-theme] #work dd::before {
	content: "\200B"; /* Non-breaking space; adds list semantics back in Safari (bug) */
	float: left;
}

[data-theme] pre {
	position: relative; /* for button */
}
[data-theme] pre > code + button {
	border-width: 0;
	box-shadow:
		0 0.0625rem 0.125rem hsla(var(--hsl-shadow), 0.2),
		inset 0 -0.0625rem 0 hsla(var(--hsl-shadow), 0.3),
		inset 0 0.0625rem 0 hsl(var(--hsl-whitewash));
	margin: 0;
}
[data-theme] pre > code + button {
	background-color: hsl(var(--hsl-background));
	color: transparent;
	height: var(--rlh);
	opacity: 0;
	overflow: hidden;
	position: absolute;
	right: var(--rlh);
	top: var(--rlh);
	width: var(--rlh); /* button inserted by JavaScript */
	transition-property: opacity;
}
[data-theme] pre > code + button:focus,
[data-theme] pre:hover > code + button {
	opacity: 1;
}
[data-theme] pre > code + button:active {
	box-shadow:
		inset 0 0.0625rem 0.125rem hsla(var(--hsl-shadow), 0.2),
		0 -0.0625rem 0 hsla(var(--hsl-shadow), 0.3),
		0 0.0625rem 0 hsl(var(--hsl-whitewash));
	transform: translateY(0.0625rem);
}
[data-theme] pre > code + button::before {
	background-color: hsl(var(--hsl-link));
	bottom: 0;
	content: "";
	left: 0;
	-webkit-mask: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='2' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'><path d='M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2'/><rect x='9' y='3' width='6' height='4' rx='2'/></svg>") center / 1em no-repeat;
	position: absolute;
	right: 0;
	top: 0;
}
[data-theme] pre > code + button[data-copied="true"]::before {
	-webkit-mask-image: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='2' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'><path d='M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2'/><rect x='9' y='3' width='6' height='4' rx='2'/><path d='M9 14l2 2 4-4'/></svg>");
}
[data-theme] pre > code + button[data-copied="false"]::before {
	-webkit-mask-image: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='2' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'><path d='M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2'/><rect x='9' y='3' width='6' height='4' rx='2'/><path d='M10 12l4 4m0-4l-4 4'/></svg>");
}

/* 4. Media Query Overrides */

/* 4.1. Large Screens */
@media (min-width: 960px) {}

/* 4.2 Ultra-Wide Screens */
@media (min-aspect-ratio: 16/9) {}

/* 4.3 Reduced Motion */
@media (prefers-reduced-motion) {
	*,
	::after,
	::before {
		animation-delay: -1ms !important;
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		background-attachment: initial !important;
		transition-delay: 0s !important;
		transition-duration: 0s !important;
	}
	:focus-within,
	:target-within {
		scroll-behavior: auto;
	}
}

/* 4.4 Print */
@media print {
	*, ::after, ::before {
		background: transparent !important;
		box-shadow: none !important;
		color: #000 !important; /* black prints faster */
		text-shadow: none !important;
	}
	a, a:visited {
		text-decoration: underline;
	}
	a[href]:not([href^="#"]):not([href^="javascript:" i])::after {
		content: " (" attr(href) ")";
	}
	abbr[title]::after {
		content: " (" attr(title) ")";
	}
	blockquote, figure, img, pre, tr {
		page-break-inside: avoid;
	}
	h2, h3, h4, h5, h6, p {
		orphans: 3;
		widows: 3;
	}
	h2, h3, h4, h5, h6 {
		page-break-after: avoid;
	}
	html {
		font-size: 75%; /* 12px */
	}
	pre {
		white-space: pre-wrap !important;
	}
	thead {
		display: table-header-group;
	}
}