/* Gruvbox. Cream in light mode, pure black in dark mode. Follows the system only. */
:root {
	color-scheme: light;
	--bg: #fbf1c7;
	--bg2: #f2e5bc;
	--fg: #3c3836;
	--mute: #7c6f64;
	--line: #d5c4a1;
	--a: #076678;
	--hot: #af3a03;
	--y: #b57614;
	--g: #79740e;
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--bg: #000;
		--bg2: #32302f;
		--fg: #ebdbb2;
		--mute: #a89984;
		--line: #504945;
		--a: #83a598;
		--hot: #fe8019;
		--y: #fabd2f;
		--g: #b8bb26;
	}
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font: 17px/1.6 Charter, "Iowan Old Style", Georgia, serif;
	overflow-wrap: break-word;
}

a { color: var(--a); }
a:hover { color: var(--hot); }
.brand,
nav a,
.tags a,
#artlist a,
.recipes a,
.np a { text-decoration: none; }
.brand:hover { color: var(--fg); }

a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid var(--y);
	outline-offset: 2px;
}

.top,
main,
footer {
	max-width: 68rem;
	margin: auto;
	padding: 0 1.25rem;
}

.top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: .75rem 1.5rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	border-bottom: 3px double var(--line);
}

.brand {
	font: 700 1.15rem/1.15 system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--fg);
	text-decoration: none;
}

.brand span { color: var(--hot); }

nav {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1rem;
}

nav a {
	font: 600 .9rem system-ui, sans-serif;
	text-decoration: none;
}

.kicker {
	font: 700 .75rem system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: .15em;
	color: var(--g);
	margin: 2rem 0 .25rem;
}

h1 {
	font-family: Charter, "Iowan Old Style", Georgia, serif;
	font-weight: 700;
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	line-height: 1.15;
	margin: .2rem 0 1rem;
	max-width: 22em;
}

h2 {
	font: 700 .85rem system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--hot);
	border-bottom: 1px solid var(--line);
	padding-bottom: .3rem;
	margin: 2rem 0 1rem;
}

h2 small {
	color: var(--mute);
	font-weight: 400;
	letter-spacing: 0;
}

h3 {
	font-family: Charter, "Iowan Old Style", Georgia, serif;
	font-size: 1.15rem;
	line-height: 1.3;
	margin: 1.5rem 0 .5rem;
}

.desc {
	color: var(--mute);
	margin: 1.5rem 0 1rem;
}

.search {
	position: relative;
	max-width: 32rem;
	margin: 1.5rem 0 0;
}

#search {
	width: 100%;
	font: inherit;
	padding: .7rem 2.5rem .7rem 1rem;
	background: var(--bg2);
	color: var(--fg);
	border: 2px solid var(--fg);
	border-radius: 0;
	box-shadow: 4px 4px 0 var(--y);
}

#search::-webkit-search-cancel-button,
#search::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

#clear-search {
	position: absolute;
	right: .35rem;
	top: .35rem;
	width: 2rem;
	height: 2rem;
	border: 0;
	background: none;
	color: var(--mute);
	font: 1.4rem/1 system-ui, sans-serif;
	cursor: pointer;
}

#clear-search:hover { color: var(--fg); }

