@font-face {
	font-family: Fredoka;
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 100%;
	font-display: swap;
	src: url("fonts/fredoka-latin.woff2") format("woff2");
}

@font-face {
	font-family: Nunito;
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("fonts/nunito-latin.woff2") format("woff2");
}

@font-face {
	font-family: Nunito;
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/nunito-latin-italic.woff2") format("woff2");
}

:root {
	--text: #28311a;
	--text-muted: #5d6838;
	--link: #5f7d2e;
	--background: #eef3da;
	/* Olive-leaning wash → warm spring moss */
	--page-gradient-top: #f8faec;
	--page-gradient-bottom: #d2ddab66;
	--bubble-fill: #ffffff;
	--bubble-outline: rgba(126, 140, 84, 0.28);
	--bubble-shadow: rgba(90, 100, 50, 0.14);
	/* Staggered dot grid: two 18×18 layers offset by half a cell */
	--dot-a: rgba(126, 140, 84, 0.18);
	--dot-b: rgba(126, 140, 84, 0.18);
	--nav-top: #515c27;
	--palette-1: #047857;
	--palette-2: #0d9488;
	--palette-3: #14b8a6;
	--palette-4: #10b981;
	--palette-5: #22c55e;
	--palette-6: #84cc16;
	--palette-7: #f59e0b;
	--palette-8: #ec4899;
	--palette-9: #8b5cf6;
}

* {
	box-sizing: border-box;
}

html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

sub {
	font-size: 90%;
	vertical-align: inherit;
	font-style: italic;
	color: var(--text-muted);
}

y {
	color: var(--text-muted);
	font-size: 90%;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}
y2 {
font-style: italic;
}

body {
	margin: 0;
	padding: 20px;
	/* padding-bottom: 150px; */
	background-color: var(--page-gradient-bottom);
	background-image:
		radial-gradient(circle, var(--dot-a) 1px, transparent 0),
		radial-gradient(circle, var(--dot-b) 1px, transparent 0),
		linear-gradient(
			to bottom,
			var(--page-gradient-top),
			var(--page-gradient-bottom)
		);
	background-size: 18px 18px, 18px 18px, 100% 100%;
	background-position: 0 0, 9px 9px, 0 0;
	background-repeat: repeat, repeat, no-repeat;
	background-attachment: scroll, scroll, fixed;
	color: var(--text);
	overflow-y: scroll;
	overflow-x: hidden;
	font-family: Nunito, system-ui, sans-serif;
}

/* Narrow: .page is flex; wide: nav--wide floats, main is centered column. bio + nav--narrow live inside main. */
.page {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	margin: 0 auto;
	gap: 1.5rem;
}

.nav--wide {
	display: none;
}

.nav--narrow {
	display: block;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
}

.nav--narrow .nav-links {
	align-items: center;
}

main {
	max-width: 700px;
	width: 100%;
	margin: 0 auto;
	min-width: 0;
}

/* Home intro: speech bubble full content width, portrait centered beneath */
.bio-hero {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1.75rem;
	margin: 0 0 0;
}

.bio-hero__figure {
	flex: 0 0 auto;
	line-height: 0;
	display: flex;
	justify-content: center;
}

.bio-hero__portrait {
	display: block;
	width: 128px;
	height: auto;
	max-width: min(160px, 36vw);
	margin: 0;
	margin-top: 1rem;
	transform-origin: 50% 76%;
	will-change: transform;
}

.bio-hero__portrait:hover {
	animation: bio-hero-portrait-wobble 600ms ease-in-out infinite;
}

@keyframes bio-hero-portrait-wobble {
	0% {
		transform: rotate(0deg) translateY(0);
	}
	25% {
		transform: rotate(2.75deg) translateY(0px);
	}
	50% {
		transform: rotate(0deg) translateY(0);
	}
	75% {
		transform: rotate(-2.75deg) translateY(0px);
	}
	100% {
		transform: rotate(0deg) translateY(0);
	}
}

.bio-hero__bubble {
	position: relative;
	width: 100%;
	min-width: 0;
	padding: 0.85rem 1.1rem 1rem;
	background: var(--bubble-fill);
	border: 1px solid var(--bubble-outline);
	border-radius: 16px;
	box-shadow: 0 2px 10px var(--bubble-shadow);
}

.bio-hero__bubble p{
	font-size:1.15em;
}

/* Tail points down toward portrait */
.bio-hero__bubble::before {
	content: "";
	position: absolute;
	left: 50%;
	right: auto;
	top: auto;
	bottom: -8px;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border: 7px solid transparent;
	border-top-color: var(--bubble-outline);
	border-bottom-width: 0;
}

.bio-hero__bubble::after {
	content: "";
	position: absolute;
	left: 50%;
	right: auto;
	top: auto;
	bottom: -5px;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-top-color: var(--bubble-fill);
	border-bottom-width: 0;
}

.bio-hero__bubble p {
	margin-top: 0.85em;
}

.bio-hero__bubble p:first-child {
	margin-top: 0;
}

