* { 
	box-sizing: border-box;
	scroll-padding: 2rem;
}

:root {
	--hover: honeydew;
	--select: yellowgreen;
}

body {
	margin: 0;
	padding: 0;
	color: black;
	background: white;
	font-family: 'MS PGothic', sans-serif;
}

h1, h2 { text-align: center; margin: 1rem; font-size: 2rem; }
	p { margin: 1rem; }
	img { max-width: 100%; border-radius: 10%; }
	.clade img.border { outline: 1px solid black; outline-offset: -1px; }
	.gallery img.border { outline: 4px solid black; outline-offset: -4px; }
	.info img.border { outline: 6px solid black; outline-offset: -6px; }
	
.layout { 
	display: grid;
	grid-template-areas: "clade gallery info";
	grid-template-columns: 1fr 2fr 1fr;
}
.layout > div { max-height: 100dvh; overflow-Y: scroll; scrollbar-width: thin; margin: 0; padding: 1rem; }

.gallery { display: flex; flex-wrap: wrap; justify-content: center; align-content: start; grid-area: gallery; gap: 0.25vw; }
.gallery img { width: 200px; aspect-ratio: 1 / 1; }
.gallery a { max-width: calc(20% - 0.25vw); line-height: 0; padding: 4px; }

.clade { grid-area: clade; }
.clade > table.clade { margin: 1rem auto; }
.info { grid-area: info; }

.info article {
	display: none;
}
.info article:target {
	display: block;
}
article img:has(+ h2) { display: block; width: 95%; margin: 1rem auto; }

a:has(img) { display: inline-block; text-decoration: none; border-style: solid; border-color: white; color: black; }
.clade a:has(img) { border-radius: 4px; border-width: 2px; margin: 1px 2px; }
.gallery a:has(img) { border-radius: 12%; border-width: 4px; }