.tags {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.tags li { margin: 0; }

.tags a {
	display: block;
	font: .8rem system-ui, sans-serif;
	padding: .15rem .6rem;
	border: 1px solid var(--line);
	border-radius: 99px;
	text-decoration: none;
	color: var(--fg);
}

.tags a:before { margin-right: .3em; }

.tags small {
	color: var(--mute);
	font-size: .85em;
	margin-left: .2em;
}

.tags a:hover small { color: inherit; }

#tag_alcohol:before { content: "🍸" ;}
#tag_american:before { content: "🇺🇸" ; }
#tag_apple:before { content: "🍎" ; }
#tag_argentinian:before { content: "🇦🇷" ; }
#tag_asian:before { content: "🥢" ; }
#tag_australian:before { content: "🇦🇺" ;}
#tag_austrian:before { content: "🇦🇹" ;}
#tag_bacon:before { content: "🥓" ; }
#tag_beans:before { content: "🫘" ; }
#tag_beef:before { content: "🐄" ; }
#tag_belgian:before { content: "🇧🇪" ; }
#tag_brazilian:before { content: "🇧🇷" ; }
#tag_bread:before { content: "🍞" ;}
#tag_breakfast:before { content: "🌅" ;}
#tag_broccoli:before { content: "🥦" ;}
#tag_cake:before { content: "🍰" ; }
#tag_cheese:before { content: "🧀" ; }
#tag_chicken:before { content: "🐔" ;}
#tag_chinese:before { content: "🐉" ; }
#tag_chocolate:before { content: "🍫" ; }
#tag_christmas:before { content: "🎄" ; }
#tag_cookies:before { content: "🍪" ;}
#tag_corn:before { content: "🌽" ;}
#tag_curry:before { content: "🍛" ; }
#tag_dessert:before { content: "🍮" ; }
#tag_dominican:before { content: "🇩🇴" ;}
#tag_drink:before { content: "🍹" ;}
#tag_duck:before { content: "🦆" ; }
#tag_dumpling:before { content: "🥟" ;}
#tag_dutch:before { content: "🇳🇱" ;}
#tag_easter:before { content: "✝️" ; }
#tag_eggs:before { content: "🥚" ; }
#tag_english:before { content: "🏴󠁧󠁢󠁥󠁮󠁧󠁿" ; }
#tag_fasting:before { content: "☦️" ; }
#tag_filipino:before { content: "🇵🇭" ; }
#tag_fish:before { content: "🐟" ; }
#tag_french:before { content: "🇫🇷" ; }
#tag_fruit:before { content: "🍇" ; }
#tag_german:before { content: "🇩🇪" ; }
#tag_greek:before { content: "🇬🇷" ; }
#tag_indian:before { content: "🇮🇳" ; }
#tag_irish:before { content: "🇮🇪" ; }
#tag_israeli:before { content: "🇮🇱" ; }
#tag_italian:before { content: "🇮🇹" ; }
#tag_japanese:before { content: "🇯🇵" ; }
#tag_keto:before { content: "🥑" ; }
#tag_high-protein:before { content: "💪" ; }
#tag_lebanese:before { content: "🇱🇧" ; }
#tag_lemons:before { content: "🍋" ;}
#tag_liquor:before { content: "🥃" ;}
#tag_lunch:before { content: "🍱" ; }
#tag_mediterranean:before { content: "🫒" ; }
#tag_mexican:before { content: "🇲🇽" ; }
#tag_milk:before { content: "🥛" ; }
#tag_mushrooms:before { content: "🍄" ;}
#tag_pancake:before { content: "🥞" ; }
#tag_pasta:before { content: "🍝" ;}
#tag_pastry:before { content: "🧁" ;}
#tag_peruvian:before { content: "🇵🇪" ;}
#tag_pie:before { content: "🥧" ;}
#tag_pizza:before { content: "🍕" ; }
#tag_polish:before { content: "🇵🇱" ;}
#tag_pork:before { content: "🐖" ;}
#tag_portuguese:before { content: "🇵🇹" ;}
#tag_potato:before { content: "🥔" ; }
#tag_quebec:before { content: "⚜️" ; }
#tag_quick:before { content: "🏃" ; }
#tag_raw:before { content: "🍖" ;}
#tag_rice:before { content: "🍚" ; }
#tag_russian:before { content: "🇷🇺" ;}
#tag_salad:before { content: "🥗" ;}
#tag_sandwich:before { content: "🥪" ;}
#tag_seafood:before { content: "🦐" ; }
#tag_soup:before { content: "🍜" ;}
#tag_sourdough:before { content: "🥖" ;}
#tag_southwest:before { content: "🤠" ; }
#tag_spanish:before { content: "🇪🇸" ; }
#tag_spice:before { content: "🧂" ; }
#tag_spicy:before { content: "🌶️" ; }
#tag_spread:before { content: "🧈" ; }
#tag_steak:before { content: "🥩" ; }
#tag_stew:before { content: "🍲" ; }
#tag_sugar-free:before { content: "🍬" ; }
#tag_swedish:before { content: "🇸🇪" ; }
#tag_sweet:before { content: "🍯" ; }
#tag_swiss:before { content: "🇨🇭" ; }
#tag_thai:before { content: "🇹🇭" ;}
#tag_tomato:before { content: "🍅" ;}
#tag_tunisian:before { content: "🇹🇳" ; }
#tag_turkey:before { content: "🦃" ; }
#tag_turkish:before { content: "🇹🇷" ; }
#tag_ukrainian:before { content: "🇺🇦" ; }
#tag_vegan:before { content: "🌱" ; }
#tag_vietnamese:before { content: "🇻🇳" ; }
#tag_wine:before { content: "🍷" ; }

#tag_almond:before { content: "🌰" ; }
#tag_beets:before { content: "🍠" ; }
#tag_chili:before { content: "🍲" ; }
#tag_historical:before { content: "📜" ; }
#tag_medieval:before { content: "🏰" ; }
#tag_porridge:before { content: "🥣" ; }
#tag_roman:before { content: "🏛️" ; }
#tag_slow:before { content: "🐌" ; }
#tag_vegetables:before { content: "🥕" ; }
#tag_wheat:before { content: "🌾" ; }

#tag_baked:before { content: "🥐" ; }
#tag_baltic:before { content: "🌊" ; }
#tag_bariatric:before { content: "⚖️" ; }
#tag_basic:before { content: "🥄" ; }
#tag_cabbage:before { content: "🥬" ; }
#tag_cajun:before { content: "🦞" ; }
#tag_cheesefare:before { content: "🥞" ; }
#tag_coconut:before { content: "🥥" ; }
#tag_coffee:before { content: "☕" ; }
#tag_cornmeal:before { content: "🌽" ; }
#tag_cream:before { content: "🍦" ; }
#tag_custard:before { content: "🍮" ; }
#tag_danish:before { content: "🇩🇰" ; }
#tag_dehydrated:before { content: "☀️" ; }
#tag_digestivo:before { content: "🥂" ; }
#tag_dough:before { content: "🫓" ; }
#tag_dressing:before { content: "🫙" ; }
#tag_easy:before { content: "👌" ; }
#tag_feta:before { content: "🧀" ; }
#tag_finnish:before { content: "🇫🇮" ; }
#tag_fry:before { content: "🍳" ; }
#tag_galician:before { content: "🐚" ; }
#tag_garlic:before { content: "🧄" ; }
#tag_ham:before { content: "🍖" ; }
#tag_herbs:before { content: "🌿" ; }
#tag_hungarian:before { content: "🇭🇺" ; }
#tag_jam:before { content: "🍓" ; }
#tag_lamb:before { content: "🐑" ; }
#tag_lentil:before { content: "🫘" ; }
#tag_lithuanian:before { content: "🇱🇹" ; }
#tag_liver:before { content: "🍖" ; }
#tag_meat:before { content: "🍖" ; }
#tag_middle-eastern:before { content: "🧆" ; }
#tag_mutton:before { content: "🐏" ; }
#tag_new-zealand:before { content: "🇳🇿" ; }
#tag_no-cook:before { content: "❄️" ; }
#tag_noodles:before { content: "🍜" ; }
#tag_oats:before { content: "🥣" ; }
#tag_oven:before { content: "🔥" ; }
#tag_palestinian:before { content: "🇵🇸" ; }
#tag_pate:before { content: "🍖" ; }
#tag_peanut-butter:before { content: "🥜" ; }
#tag_pears:before { content: "🍐" ; }
#tag_peppers:before { content: "🫑" ; }
#tag_pesto:before { content: "🍃" ; }
#tag_pub:before { content: "🍺" ; }
#tag_pumpkin:before { content: "🎃" ; }
#tag_quinoa:before { content: "🌾" ; }
#tag_rabbit:before { content: "🐇" ; }
#tag_roast:before { content: "🍗" ; }
#tag_romanian:before { content: "🇷🇴" ; }
#tag_sauce:before { content: "🫙" ; }
#tag_sausage:before { content: "🌭" ; }
#tag_shrimp:before { content: "🍤" ; }
#tag_side:before { content: "🍽️" ; }
#tag_snack:before { content: "🍿" ; }
#tag_southern:before { content: "🍑" ; }
#tag_spinach:before { content: "🥬" ; }
#tag_squash:before { content: "🎃" ; }
#tag_stock:before { content: "🍵" ; }
#tag_supper:before { content: "🌙" ; }
#tag_syrup:before { content: "🍯" ; }
#tag_tofu:before { content: "🥡" ; }
#tag_tortilla:before { content: "🌮" ; }
#tag_traditional:before { content: "🏺" ; }
#tag_traybake:before { content: "🥘" ; }
#tag_tuna:before { content: "🐟" ; }
#tag_uzbek:before { content: "🇺🇿" ; }
#tag_veal:before { content: "🐮" ; }
#tag_vegetarian:before { content: "🥬" ; }
#tag_venezuelan:before { content: "🇻🇪" ; }
#tag_venison:before { content: "🦌" ; }
#tag_wholemeal:before { content: "🌾" ; }
#tag_yucatecan:before { content: "🇲🇽" ; }
#tag_zucchini:before { content: "🥒" ; }

.tags a:hover {
	background: var(--y);
	color: var(--bg);
	border-color: var(--y);
}

#artlist,
.recipes {
	columns: 15rem;
	column-gap: 2rem;
	padding: 0;
	list-style: none;
	margin: 0;
}

#artlist li,
.recipes li {
	break-inside: avoid;
	padding: .15rem 0;
	border-bottom: 1px dotted var(--line);
}

/* Full catalog stays out of the short homepage until a search is typed. */
#artlist.search-pool {
	display: none;
}

