html { scroll-padding: 10px; }
body { display: flex; flex-wrap: wrap; overflow-Y:scroll; }
.banner { background: #23332a url(img/bg/vine.png); flex: 1; height: 100vh; position: sticky; top:0; }
main { flex: 1.65; padding: 0 max(2.5vw,1rem) max(1.5vw,1rem) max(2.5vw,1rem); min-width: 360px; background: #eee;  }
header {  margin: 0; border-bottom: 2px dotted; background: #eee; padding: 2px 0 0 0; position: relative; z-index: 2;  }
h1 { margin: calc(1vw + 2rem) 0 1rem 0; }
p, li, .flex { max-width: 70rem; }
sup { line-height: 0; }
u { color: teal; text-decoration: underline; text-underline-offset: 2px; }

.flex {	display: flex; flex-wrap: wrap; gap: 10px; margin: 1rem 0; }
.flex:has(.rss) { gap: 0 2rem; }

.flex.linky > div, .flex.linky > a { flex: 1 1 20%; padding: 10px; text-align: center; }
.flex.linky h2, .flex.linky p { margin: 10px; line-height: 1;  text-align: center; }
.flex.linky p { font-size: 90%; color: black; display: inline-block; margin-top: 0; }
.flex.linky a:hover p, .flex.linky a:focus p { color: inherit; }
.flex.linky a:has(img) p { margin: 6px auto; }

.rss { flex: 2.5; min-width: 250px; }
.rss > h2, .rss >  p { display: inline-block; margin-right: 10px; }
#news { max-height: 50vh; overflow: auto; }

.col { flex: 1; min-width: 200px; }
.col dl { margin-bottom: 2rem; }
.col h2 + p { margin-top: -0.5rem; }


.map ul { position: relative; list-style-type: none; margin: 0 0 10px 0; padding-right: 0; }
.map ul ul { margin:  0 0 7px -5px; padding-right: 0; }
.map li { position: relative; padding: 0 0 0 25px; line-height: 1.4; }
.map li::before{
	content: " ";
	position: absolute;
	border-top: 2px solid silver;
	width: 30px;
	top: 10px;
	left: -10px;
}
.map li::after{
	content: " ";
	position: absolute;
	border-left: 2px solid silver;
	height: calc(100% + 10px);
	top: 0;
	left: -10px;
}
.map > ul > li { font-size: 125%; }
.map > ul > li::before { top: 12px; }
.map ul li:last-child::after { height: 12px; }

.grid { display: grid; grid-template-columns: min-content auto;	}
.grid li::marker, .grid h2 { color: teal; }
.grid h2, .grid li { font-size: 1rem; line-height: 1; }
.grid h2 { padding-top: 2px; }
.grid li { margin: 0 0 3px 0; }
.grid span { font-size: 80%; background: rgb(0,15,15,0.05); padding: 3px 3px 2px 3px; }

.left { float: left; margin-bottom: 9px; margin-right: 9px; }
.right { float: right; margin-bottom: 9px; margin-right: 9px; }

.ribo {	float:right; margin-left:1rem; max-width:25%; }

@media (min-width:1170px) {
	header { position:sticky; top: 0; }
	html{ scroll-padding: 5rem; }
}

@media (max-width:1146px) {
	.flex.linky > div,  .flex.linky > a { flex: 1 1 48%; }
	.rss > h2, .rss >  p { display: block; margin-right: 0; }
	.rss >  p { text-align: center; }
}

@media screen and (max-width:904px) {
	.flex.linky { gap: 5px; }
}

@media(max-width:600px) {
	.grid li { font-size: 0.9rem; }
	.grid ul { padding-left: 10px; }
	.grid h2 { font-size: 0.75rem; line-height: 1rem; padding-top: 1px; }
}

@media (max-width:540px) {
	.narrow { display: block; }
	.flex.linky > div, .flex.linky a { padding: 5px; font-size: 90%; }
	.flex.linky a:has(img) p:last-child { display: none; }
	#news.border { padding: 5px 18px; }
	.map li { padding: 0 0 0 10px; }
	.map li::before { width: 15px; }
}

@media (max-width:360px) {
	.banner { display: none; }
	main { min-width: 100%; }
}

@media (prefers-color-scheme:dark) {
	main, header { background: url('microscopy/bg.png'); }
	.grid li::marker, .grid h2 { color: teal; }
	.ribo { filter: invert(0.9); }
	.grid span { background: rgb(0,10,10,0.5); }
	.grid li::marker, .grid h2 { color: cadetblue; }
	.flex.linky p { color: #eee; }
	u { color: #b2d7c1; }
}

@media print {
	.banner { display: none; }
}