/* Tuck the closing heart closer to the last line of copy */
.bio-hero__bubble > center {
	display: block;
	margin-top: -0.85em;
	margin-bottom: 0;
	line-height: 1.2;
}

/* Standalone YouTube URLs in markdown (paragraph-only link): see scripts/update.js marked renderer */
.video-embed {
	margin: 1.25em 0 0;
	width: 100%;
	max-width: 100%;
}

.video-embed iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	display: block;
}

p {
	margin-top: 2em;
    white-space: pre-line;
    line-height: 1.6em;
}

x {
	color: #16a34a;
}

a {
	color: inherit;
    text-decoration: none;
    border-bottom: 1px rgba(110, 122, 70, 0.42) dotted;
}

a:hover {
	color: var(--link);
}

/* Sheet row type "show more": nested under prior <ul>; see js/site.js for expand behavior */
ul.show-more-host {
	padding: 0;
	margin: 0 0 1em;
	list-style: none;
}

/* No extra gap between the main list and the “show full list” row */
ul:not(.show-more-host) + ul.show-more-host {
	margin-top: 0;
}

ul:not(.show-more-host):has(+ ul.show-more-host) {
	margin-bottom: 0;
}

ul.show-more-host > li.show-more {
	margin-bottom: 0.5em;
}

ul.show-more-host > li.show-more::before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 0.224em solid transparent;
	border-right: 0.224em solid transparent;
	border-top: 0.294em solid var(--text-muted);
	margin-right: 0.1em;
	vertical-align: 0.12em;
	opacity: 0.9;
}

ul.show-more-host > li.show-more:has(.show-more__toggle:hover)::before {
	opacity: 1;
}

.show-more__toggle {
	appearance: none;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	line-height: inherit;
	text-align: left;
	cursor: pointer;
	background: none;
	border: 0;
	border-bottom: 1px rgba(110, 122, 70, 0.42) dotted;
	display: inline;
}

.show-more__toggle:hover {
	border-bottom-color: var(--text-muted);
}

.show-more__panel {
	display: block;
	margin: 0;
	padding: 0;
}

.show-more__panel[hidden] {
	display: none;
}

ul { padding:0;} 
li {
	margin-bottom: 0.5em;
	list-style:  none;
}

li:before
{
    content: '\00B7';
    margin-right: .5em;    /* any design */
}

h1 {
	font-family: Fredoka, Nunito, system-ui, sans-serif;
	font-size: 2.5em;
	font-weight: 600;
	line-height: 1.15;
}
h2 {
	font-family: Fredoka, Nunito, system-ui, sans-serif;
	padding-top: 30px;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 8px;
	font-size: 2.6em;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.03em;
	color: var(--link);
}
h3 {
	font-family: Fredoka, Nunito, system-ui, sans-serif;
	font-size: 1.4aem;
	font-weight: 600;
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 20px;
}
h4 { font-size: 1.05em; }
h5 { font-size: 1em; }
h6 { font-size: 1em; }



.nowrap {
	white-space: nowrap;
}

/* Nav links: color by sibling index among .nav-links > a */
.nav-links > a:nth-child(10n + 1) {
	color: var(--palette-1);
}
.nav-links > a:nth-child(10n + 2) {
	color: var(--palette-2);
}
.nav-links > a:nth-child(10n + 3) {
	color: var(--palette-3);
}
.nav-links > a:nth-child(10n + 4) {
	color: var(--palette-4);
}
.nav-links > a:nth-child(10n + 5) {
	color: var(--palette-5);
}
.nav-links > a:nth-child(10n + 6) {
	color: var(--palette-6);
}
.nav-links > a:nth-child(10n + 7) {
	color: var(--palette-7);
}
.nav-links > a:nth-child(10n + 8) {
	color: var(--palette-8);
}
.nav-links > a:nth-child(10n + 9) {
	color: var(--palette-9);
}
.nav-links > a:nth-child(10n + 10) {
	color: var(--palette-1);
}

/* Baked sheet sections: heading + in-section link hover match nav link N+1 (nav child 1 is top) */
.sheet-block--c1 {
	--section-link-color: var(--palette-2);
}
.sheet-block--c1 > h2.cool {
	color: var(--palette-2);
}
.sheet-block--c2 {
	--section-link-color: var(--palette-3);
}
.sheet-block--c2 > h2.cool {
	color: var(--palette-3);
}
.sheet-block--c3 {
	--section-link-color: var(--palette-4);
}
.sheet-block--c3 > h2.cool {
	color: var(--palette-4);
}
.sheet-block--c4 {
	--section-link-color: var(--palette-5);
}
.sheet-block--c4 > h2.cool {
	color: var(--palette-5);
}
.sheet-block--c5 {
	--section-link-color: var(--palette-6);
}
.sheet-block--c5 > h2.cool {
	color: var(--palette-6);
}
.sheet-block--c6 {
	--section-link-color: var(--palette-7);
}
.sheet-block--c6 > h2.cool {
	color: var(--palette-7);
}
.sheet-block--c7 {
	--section-link-color: var(--palette-8);
}
.sheet-block--c7 > h2.cool {
	color: var(--palette-8);
}
.sheet-block--c8 {
	--section-link-color: var(--palette-9);
}
.sheet-block--c8 > h2.cool {
	color: var(--palette-9);
}
.sheet-block--c9 {
	--section-link-color: var(--palette-1);
}
.sheet-block--c9 > h2.cool {
	color: var(--palette-1);
}
.sheet-block--c10 {
	--section-link-color: var(--palette-1);
}
.sheet-block--c10 > h2.cool {
	color: var(--palette-1);
}