body:has(.anthocerotophyta:hover) .anthocerotophyta, body:has(.anthocerotophyta:focus) .anthocerotophyta, 
body:has(.bryophyta:hover) .bryophyta, body:has(.bryophyta:focus) .bryophyta, 
body:has(.marchantiophyta:hover) .marchantiophyta, body:has(.marchantiophyta:focus) .marchantiophyta, 
body:has(.lycopodiales:hover) .lycopodiales, body:has(.lycopodiales:focus) .lycopodiales, 
body:has(.selaginellales:hover) .selaginellales, body:has(.selaginellales:focus) .selaginellales, 
body:has(.isoetales:hover) .isoetales, body:has(.isoetales:focus) .isoetales, 
body:has(.equisetales:hover) .equisetales, body:has(.equisetales:focus) .equisetales, 
body:has(.ophioglossales:hover) .ophioglossales, body:has(.ophioglossales:focus) .ophioglossales, 
body:has(.psilotales:hover) .psilotales, body:has(.psilotales:focus) .psilotales, 
body:has(.marattiales:hover) .marattiales, body:has(.marattiales:focus) .marattiales, 
body:has(.osmundales:hover) .osmundales, body:has(.osmundales:focus) .osmundales, 
body:has(.hymenophyllales:hover) .hymenophyllales, body:has(.hymenophyllales:focus) .hymenophyllales, 
body:has(.gleicheniales:hover) .gleicheniales, body:has(.gleicheniales:focus) .gleicheniales, 
body:has(.schizaeales:hover) .schizaeales, body:has(.schizaeales:focus) .schizaeales, 
body:has(.salviniales:hover) .salviniales, body:has(.salviniales:focus) .salviniales, 
body:has(.cyatheales:hover) .cyatheales, body:has(.cyatheales:focus) .cyatheales, 
body:has(.polypodiales:hover) .polypodiales, body:has(.polypodiales:focus) .polypodiales, 
body:has(.ginkgoales:hover) .ginkgoales, body:has(.ginkgoales:focus) .ginkgoales, 
body:has(.cycadales:hover) .cycadales, body:has(.cycadales:focus) .cycadales, 
body:has(.ephedraceae:hover) .ephedraceae, body:has(.ephedraceae:focus) .ephedraceae, 
body:has(.gnetaceae:hover) .gnetaceae, body:has(.gnetaceae:focus) .gnetaceae, 
body:has(.welwitschiaceae:hover) .welwitschiaceae, body:has(.welwitschiaceae:focus) .welwitschiaceae, 
body:has(.pinales:hover) .pinales, body:has(.pinales:focus) .pinales, 
body:has(.araucariaceae:hover) .araucariaceae, body:has(.araucariaceae:focus) .araucariaceae, 
body:has(.podocarpaceae:hover) .podocarpaceae, body:has(.podocarpaceae:focus) .podocarpaceae, 
body:has(.sciadopityaceae:hover) .sciadopityaceae, body:has(.sciadopityaceae:focus) .sciadopityaceae, 
body:has(.taxaceae:hover) .taxaceae, body:has(.taxaceae:focus) .taxaceae, 
body:has(.cupressaceae:hover) .cupressaceae, body:has(.cupressaceae:focus) .cupressaceae, 
body:has(.amborellales:hover) .amborellales, body:has(.amborellales:focus) .amborellales, 
body:has(.nymphaeales:hover) .nymphaeales, body:has(.nymphaeales:focus) .nymphaeales, 
body:has(.austrobaileyales:hover) .austrobaileyales, body:has(.austrobaileyales:focus) .austrobaileyales, 
body:has(.chloranthales:hover) .chloranthales, body:has(.chloranthales:focus) .chloranthales, 
body:has(.canellales:hover) .canellales, body:has(.canellales:focus) .canellales, 
body:has(.piperales:hover) .piperales, body:has(.piperales:focus) .piperales, 
body:has(.laurales:hover) .laurales, body:has(.laurales:focus) .laurales, 
body:has(.magnoliales:hover) .magnoliales, body:has(.magnoliales:focus) .magnoliales, 
body:has(.acorales:hover) .acorales, body:has(.acorales:focus) .acorales, 
body:has(.alismatales:hover) .alismatales, body:has(.alismatales:focus) .alismatales, 
body:has(.petrosaviales:hover) .petrosaviales, body:has(.petrosaviales:focus) .petrosaviales, 
body:has(.dioscoreales:hover) .dioscoreales, body:has(.dioscoreales:focus) .dioscoreales, 
body:has(.pandanales:hover) .pandanales, body:has(.pandanales:focus) .pandanales, 
body:has(.liliales:hover) .liliales, body:has(.liliales:focus) .liliales, 
body:has(.asparagales:hover) .asparagales, body:has(.asparagales:focus) .asparagales, 
body:has(.poales:hover) .poales, body:has(.poales:focus) .poales, 
body:has(.arecales:hover) .arecales, body:has(.arecales:focus) .arecales, 
body:has(.zingiberales:hover) .zingiberales, body:has(.zingiberales:focus) .zingiberales, 
body:has(.commelinales:hover) .commelinales, body:has(.commelinales:focus) .commelinales, 
body:has(.ceratophyllales:hover) .ceratophyllales, body:has(.ceratophyllales:focus) .ceratophyllales, 
body:has(.ranunculales:hover) .ranunculales, body:has(.ranunculales:focus) .ranunculales, 
body:has(.proteales:hover) .proteales, body:has(.proteales:focus) .proteales, 
body:has(.trochodendrales:hover) .trochodendrales, body:has(.trochodendrales:focus) .trochodendrales, 
body:has(.buxales:hover) .buxales, body:has(.buxales:focus) .buxales, 
body:has(.gunnerales:hover) .gunnerales, body:has(.gunnerales:focus) .gunnerales, 
body:has(.dilleniales:hover) .dilleniales, body:has(.dilleniales:focus) .dilleniales, 
body:has(.saxifragales:hover) .saxifragales, body:has(.saxifragales:focus) .saxifragales, 
body:has(.vitales:hover) .vitales, body:has(.vitales:focus) .vitales, 
body:has(.zygophyllales:hover) .zygophyllales, body:has(.zygophyllales:focus) .zygophyllales, 
body:has(.celastrales:hover) .celastrales, body:has(.celastrales:focus) .celastrales, 
body:has(.malpighiales:hover) .malpighiales, body:has(.malpighiales:focus) .malpighiales, 
body:has(.oxalidales:hover) .oxalidales, body:has(.oxalidales:focus) .oxalidales, 
body:has(.fabales:hover) .fabales, body:has(.fabales:focus) .fabales, 
body:has(.rosales:hover) .rosales, body:has(.rosales:focus) .rosales, 
body:has(.fagales:hover) .fagales, body:has(.fagales:focus) .fagales, 
body:has(.cucurbitales:hover) .cucurbitales, body:has(.cucurbitales:focus) .cucurbitales, 
body:has(.geraniales:hover) .geraniales, body:has(.geraniales:focus) .geraniales, 
body:has(.myrtales:hover) .myrtales, body:has(.myrtales:focus) .myrtales, 
body:has(.crossosomatales:hover) .crossosomatales, body:has(.crossosomatales:focus) .crossosomatales, 
body:has(.picramniales:hover) .picramniales, body:has(.picramniales:focus) .picramniales, 
body:has(.sapindales:hover) .sapindales, body:has(.sapindales:focus) .sapindales, 
body:has(.huerteales:hover) .huerteales, body:has(.huerteales:focus) .huerteales, 
body:has(.brassicales:hover) .brassicales, body:has(.brassicales:focus) .brassicales, 
body:has(.malvales:hover) .malvales, body:has(.malvales:focus) .malvales, 
body:has(.santalales:hover) .santalales, body:has(.santalales:focus) .santalales, 
body:has(.berberidopsidales:hover) .berberidopsidales, body:has(.berberidopsidales:focus) .berberidopsidales, 
body:has(.caryophyllales:hover) .caryophyllales, body:has(.caryophyllales:focus) .caryophyllales, 
body:has(.cornales:hover) .cornales, body:has(.cornales:focus) .cornales, 
body:has(.ericales:hover) .ericales, body:has(.ericales:focus) .ericales, 
body:has(.aquifoliales:hover) .aquifoliales, body:has(.aquifoliales:focus) .aquifoliales, 
body:has(.asterales:hover) .asterales, body:has(.asterales:focus) .asterales, 
body:has(.escalloniales:hover) .escalloniales, body:has(.escalloniales:focus) .escalloniales, 
body:has(.bruniales:hover) .bruniales, body:has(.bruniales:focus) .bruniales, 
body:has(.apiales:hover) .apiales, body:has(.apiales:focus) .apiales, 
body:has(.dipsacales:hover) .dipsacales, body:has(.dipsacales:focus) .dipsacales, 
body:has(.paracryphiales:hover) .paracryphiales, body:has(.paracryphiales:focus) .paracryphiales, 
body:has(.icacinales:hover) .icacinales, body:has(.icacinales:focus) .icacinales, 
body:has(.metteniusales:hover) .metteniusales, body:has(.metteniusales:focus) .metteniusales, 
body:has(.garryales:hover) .garryales, body:has(.garryales:focus) .garryales, 
body:has(.boraginales:hover) .boraginales, body:has(.boraginales:focus) .boraginales, 
body:has(.gentianales:hover) .gentianales, body:has(.gentianales:focus) .gentianales, 
body:has(.vahliales:hover) .vahliales, body:has(.vahliales:focus) .vahliales, 
body:has(.lamiales:hover) .lamiales, body:has(.lamiales:focus) .lamiales, 
body:has(.solanales:hover) .solanales, body:has(.solanales:focus) .solanales { color: black; background: var(--hover); border-color: var(--select); }