#artlist.search-pool.list-searched {
	display: block;
}

.list-searched {
	columns: 1 !important;
	max-width: 36rem;
}

.matched-recipe { font-size: 1.25rem; }

.hidden,
.js-only { display: none !important; }

.source {
	margin: 1.5rem 0;
	padding: .8rem 1rem;
	background: var(--bg2);
	border-left: 4px solid var(--y);
	font-size: .95rem;
}

.source b {
	font: 700 .75rem system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: .12em;
	margin-right: .4rem;
}

.cols { display: grid; gap: 0 3rem; }

.cols > * { min-width: 0; }

@media (min-width: 50rem) {
	.cols { grid-template-columns: 18rem 1fr; }
	.ing {
		position: sticky;
		top: 1rem;
		align-self: start;
	}
}

.ing ul {
	padding: 0;
	list-style: none;
	margin: 0;
}

.ing li {
	padding: .35rem 0;
	border-bottom: 1px dotted var(--line);
}

.dir > ol {
	padding: 0;
	margin: 0 0 1rem;
	list-style: none;
}

.dir > ol > li {
	position: relative;
	padding-left: 2.6rem;
	margin-bottom: 1rem;
}

.dir > ol > li:before {
	content: counter(list-item);
	position: absolute;
	left: 0;
	top: .1rem;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	background: var(--hot);
	color: var(--bg);
	font: 700 .9rem/1.8rem system-ui, sans-serif;
	text-align: center;
}

.recipe > ul:not(.tags) { padding-left: 1.2rem; }

img,
video,
iframe {
	max-width: 100%;
	height: auto;
}

img {
	max-height: 26rem;
	margin: 1rem 0;
}

code {
	overflow-wrap: break-word;
	background: var(--bg2);
	padding: 0 .2em;
}

pre {
	overflow: auto;
	background: var(--bg2);
	padding: .8rem 1rem;
}

.np {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font: 600 .9rem system-ui, sans-serif;
	border-top: 3px double var(--line);
	padding-top: 1rem;
	margin-top: .5rem;
}

footer {
	margin-top: 3rem;
	padding-top: 1rem;
	padding-bottom: 2rem;
	color: var(--mute);
	font-size: .85rem;
	border-top: 3px double var(--line);
}

@media print {
	.top,
	.tags,
	.np,
	footer,
	.search { display: none; }
	body { background: #fff; color: #000; }
	.ing { position: static; }
	.cols { display: block; }
}