.cool {
	font-family: Fredoka, Nunito, system-ui, sans-serif;
	/* text-transform: uppercase; */
	letter-spacing: 0.08em;
	font-weight: 600;
}


img {
	max-width: 100%;
	height: auto;
	margin: auto;
	display: block;
}

.imgrow {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	gap: 0.5em;
	margin: 2em 0;
}

.imgrow > a,
.imgrow > img {
	flex: 1 1 0;
	min-width: 0;
	display: block;
}
.imgrow > a {
	border-bottom: 4px solid transparent;
	padding-bottom: 0;
}
.imgrow > a:hover {
	border-bottom-color: #fff;
}
.imgrow > a img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	object-fit: cover;
}
.imgrow > img.color-on-hover {
	width: 100%;
	height: auto;
	margin: 0;
	object-fit: cover;
}


.header { 
	width: 220px;
    margin: 0;
    margin-bottom: 20px;
	transform: rotate(-9deg);
    width: 90px;
}

.header-letters {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-end;
	width: 100%;
	padding-top: 30px;
	padding-bottom: 40px;
	line-height: 0;
	opacity: 0.8;
	/* Spacing multipliers × this unit = margin-left (scales with container width) */
	--letter-spacing-unit: 1%;
}

.header-letters__letter {
	display: block;
	flex: 0 1 calc(100% / 11);
	width: calc(100% / 11);
	height: auto;
	object-fit: contain;
	margin-left: calc(var(--letter-spacing, 0) * var(--letter-spacing-unit));
	transform: rotate(var(--letter-tilt, 0deg));
	transform-origin: 50% 76%;
	transition: transform 220ms ease;
	will-change: transform;
}

/* Per-letter spacing — unitless multipliers of --letter-spacing-unit (1% of width) */
.header-letters__letter:nth-child(1) { --letter-spacing: 0; }
.header-letters__letter:nth-child(2) { --letter-spacing: -3.7; }
.header-letters__letter:nth-child(3) { --letter-spacing: -4.3; }
.header-letters__letter:nth-child(4) { --letter-spacing: -2.9; }
.header-letters__letter:nth-child(5) { --letter-spacing: 4.3; }
.header-letters__letter:nth-child(6) { --letter-spacing: -3.7; }
.header-letters__letter:nth-child(7) { --letter-spacing: -2.9; }
.header-letters__letter:nth-child(8) { --letter-spacing: -3.7; }
.header-letters__letter:nth-child(9) { --letter-spacing: -2.9; }
.header-letters__letter:nth-child(10) { --letter-spacing: -2.9; }
.header-letters__letter:nth-child(11) { --letter-spacing: -2.9; }

.nav {
	width: 100%;
	/* max-width: 336px; */
	margin: 0;
	padding: 5px;
}

.nav-links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15em;
}

.nav-links > a:hover {
	border-bottom-color: currentColor;
}

@media (min-width: 980px) {
	.page {
		display: flow-root;
		width: 100%;
		max-width: 100%;
	}

	.nav--wide {
		display: block;
	}

	.nav--narrow {
		display: none;
	}

	.page > .nav--wide {
		float: left;
		width: 240px;
		max-width: none;
		margin: 0;
		margin-right: 1.5rem;
		padding: 5px;
		position: sticky;
		top: 1rem;
	}

	.page > main {
		float: none;
		box-sizing: border-box;
		width: 100%;
		max-width: 700px;
		margin-left: auto;
		margin-right: auto;
		min-width: 0;
	}
}

/* Contact: link hover matches heading (nav link 8) */
section#contact {
	--section-link-color: var(--palette-8);
}

section#contact > h2.cool {
	color: var(--palette-8);
}

.nav-link--top {
	color: var(--nav-top) !important;
	margin-bottom: 0.5em;
	margin-bottom: 0.5lh;
}

.color-on-hover {
	filter: none;
	-webkit-filter: none;
}

.color-on-hover:hover {
	filter: none;
	-webkit-filter: none;
}

main .sheet-block a:hover,
section#contact a:hover {
	color: var(--section-link-color, var(--link));
	border-bottom-color: currentColor;
}

main .sheet-block .imgrow > a:hover,
section#contact .imgrow > a:hover {
	color: var(--link);
}
.tight {
	margin-bottom: 0;
}

#timestamp {
	font-size: 0.7em;
	color: var(--text-muted);
	text-align: center;
	padding-top:20px;
}

.footer-logo {
	width: 100%;
    margin-top: 100px;
    width: 90px;
}

.footer-logo-link {
	display: block;
	border-bottom: 0;
}