/* reset */

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:where([hidden]:not([hidden="until-found"])) {
	display: none !important;
}

:where(html) {
	color-scheme: dark light;
	tab-size: 2;
	scrollbar-gutter: stable;
	interpolate-size: allow-keywords;
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

:where(html:has(dialog:modal[open])) {
	overflow: clip;
}

@media (prefers-reduced-motion: no-preference) {
	:where(html:focus-within) {
		scroll-behavior: smooth;
	}
}

:where(body) {
	line-height: inherit;
	font-family: system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}

:where(main) {
	display: block;
}

:where(header, footer, main, section, article) {
	container-type: inline-size;
}

:where(button) {
	all: unset;
}

:where(input, button, textarea, select) {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	word-spacing: inherit;
	font-feature-settings: inherit;
	font-variation-settings: inherit;
}

:where(textarea) {
	resize: vertical block;
}

:where(button, label, select, summary, [role="button"], [role="option"]) {
	cursor: pointer;
}

:where(button, select) {
	text-transform: none;
}

:where(button, [type="button"], [type="reset"], [type="submit"]) {
	-webkit-appearance: button;
}

:where(button, input, optgroup, select, textarea) {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

:where(
		button::-moz-focus-inner,
		[type="button"]::-moz-focus-inner,
		[type="reset"]::-moz-focus-inner,
		[type="submit"]::-moz-focus-inner
	) {
	border-style: none;
	padding: 0;
}

:where(
		button:-moz-focusring,
		[type="button"]:-moz-focusring,
		[type="reset"]:-moz-focusring,
		[type="submit"]:-moz-focusring
	) {
	outline: 1px dotted ButtonText;
}

:where(fieldset) {
	padding: 0.35em 0.75em 0.625em;
}

:where(progress) {
	vertical-align: baseline;
}
:where(details) {
	display: block;
}
:where(summary) {
	display: list-item;
}

:where(:disabled, label:has(> :disabled)) {
	cursor: not-allowed;
}

:where(a) {
	color: inherit;
	text-underline-offset: 0.2ex;
}

:where(ul, ol) {
	list-style: none;
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
	display: block;
}

:where(img, picture, svg, video) {
	max-inline-size: 100%;
	block-size: auto;
}

:where(p, h1, h2, h3, h4, h5, h6) {
	overflow-wrap: break-word;
}

:where(p, li, figcaption) {
	max-width: 65ch;
	text-wrap: pretty;
}

:where(h1, h2, h3) {
	line-height: calc(1em + 0.5rem);
}

:where(h1, h2, h3, h4, h5, h6) {
	text-wrap: balance;
}

:where(hr) {
	border: none;
	border-block-start: 1px solid;
	color: inherit;
	block-size: 0;
	overflow: visible;
	box-sizing: content-box;
	height: 0;
}

:where(pre) {
	font-family: monospace;
	font-size: 1em;
}

:where(code, kbd, samp) {
	font-family: monospace;
	font-size: 1em;
}

:where(sub, sup) {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
:where(sub) {
	bottom: -0.25em;
}

:where(sup) {
	top: -0.5em;
}

:where(dialog, [popover]) {
	border: none;
	background: none;
	color: inherit;
	inset: unset;
	max-width: unset;
	max-height: unset;
	overflow: unset;
}

:where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
	display: none !important;
}

:where(:focus-visible) {
	outline: 3px solid CanvasText;
	box-shadow: 0 0 0 5px Canvas;
	outline-offset: 1px;
}

:where(:focus-visible, :target) {
	scroll-margin-block: 8vh;
}

:where(.visually-hidden:not(:focus-within, :active)) {
	clip-path: inset(50%) !important;
	height: 1px !important;
	width: 1px !important;
	overflow: hidden !important;
	position: absolute !important;
	white-space: nowrap !important;
	border: 0 !important;
	user-select: none !important;
}

/* typography */

@font-face {
	font-family: "OT Bulb Monoline 500";
	src: url(assets/fonts/OTBulbMonoline-500.woff2);
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: "Berkeley Mono Variable Regular";
	src: url(assets/fonts/BerkeleyMonoVariable-Regular.woff2);
}

@font-face {
	font-family: "Berkeley Mono Variable Italic";
	src: url(assets/fonts/BerkeleyMonoVariable-Italic.woff2);
}

/* variables */

:root {
	--c-green: oklch(0.6944 0.1603 166.72);
	--c-dark: oklch(0.1751 0.0406 34.49);
	--c-light: oklch(0.9422 0.0418 93.66);
	--t-bulb: "OT Bulb Monoline 500", system-ui;
	--t-berk-reg: "Berkeley Mono Variable Regular", system-ui;
	--t-berg-ital: "Berkeley Mono Variable Italic", system-ui;
}

/* styles */
htmL {
	background-image: url(assets/black-orchid.png);
	background-color: var(--c-dark);
}
body {
	padding: clamp(0.5rem, 50%, 2rem);
	/*display: flex;
	flex-direction: column;
	align-items: center;*/
	gap: 1rem;
	color: var(--c-light);
}
header {
	text-align: center;
	padding: 1rem 0;
	border-block-end: 1px solid var(--c-light);
}
h1 {
	font-family: var(--t-bulb);
	color: var(--c-green);
	text-align: center;
}
h2 {
	color: var(--c-green);
	text-align: center;
}
main {
	font-family: var(--t-berk-reg);
	align-content: center;
}
p {
	width: clamp(45ch, 100%, 75ch);
}
img {
	margin: 1rem 0;
	border-radius: 1rem;
}
details {
	border: 1px dashed var(--c-green);
	border-radius: 1.5rem;
	padding: 1rem;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem;
}
summary {
	font-size: 1.5rem;
	color: var(--c-green);
}
.anchor-links {
	padding: 1rem;
	display: flex;
	justify-content: center;
}
.anchor-links ul {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 1rem;
	color: var(--c-light);
	font-family: var(--t-berk-reg);
	& a:hover {
		color: var(--c-green);
	}
}
.project-intro {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
}
.weekly-summaries {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
	border-block-start: 1px solid var(--c-light);
}
.todo {
	border-block-start: 1px solid var(--c-light);
	padding: 1rem;
	> ul {
		padding: 1rem 0;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		align-items: center;
		> li {
			width: 100%;
			padding: 1rem;
			border: 1px dashed var(--c-green);
			border-radius: 0.5rem;
			> span {
				color: var(--c-green);
			}
		}
	}
}
.research-archive {
	padding: 1rem;
	border-block-start: 1px solid var(--c-light);
}
.links {
	padding: 1rem;
	display: flex;
	flex-flow: column wrap;
	gap: 1rem;
	& a:hover {
		color: var(--c-green);
	}
}
.links-title {
	color: var(--c-green);
	padding: 0.5rem;
	border: 1px dashed var(--c-green);
	border-radius: 0.5rem;
	width: fit-content;
}
.category {
	display: flex;
	flex-flow: row wrap;
	padding: 1rem;
	gap: 1rem;
	align-items: center;
	border: 1px solid var(--c-green);
	border-radius: 0.5rem;
}
.visual-inspiration {
	padding: 1rem;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 1rem;
}
.visual-inspiration img {
	max-width: 500px;
	margin: 0;
	&:hover {
		border: 1px dashed var(--c-green);
	}
}
footer {
	text-align: center;
	padding: 1rem 0;
	border-block-start: 1px solid var(--c-light);
}