body:has(#anthocerotophyta:target) .anthocerotophyta, 
body:has(#bryophyta:target) .bryophyta, 
body:has(#marchantiophyta:target) .marchantiophyta, 
body:has(#lycopodiales:target) .lycopodiales, 
body:has(#selaginellales:target) .selaginellales, 
body:has(#isoetales:target) .isoetales, 
body:has(#equisetales:target) .equisetales, 
body:has(#ophioglossales:target) .ophioglossales, 
body:has(#psilotales:target) .psilotales, 
body:has(#marattiales:target) .marattiales, 
body:has(#osmundales:target) .osmundales, 
body:has(#hymenophyllales:target) .hymenophyllales, 
body:has(#gleicheniales:target) .gleicheniales, 
body:has(#schizaeales:target) .schizaeales, 
body:has(#salviniales:target) .salviniales, 
body:has(#cyatheales:target) .cyatheales, 
body:has(#polypodiales:target) .polypodiales, 
body:has(#ginkgoales:target) .ginkgoales, 
body:has(#cycadales:target) .cycadales, 
body:has(#ephedraceae:target) .ephedraceae, 
body:has(#gnetaceae:target) .gnetaceae, 
body:has(#welwitschiaceae:target) .welwitschiaceae, 
body:has(#pinales:target) .pinales, 
body:has(#araucariaceae:target) .araucariaceae, 
body:has(#podocarpaceae:target) .podocarpaceae, 
body:has(#sciadopityaceae:target) .sciadopityaceae, 
body:has(#taxaceae:target) .taxaceae, 
body:has(#cupressaceae:target) .cupressaceae, 
body:has(#amborellales:target) .amborellales, 
body:has(#nymphaeales:target) .nymphaeales, 
body:has(#austrobaileyales:target) .austrobaileyales, 
body:has(#chloranthales:target) .chloranthales, 
body:has(#canellales:target) .canellales, 
body:has(#piperales:target) .piperales, 
body:has(#laurales:target) .laurales, 
body:has(#magnoliales:target) .magnoliales, 
body:has(#acorales:target) .acorales, 
body:has(#alismatales:target) .alismatales, 
body:has(#petrosaviales:target) .petrosaviales, 
body:has(#dioscoreales:target) .dioscoreales, 
body:has(#pandanales:target) .pandanales, 
body:has(#liliales:target) .liliales, 
body:has(#asparagales:target) .asparagales, 
body:has(#poales:target) .poales, 
body:has(#arecales:target) .arecales, 
body:has(#zingiberales:target) .zingiberales, 
body:has(#commelinales:target) .commelinales, 
body:has(#ceratophyllales:target) .ceratophyllales, 
body:has(#ranunculales:target) .ranunculales, 
body:has(#proteales:target) .proteales, 
body:has(#trochodendrales:target) .trochodendrales, 
body:has(#buxales:target) .buxales, 
body:has(#gunnerales:target) .gunnerales, 
body:has(#dilleniales:target) .dilleniales, 
body:has(#saxifragales:target) .saxifragales, 
body:has(#vitales:target) .vitales, 
body:has(#zygophyllales:target) .zygophyllales, 
body:has(#celastrales:target) .celastrales, 
body:has(#malpighiales:target) .malpighiales, 
body:has(#oxalidales:target) .oxalidales, 
body:has(#fabales:target) .fabales, 
body:has(#rosales:target) .rosales, 
body:has(#fagales:target) .fagales, 
body:has(#cucurbitales:target) .cucurbitales, 
body:has(#geraniales:target) .geraniales, 
body:has(#myrtales:target) .myrtales, 
body:has(#crossosomatales:target) .crossosomatales, 
body:has(#picramniales:target) .picramniales, 
body:has(#sapindales:target) .sapindales, 
body:has(#huerteales:target) .huerteales, 
body:has(#brassicales:target) .brassicales, 
body:has(#malvales:target) .malvales, 
body:has(#santalales:target) .santalales, 
body:has(#berberidopsidales:target) .berberidopsidales, 
body:has(#caryophyllales:target) .caryophyllales, 
body:has(#cornales:target) .cornales, 
body:has(#ericales:target) .ericales, 
body:has(#aquifoliales:target) .aquifoliales, 
body:has(#asterales:target) .asterales, 
body:has(#escalloniales:target) .escalloniales, 
body:has(#bruniales:target) .bruniales, 
body:has(#apiales:target) .apiales, 
body:has(#dipsacales:target) .dipsacales, 
body:has(#paracryphiales:target) .paracryphiales, 
body:has(#icacinales:target) .icacinales, 
body:has(#metteniusales:target) .metteniusales, 
body:has(#garryales:target) .garryales, 
body:has(#boraginales:target) .boraginales, 
body:has(#gentianales:target) .gentianales, 
body:has(#vahliales:target) .vahliales, 
body:has(#lamiales:target) .lamiales, 
body:has(#solanales:target) .solanales { color: black;background: var(--select); border-color: var(--select); }

body:has(.anthocerotophyta:hover) .anthocerotophyta img, body:has(.anthocerotophyta:focus) .anthocerotophyta img,  body:has(#anthocerotophyta:target) .anthocerotophyta img,
body:has(.bryophyta:hover) .bryophyta img, body:has(.bryophyta:focus) .bryophyta img,  body:has(#bryophyta:target) .bryophyta img,
body:has(.marchantiophyta:hover) .marchantiophyta img, body:has(.marchantiophyta:focus) .marchantiophyta img,  body:has(#marchantiophyta:target) .marchantiophyta img,
body:has(.lycopodiales:hover) .lycopodiales img, body:has(.lycopodiales:focus) .lycopodiales img,  body:has(#lycopodiales:target) .lycopodiales img,
body:has(.selaginellales:hover) .selaginellales img, body:has(.selaginellales:focus) .selaginellales img,  body:has(#selaginellales:target) .selaginellales img,
body:has(.isoetales:hover) .isoetales img, body:has(.isoetales:focus) .isoetales img,  body:has(#isoetales:target) .isoetales img,
body:has(.equisetales:hover) .equisetales img, body:has(.equisetales:focus) .equisetales img,  body:has(#equisetales:target) .equisetales img,
body:has(.ophioglossales:hover) .ophioglossales img, body:has(.ophioglossales:focus) .ophioglossales img,  body:has(#ophioglossales:target) .ophioglossales img,
body:has(.psilotales:hover) .psilotales img, body:has(.psilotales:focus) .psilotales img,  body:has(#psilotales:target) .psilotales img,
body:has(.marattiales:hover) .marattiales img, body:has(.marattiales:focus) .marattiales img,  body:has(#marattiales:target) .marattiales img,
body:has(.osmundales:hover) .osmundales img, body:has(.osmundales:focus) .osmundales img,  body:has(#osmundales:target) .osmundales img,
body:has(.hymenophyllales:hover) .hymenophyllales img, body:has(.hymenophyllales:focus) .hymenophyllales img,  body:has(#hymenophyllales:target) .hymenophyllales img,
body:has(.gleicheniales:hover) .gleicheniales img, body:has(.gleicheniales:focus) .gleicheniales img,  body:has(#gleicheniales:target) .gleicheniales img,
body:has(.schizaeales:hover) .schizaeales img, body:has(.schizaeales:focus) .schizaeales img,  body:has(#schizaeales:target) .schizaeales img,
body:has(.salviniales:hover) .salviniales img, body:has(.salviniales:focus) .salviniales img,  body:has(#salviniales:target) .salviniales img,
body:has(.cyatheales:hover) .cyatheales img, body:has(.cyatheales:focus) .cyatheales img,  body:has(#cyatheales:target) .cyatheales img,
body:has(.polypodiales:hover) .polypodiales img, body:has(.polypodiales:focus) .polypodiales img,  body:has(#polypodiales:target) .polypodiales img,
body:has(.ginkgoales:hover) .ginkgoales img, body:has(.ginkgoales:focus) .ginkgoales img,  body:has(#ginkgoales:target) .ginkgoales img,
body:has(.cycadales:hover) .cycadales img, body:has(.cycadales:focus) .cycadales img,  body:has(#cycadales:target) .cycadales img,
body:has(.ephedraceae:hover) .ephedraceae img, body:has(.ephedraceae:focus) .ephedraceae img,  body:has(#ephedraceae:target) .ephedraceae img,
body:has(.gnetaceae:hover) .gnetaceae img, body:has(.gnetaceae:focus) .gnetaceae img,  body:has(#gnetaceae:target) .gnetaceae img,
body:has(.welwitschiaceae:hover) .welwitschiaceae img, body:has(.welwitschiaceae:focus) .welwitschiaceae img,  body:has(#welwitschiaceae:target) .welwitschiaceae img,
body:has(.pinales:hover) .pinales img, body:has(.pinales:focus) .pinales img,  body:has(#pinales:target) .pinales img,
body:has(.araucariaceae:hover) .araucariaceae img, body:has(.araucariaceae:focus) .araucariaceae img,  body:has(#araucariaceae:target) .araucariaceae img,
body:has(.podocarpaceae:hover) .podocarpaceae img, body:has(.podocarpaceae:focus) .podocarpaceae img,  body:has(#podocarpaceae:target) .podocarpaceae img,
body:has(.sciadopityaceae:hover) .sciadopityaceae img, body:has(.sciadopityaceae:focus) .sciadopityaceae img,  body:has(#sciadopityaceae:target) .sciadopityaceae img,
body:has(.taxaceae:hover) .taxaceae img, body:has(.taxaceae:focus) .taxaceae img,  body:has(#taxaceae:target) .taxaceae img,
body:has(.cupressaceae:hover) .cupressaceae img, body:has(.cupressaceae:focus) .cupressaceae img,  body:has(#cupressaceae:target) .cupressaceae img,
body:has(.amborellales:hover) .amborellales img, body:has(.amborellales:focus) .amborellales img,  body:has(#amborellales:target) .amborellales img,
body:has(.nymphaeales:hover) .nymphaeales img, body:has(.nymphaeales:focus) .nymphaeales img,  body:has(#nymphaeales:target) .nymphaeales img,
body:has(.austrobaileyales:hover) .austrobaileyales img, body:has(.austrobaileyales:focus) .austrobaileyales img,  body:has(#austrobaileyales:target) .austrobaileyales img,
body:has(.chloranthales:hover) .chloranthales img, body:has(.chloranthales:focus) .chloranthales img,  body:has(#chloranthales:target) .chloranthales img,
body:has(.canellales:hover) .canellales img, body:has(.canellales:focus) .canellales img,  body:has(#canellales:target) .canellales img,
body:has(.piperales:hover) .piperales img, body:has(.piperales:focus) .piperales img,  body:has(#piperales:target) .piperales img,
body:has(.laurales:hover) .laurales img, body:has(.laurales:focus) .laurales img,  body:has(#laurales:target) .laurales img,
body:has(.magnoliales:hover) .magnoliales img, body:has(.magnoliales:focus) .magnoliales img,  body:has(#magnoliales:target) .magnoliales img,
body:has(.acorales:hover) .acorales img, body:has(.acorales:focus) .acorales img,  body:has(#acorales:target) .acorales img,
body:has(.alismatales:hover) .alismatales img, body:has(.alismatales:focus) .alismatales img,  body:has(#alismatales:target) .alismatales img,
body:has(.petrosaviales:hover) .petrosaviales img, body:has(.petrosaviales:focus) .petrosaviales img,  body:has(#petrosaviales:target) .petrosaviales img,
body:has(.dioscoreales:hover) .dioscoreales img, body:has(.dioscoreales:focus) .dioscoreales img,  body:has(#dioscoreales:target) .dioscoreales img,
body:has(.pandanales:hover) .pandanales img, body:has(.pandanales:focus) .pandanales img,  body:has(#pandanales:target) .pandanales img,
body:has(.liliales:hover) .liliales img, body:has(.liliales:focus) .liliales img,  body:has(#liliales:target) .liliales img,
body:has(.asparagales:hover) .asparagales img, body:has(.asparagales:focus) .asparagales img,  body:has(#asparagales:target) .asparagales img,
body:has(.poales:hover) .poales img, body:has(.poales:focus) .poales img,  body:has(#poales:target) .poales img,
body:has(.arecales:hover) .arecales img, body:has(.arecales:focus) .arecales img,  body:has(#arecales:target) .arecales img,
body:has(.zingiberales:hover) .zingiberales img, body:has(.zingiberales:focus) .zingiberales img,  body:has(#zingiberales:target) .zingiberales img,
body:has(.commelinales:hover) .commelinales img, body:has(.commelinales:focus) .commelinales img,  body:has(#commelinales:target) .commelinales img,
body:has(.ceratophyllales:hover) .ceratophyllales img, body:has(.ceratophyllales:focus) .ceratophyllales img,  body:has(#ceratophyllales:target) .ceratophyllales img,
body:has(.ranunculales:hover) .ranunculales img, body:has(.ranunculales:focus) .ranunculales img,  body:has(#ranunculales:target) .ranunculales img,
body:has(.proteales:hover) .proteales img, body:has(.proteales:focus) .proteales img,  body:has(#proteales:target) .proteales img,
body:has(.trochodendrales:hover) .trochodendrales img, body:has(.trochodendrales:focus) .trochodendrales img,  body:has(#trochodendrales:target) .trochodendrales img,
body:has(.buxales:hover) .buxales img, body:has(.buxales:focus) .buxales img,  body:has(#buxales:target) .buxales img,
body:has(.gunnerales:hover) .gunnerales img, body:has(.gunnerales:focus) .gunnerales img,  body:has(#gunnerales:target) .gunnerales img,
body:has(.dilleniales:hover) .dilleniales img, body:has(.dilleniales:focus) .dilleniales img,  body:has(#dilleniales:target) .dilleniales img,
body:has(.saxifragales:hover) .saxifragales img, body:has(.saxifragales:focus) .saxifragales img,  body:has(#saxifragales:target) .saxifragales img,
body:has(.vitales:hover) .vitales img, body:has(.vitales:focus) .vitales img,  body:has(#vitales:target) .vitales img,
body:has(.zygophyllales:hover) .zygophyllales img, body:has(.zygophyllales:focus) .zygophyllales img,  body:has(#zygophyllales:target) .zygophyllales img,
body:has(.celastrales:hover) .celastrales img, body:has(.celastrales:focus) .celastrales img,  body:has(#celastrales:target) .celastrales img,
body:has(.malpighiales:hover) .malpighiales img, body:has(.malpighiales:focus) .malpighiales img,  body:has(#malpighiales:target) .malpighiales img,
body:has(.oxalidales:hover) .oxalidales img, body:has(.oxalidales:focus) .oxalidales img,  body:has(#oxalidales:target) .oxalidales img,
body:has(.fabales:hover) .fabales img, body:has(.fabales:focus) .fabales img,  body:has(#fabales:target) .fabales img,
body:has(.rosales:hover) .rosales img, body:has(.rosales:focus) .rosales img,  body:has(#rosales:target) .rosales img,
body:has(.fagales:hover) .fagales img, body:has(.fagales:focus) .fagales img,  body:has(#fagales:target) .fagales img,
body:has(.cucurbitales:hover) .cucurbitales img, body:has(.cucurbitales:focus) .cucurbitales img,  body:has(#cucurbitales:target) .cucurbitales img,
body:has(.geraniales:hover) .geraniales img, body:has(.geraniales:focus) .geraniales img,  body:has(#geraniales:target) .geraniales img,
body:has(.myrtales:hover) .myrtales img, body:has(.myrtales:focus) .myrtales img,  body:has(#myrtales:target) .myrtales img,
body:has(.crossosomatales:hover) .crossosomatales img, body:has(.crossosomatales:focus) .crossosomatales img,  body:has(#crossosomatales:target) .crossosomatales img,
body:has(.picramniales:hover) .picramniales img, body:has(.picramniales:focus) .picramniales img,  body:has(#picramniales:target) .picramniales img,
body:has(.sapindales:hover) .sapindales img, body:has(.sapindales:focus) .sapindales img,  body:has(#sapindales:target) .sapindales img,
body:has(.huerteales:hover) .huerteales img, body:has(.huerteales:focus) .huerteales img,  body:has(#huerteales:target) .huerteales img,
body:has(.brassicales:hover) .brassicales img, body:has(.brassicales:focus) .brassicales img,  body:has(#brassicales:target) .brassicales img,
body:has(.malvales:hover) .malvales img, body:has(.malvales:focus) .malvales img,  body:has(#malvales:target) .malvales img,
body:has(.santalales:hover) .santalales img, body:has(.santalales:focus) .santalales img,  body:has(#santalales:target) .santalales img,
body:has(.berberidopsidales:hover) .berberidopsidales img, body:has(.berberidopsidales:focus) .berberidopsidales img,  body:has(#berberidopsidales:target) .berberidopsidales img,
body:has(.caryophyllales:hover) .caryophyllales img, body:has(.caryophyllales:focus) .caryophyllales img,  body:has(#caryophyllales:target) .caryophyllales img,
body:has(.cornales:hover) .cornales img, body:has(.cornales:focus) .cornales img,  body:has(#cornales:target) .cornales img,
body:has(.ericales:hover) .ericales img, body:has(.ericales:focus) .ericales img,  body:has(#ericales:target) .ericales img,
body:has(.aquifoliales:hover) .aquifoliales img, body:has(.aquifoliales:focus) .aquifoliales img,  body:has(#aquifoliales:target) .aquifoliales img,
body:has(.asterales:hover) .asterales img, body:has(.asterales:focus) .asterales img,  body:has(#asterales:target) .asterales img,
body:has(.escalloniales:hover) .escalloniales img, body:has(.escalloniales:focus) .escalloniales img,  body:has(#escalloniales:target) .escalloniales img,
body:has(.bruniales:hover) .bruniales img, body:has(.bruniales:focus) .bruniales img,  body:has(#bruniales:target) .bruniales img,
body:has(.apiales:hover) .apiales img, body:has(.apiales:focus) .apiales img,  body:has(#apiales:target) .apiales img,
body:has(.dipsacales:hover) .dipsacales img, body:has(.dipsacales:focus) .dipsacales img,  body:has(#dipsacales:target) .dipsacales img,
body:has(.paracryphiales:hover) .paracryphiales img, body:has(.paracryphiales:focus) .paracryphiales img,  body:has(#paracryphiales:target) .paracryphiales img,
body:has(.icacinales:hover) .icacinales img, body:has(.icacinales:focus) .icacinales img,  body:has(#icacinales:target) .icacinales img,
body:has(.metteniusales:hover) .metteniusales img, body:has(.metteniusales:focus) .metteniusales img,  body:has(#metteniusales:target) .metteniusales img,
body:has(.garryales:hover) .garryales img, body:has(.garryales:focus) .garryales img,  body:has(#garryales:target) .garryales img,
body:has(.boraginales:hover) .boraginales img, body:has(.boraginales:focus) .boraginales img,  body:has(#boraginales:target) .boraginales img,
body:has(.gentianales:hover) .gentianales img, body:has(.gentianales:focus) .gentianales img,  body:has(#gentianales:target) .gentianales img,
body:has(.vahliales:hover) .vahliales img, body:has(.vahliales:focus) .vahliales img,  body:has(#vahliales:target) .vahliales img,
body:has(.lamiales:hover) .lamiales img, body:has(.lamiales:focus) .lamiales img,  body:has(#lamiales:target) .lamiales img,
body:has(.solanales:hover) .solanales img, body:has(.solanales:focus) .solanales img,  body:has(#solanales:target) .solanales img { mix-blend-mode: multiply; }


td.clade-leaf img {	width: 25px; aspect-ratio: 1 / 1; }
td.clade-leaf p { margin: 0 4px; font-size: 75%; }


.clade fieldset { width: fit-content; margin: 0.5rem; border: 0px; padding: 0; position: absolute; bottom: 0; left: 0; }
.clade fieldset label { display: inline-block; padding: 5px 7px; background: white; border: 1px solid; border-radius: 4px; cursor: pointer; }
.clade fieldset label:hover, .clade fieldset label:focus { color: black; background: var(--hover); border: 1px solid var(--select); outline: 1px solid var(--select); }
.clade fieldset label:active { color: black; background: var(--select); }
.clade fieldset input { opacity: 0; position: absolute; }
.clade:has(#list-style:checked) table.clade td.clade-slabel { padding: 0.1em 0; }
.clade:has(#list-style:checked) table.clade td.clade-label { width: 0; min-width: 0; }
.clade:has(#list-style:checked) table.clade *:not(a) { border: 0px; }

/* animate the reverse, kinda wonky 
.clade:has(#list-style:checked) table.clade *:not(a) { animation: border 0.5s linear; animation-iteration-count: 1; animation-fill-mode: forwards; }
@keyframes border {
	0% { border-width: 1px; }
	99% { border-width: 1px; }
	100% { border: 0; }
}
*/



/* clade from wiki */

table.clade {
    border-spacing:0;
    margin:0 auto;
    font-size:100%;
    line-height:100%;
    border-collapse:separate;
    width:auto;
    display:table;
	line-height: 0.5;
}
table.clade table.clade {
    width:100%;
    line-height:inherit;
}

table.clade td.clade-label {  /* the cell with the label */
	min-width:0.1em; /* both min-width and width seem to be needed to get consistent behaviour */
	width:0.1em;
    padding:0;
    vertical-align:bottom;
    text-align:center;
    border-left:1px solid;   /* don't set default colour, helps with green on black monotype skin  */
    border-bottom:1px solid;
    white-space:nowrap;
	transition: width: 0.5s;
}
table.clade td.clade-label::before, table.clade td.clade-slabel::before {
	content: "\2060";
}
table.clade td.clade-label.first {
	border-left:none;
	border-right:none;
}
table.clade td.clade-slabel {  /* the cell with the sublabel; only use if there is a label */
    padding:0.1em 0.2em;
    vertical-align:top;
    text-align:center;
    border-left: 1px solid;
    white-space:nowrap;
	transition: padding 0.5s;
}
table.clade td.clade-slabel:hover {
	overflow:visible;
}
table.clade td.clade-slabel.last  {
	border-left:none;
	border-right:none;
}
table.clade td.clade-bar {  /* the cell with the bar label or group label */
    vertical-align:middle;
    text-align:left;
    padding:0;
    position:relative;
}
table.clade td.clade-leaf {  /* the cell with the leaf content (rowspan=2) */
    border:0;
    padding:0;
    text-align:left;
}
table.clade td.clade-leaf p, td.clade-leaf img {
	display: inline-block;
	vertical-align: middle;
}



/* tablet and mobile layouts */

@media (max-width:1000px) {
	.layout { 
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"clade info"
			"gallery gallery";
	}
	.layout .clade, .layout .info { max-height: 100dvh; }
	.layout .gallery { display: none; }
	.layout .gallery:target { display: flex; }
}

@media (max-width:600px) {
	html { scroll-behavior: smooth; }
	.layout { 
		grid-template-columns: 1fr;
		grid-template-areas:
			"info"
			"clade"
			"gallery";
	}
	.layout .clade, .layout .info, .layout .gallery { max-height: fit-content; }
	.layout .gallery { display: flex; gap: 5px; }
	.layout .gallery a { max-width: calc(20% - 5px); padding: 0; }
	.layout .gallery img.border { outline: 2px solid black; outline-offset: -2px; }
	.layout .info:not(:has(article:target)) { padding: 0; }
	
}


@media (prefers-color-scheme:dark) {
	body, .clade fieldset label { color: #fff; background: darkslategrey; }
	a:has(img) { color: #fff; border-color: darkslategrey; }
	img { mix-blend-mode: normal; }
	:root {
		--hover: honeydew;
		--select: #81ab2b;
	}
}