html, body {
	min-height: 100dvh;
	margin: 0;
	padding: 0;
}

html {
	font-size: 14px; /* font-size:100%; */ /* 1rem */
	-webkit-text-size-adjust: none;
	scrollbar-width: thin;
}

body {
	display: flex;
	font: 1rem 'Sligoil Micro', monospace;
	background-color:#000000;
	color: #f6f6f6;
}

/****************************/
/*
body {background: #f2f2f2 !important;}
em, i { background: yellow;}
*/
/****************************/

* {
	box-sizing: border-box;
}

.clearfix:after {
	content:"";
	display:block;
	clear:both;
}

.noselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.tacenter { text-align: center; }
.taleft { text-align: left; }
.taright { text-align: right; }

.mt4  { margin-top:4px; }
.mt10 { margin-top:10px; }
.mt20 { margin-top:20px; }
.mt30 { margin-top:30px; }
.mt40 { margin-top:40px; }
.mt50 { margin-top:50px; }
.mt120 { margin-top:120px; }

.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }

.p10 { padding: 10px; }
.p20 { padding: 20px; }
.p30 { padding: 30px; }
.p40 { padding: 40px; }

.vatop { vertical-align: top; }

.pb20 { padding-bottom: 20px; }
.pb50 { padding-bottom: 50px; }
.pb80 { padding-bottom: 80px; }
.pb100 { padding-bottom: 100px; }
.pb150 { padding-bottom: 150px; }
.pb200 { padding-bottom: 200px; }

.pre { white-space: pre; }
.prewrap { white-space: pre-wrap; }
.preline { white-space: pre-line; }

.imgw100 { width: 100%; }
.imgmw100 { max-width: 100%; }

.imgboxshdw { box-shadow: 0px 0px 20px #222222; }

.w206 { width: 206px; }

a, a:link, a:visited, a:active, a:hover { color: inherit; font-weight: inherit; text-decoration:none; }
a.clean, a.clean:link, a.clean:visited, a.clean:active, a.clean:hover { color: inherit; font-weight: inherit; text-decoration:none; }
.twf_footnotes a, .twf_footnotes a:link, .twf_footnotes a:visited, .twf_footnotes a:active, .twf_footnotes a:hover {
	border-bottom: 1px dashed;
	padding-bottom: 2px;
}

.dispib {
	display: inline-block;
}

ol.extra_margin_b li, ul.extra_margin_b li {
	margin-bottom: 1em;
}
ul.with_dash {
	list-style-type: "- ";
}

/* vars */
:root {
	--title-font-size: 36px;
	--title-line-height: 46px;
	--title-letter-spacing: -3.15px;

	--subtitle-font-size: 20px;
	--subtitle-line-height: 32px;
	--subtitle-letter-spacing: -1px;

	--content-font-size: 15px;
	--content-line-height: 25px;
	--content-letter-spacing: -1.05px;	

	--toolbar-button-height: 42px;
	--toolbar-button-font-size: 16px;
	--toolbar-button-line-height: 16px;

	--shape-font-size: 18px;
	--shape-line-height: 22px;
	--shape-letter-spacing: -1.44px;

	--stars-font-size: 14px;
	--stars-line-height: 12px;
	--stars-letter-spacing: -0.64px;

	--heading-font-size: 20px;
	--heading-line-height: 34px;
	--heading-letter-spacing: -1px;

	--wavy-text-decoration-thickness: 3px;
	--wavy-text-underline-offset: 4px;

	--contributor-bio-font-size: 10px;
	--contributor-bio-line-height: 15px;
}

@media (max-width: 768px) {
	:root {
		--title-font-size: 18px;
		--title-line-height: 23px;
		--title-letter-spacing: -2.15px;

		--subtitle-font-size: 12px;
		--subtitle-line-height: 16px;
		--subtitle-letter-spacing: -0.5px;

		--content-font-size: 12px;
		--content-line-height: 18px;
		--content-letter-spacing: -0.75px;	

		--toolbar-button-height: 36px;
		--toolbar-button-font-size: 14px;
		--toolbar-button-line-height: 16px;

		--shape-font-size: 16px;
		--shape-line-height: 20px;
		--shape-letter-spacing: -1.34px;

		--stars-font-size: 14px;
		--stars-line-height: 12px;
		--stars-letter-spacing: -0.64px;

		--heading-font-size: 20px;
		--heading-line-height: 34px;
		--heading-letter-spacing: -1px;

		--wavy-text-decoration-thickness: 3px;
		--wavy-text-underline-offset: 4px;

		--contributor-bio-font-size: 10px;
		--contributor-bio-line-height: 15px;

		.g_ellipse { width: 120px; height: 100px; border-radius: 80px; }
		.g_circle { width: 120px; height: 100px; border-radius: 80px; }
		.g_square { min-width: 120px; min-height: 120px; }
	    .g_shape_big { width: 160px; height: 100px; }
	}
}

@media (min-width: 1734px) {
	:root {
		--title-font-size: 53px;
		--title-line-height: 63px;
		--title-letter-spacing: -4.77px;

		--subtitle-font-size: 28px;
		--subtitle-line-height: 42px;
		--subtitle-letter-spacing: -1.96px;

		--content-font-size: 20px;
		--content-line-height: 38px;
		--content-letter-spacing: -0.8px;

		--toolbar-button-height: 48px;
		--toolbar-button-font-size: 21px;
		--toolbar-button-line-height: 22px;

		--shape-font-size: 20px;
		--shape-line-height: 24px;
		--shape-letter-spacing: -1.6px;	

		--heading-font-size: 30px;
		--heading-line-height: 38px;
		--heading-letter-spacing: -2.4px;

		--wavy-text-decoration-thickness: 3.5px;
		--wavy-text-underline-offset: 10px;

		--contributor-bio-font-size: 16px;
		--contributor-bio-line-height: 20px;
	}
}

/* app & body */

#app {
	flex: 1;
	display: flex;
}

body.home {
	overflow: hidden;
}
body.about {
	background: linear-gradient(180deg, #97D8E0 0%, #D9D9D9 25.48%, #79D7E4 100%);
}
body.roundtable {
	background: linear-gradient(180deg, #97D8E0 0%, #D9D9D9 25.48%, #79D7E4 100%);
}
body.contributors {
	background: linear-gradient(180deg, #FFF 0%, #00FF48 168.19%);
}

body.wetlands {
	background: linear-gradient(180deg, #FFF 0%, #00FF48 168.19%);
}
body.wetlands_glossary, body.wetlands_glossary_item {
	background: linear-gradient(180deg, #61FF8D 0.99%, #FFC4C4 53.51%, #61FF8D 66.05%, #B0E2A9 90.2%);
}
body.wetlands_readinglist {
	background: linear-gradient(180deg, #ABFFC3 0%, #FFE2E2 57.19%);
}

body.wetness, body.wetness_methodology {
	background: linear-gradient(180deg, #97D8E0 0%, #D9D9D9 25.48%, #79D7E4 100%);
}
body.wetness_cosmology {
	background: #2F467D url('../images/kumas.jpg') no-repeat;
	background-size: cover;
}
body.seasnotting {
	background: linear-gradient(180deg, #56532D 0%, #4B6945 9.43%, #427B58 10.9%, #427B58 17.49%, #2AAB8C 46.63%, #309E7D 72.12%, #56532D 100%);
}
body.seasnotting_occurences_item {
	background: linear-gradient(180deg, #56532D 0%, #4B6945 9.43%, #427B58 10.9%, #427B58 17.49%, #2AAB8C 46.63%, #309E7D 72.12%, #56532D 100%);
}
body.seasnotting_expeditions_item {
	background: linear-gradient(180deg, #56532D 0%, #4B6945 9.43%, #427B58 10.9%, #427B58 17.49%, #2AAB8C 46.63%, #309E7D 72.12%, #56532D 100%);
}
body.coastline {
	background: linear-gradient(180deg, #65B3FC 6.04%, #ACFFF7 32.7%, #418DFF 76.77%, #004CD0 100%);
}
body.coastline_atlas {
	background: linear-gradient(180deg, #65B3FC 6.04%, #ACFFF7 32.7%, #418DFF 76.77%, #004CD0 100%);
}
body.coastline_bibliography {
	background: linear-gradient(180deg, #65B3FC 6.04%, #ACFFF7 32.7%, #418DFF 76.77%, #004CD0 100%);
}
body.speculativefictions {
	background: linear-gradient(180deg, #50E09F 0%, #79D7E4 55.77%, #4EEAFF 100%);
}
body.speculativefictions_film {
	background: linear-gradient(179deg, #50E09E 0%, #79D7E4 55.77%, #4EEAFF 90%, #79D7E4 95%, #50E09F 100%);
}
body.speculativefictions_fabulations {
	background: linear-gradient(179deg, #50E09E 0%, #79D7E4 55.77%, #4EEAFF 90%, #79D7E4 95%, #50E09F 100%);
}
body.speculativefictions_fabulations_item {
	background: linear-gradient(180deg, #50E09F 0%, #79D7E4 55.77%, #4EEAFF 100%);
}

/* home */

.main {
	flex: 1;
	display: flex;
	flex-direction: column;
}
.header {
	position: sticky;
	top: 0px;
	left: 0px;
	right: 0px;
	z-index: 19;
}
.content {
	flex: 1;
	margin: 0 146px 80px 146px;
}
.footer {
	height: 42px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 16px;
}

.fader {
	position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #000000;
	opacity: 0;
    z-index: 99;
}

.header_about {
	background: linear-gradient(180deg, #56532D 0%, rgba(111, 109, 78, 0.90) 20.42%, rgba(130, 128, 103, 0.30) 44.91%, rgba(217, 217, 217, 0.00) 100%);
}
.header_roundtable {
	background: linear-gradient(180deg, #4F4F4F 0%, rgba(116, 116, 116, 0.73) 24.52%, rgba(217, 217, 217, 0.00) 62.98%);
}
.header_contributors {
	background: linear-gradient(180deg, var(--WA_2_Layer-4-Highlight, #C4C1FF) 12.98%, rgba(206, 204, 237, 0.53) 40.38%, rgba(217, 217, 217, 0.00) 52.88%);
}
.header_wetlands {
    background: linear-gradient(181deg, #3CED6E 4.8%, rgba(60, 237, 110, 0.80) 53.63%, rgba(60, 237, 110, 0.41) 68.59%, rgba(60, 237, 110, 0.00) 87.14%);
}
.header_wetlands_glossary {
    background: linear-gradient(181deg, #3CED6E 4.8%, rgba(60, 237, 110, 0.80) 53.63%, rgba(60, 237, 110, 0.41) 68.59%, rgba(60, 237, 110, 0.00) 87.14%);
	height: 240px;
}
.header_wetlands_glossary_item {
	height: 200px;
}
.header_wetlands_readinglist {
    background: linear-gradient(181deg, #C0FFD2 5.34%, rgba(136, 247, 168, 0.90) 22.48%, rgba(60, 237, 110, 0.00) 61.01%);
	height: 240px;
}
.header_wetness {
	background: linear-gradient(180deg, #00B1E2 0%, rgba(0, 177, 226, 0.90) 46.55%, rgba(59, 192, 224, 0.50) 77.21%, rgba(129, 210, 220, 0.00) 100%);
}
.header_wetness_cosmology {
	background: linear-gradient(0deg, rgba(43, 69, 126, 0.00) 0%, #2B457E 100%);
}
.header_snot {
	/* background: linear-gradient(180deg, #4D5C2F 42.57%, rgba(77, 92, 47, 0.00) 64.68%); */
	pointer-events: none;
}
.header_coastline {
	background: linear-gradient(181deg, #2A73F2 0.83%, #1661E2 6.23%, #0050DC 18.84%, #0050DC 31.77%, rgba(0, 80, 220, 0.90) 49.47%, rgba(0, 76, 208, 0.50) 63.04%, rgba(42, 115, 242, 0.00) 81.1%, rgba(42, 115, 242, 0.00) 93.96%);
}
.header_coastline_atlas {
	background: #0c0c27
}
.header_speculative {
	background: linear-gradient(180deg, #FABEFF 0%, #93F2FF 16.07%, rgba(95, 248, 220, 0.99) 41.35%, rgba(39, 255, 183, 0.40) 62.02%, rgba(217, 217, 217, 0.00) 100%);
}
.header_bar {
	height: 69px;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	gap: 10px;
	padding: 0 30px;
}

.header_content_snot {
    background-color: #4D5C2F;
    pointer-events: auto;
}
.header_fade_snot {
    height: 80px;
    background: linear-gradient(to bottom, #4D5C2F 0%, rgba(77, 92, 47, 0.8) 30%, rgba(77, 92, 47, 0.0) 100%);
}

.header_wetness_cosmology .header_bar {
	margin-bottom: 21px;
}

.content_title {
	font: 120px 'Sligoil Micro', monospace;
	font-weight: 500;
	line-height: 120px;
	color: #d9d9d9;
	-webkit-text-stroke: 1px #56532d;
	letter-spacing: -0.1em;
	/*word-spacing: -15px;*/
	/*letter-spacing: -0.02em;*/
	margin-bottom: 30px;
}

.hdr_image {
    position: relative;
    width: 104px;
    vertical-align: bottom;
    top: -3px;	
}
.header_lang {
	display: flex;
	justify-content: center;
	align-items: center;
	font: 15px 'Cabinet Grotesk', sans-serif;
	color: #00FFE5;
	line-height: 22px;
	text-align: center;
	width: 44px;
	height: 23px;
	padding: 0 10px;
	border: 1px solid #00FFE5;
	border-radius: 33px;
	transform: rotate3d(0, 0, 1, -45deg); /* prevents flicker with rotate() */
	cursor: pointer;
}
.header_lang.active {
	background: #4794EB;
}
.header_lang_tr {
	position: relative;
    left: 14px;
    top: -7px;
}
.header_lang_en {
	position: relative;
    left: -4px;
	top: -6px;
}

.header_about .header_lang {
	color: #D9D9D9;
	border: 1px solid #D9D9D9;
}
.header_about .header_lang.active {
	background: #56532D;
}

.header_roundtable .header_lang {
	color: #D9D9D9;
	border: 1px solid #D9D9D9;
}
.header_roundtable .header_lang.active {
	background: #4F4F4F;
}

.header_contributors .header_lang {
	color: #4F4F4F;
	border: 1px solid #4F4F4F;
}
.header_contributors .header_lang.active {
	background: #9EFFBA;
}

.header_wetlands .header_lang, .header_wetlands_glossary .header_lang, .header_wetlands_readinglist .header_lang {
	color: #ff00bf;
	border: 1px solid #ff00bf;
}
.header_wetlands .header_lang.active, .header_wetlands_glossary .header_lang.active, .header_wetlands_readinglist .header_lang.active {
	background: #d9d9d9;
}

.header_wetness .header_lang {
	color: #d9d9d9;
	border: 1px solid #d9d9d9;
}
.header_wetness .header_lang.active {
	background: #2B457E;
}

.header_snot .header_lang {
	color: #BEFF3B;
	border: 1px solid #BEFF3B;
}
.header_snot .header_lang.active {
    background: #BEFF3B;
    color: #4D5C2F;
}

.header_coastline .header_lang {
	color: #65B3FC;
	border: 1px solid #65B3FC;
}
.header_coastline .header_lang.active {
	background: #1100ff;
}

.header_speculative .header_lang {
	color: #FF432A;
	border: 1px solid #FF432A;
}
.header_speculative .header_lang.active {
	background: #D9D9D9;
}

.header_bar_button {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 10px 20px;
	font: 22px 'Cabinet Grotesk', sans-serif;
	font-weight: 400;
	line-height: 22px;
	background: #D9D9D9;
	border: 1px solid #56532D;
	border-radius: 33px;
}
.header_circles {
	position: fixed;
	top: 104px;
	right: 32px;
    display: flex;
    width: 42px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 18px;
}

.circle_tooltip {
	display: none;
	position: absolute;
	font: 22px 'Sligoil Micro', monospace;
	font-weight: 500;
	letter-spacing: -1.75px;
	white-space: nowrap;
	transform: rotate(-25deg);
	transform-origin: center right;
}
.circle_tooltip_wetlands {
	right: 54px;
	top: 10px;
	color: #FF00BF;
}
.circle_tooltip_wetness {
	right: 54px;
	top: 69px;
	color: #2B457E;
}
.circle_tooltip_snot {
	right: 54px;
	top: 128px;
	color: #4D5C2F;
}
.main_snot .circle_tooltip_snot {
	color: #beff3b;
}

.circle_tooltip_coast {
	right: 54px;
	top: 187px;
	color: #1100FF;
}
.circle_tooltip_spec {
	right: 54px;
	top: 246px;
	color: #FF432A;
}

a.circle:hover + div.circle_tooltip {
	display: block;
}

.content_about {
	color: #56532D;
	font: var(--content-font-size) 'Sligoil Micro', monospace;
	line-height: var(--content-line-height);
	letter-spacing: var(--content-letter-spacing);
}
.content_about a, .content_about a:link, .content_about a:visited, .content_about a:active, .content_about a:hover {
	border-bottom: 1px dashed;
	padding-bottom: 2px;
}
.content_about li {
	margin-bottom: 16px;
}
.content_roundtable {
	color: #4F4F4F;
	font: var(--content-font-size) 'Sligoil Micro', monospace;
	line-height: var(--content-line-height);
	letter-spacing: var(--content-letter-spacing);
}
.content_contributors {
	color: #4F4F4F;
	font: var(--content-font-size) 'Sligoil Micro', monospace;
	line-height: var(--content-line-height);
	letter-spacing: var(--content-letter-spacing);
}

div.fish_separator {
	text-align: center;
}
div.fish_separator svg {
	width: 75%;
    height: auto;
    max-width: 300px;	
}

/* contributors */
.contributors_cols_wrapper {
	display: flex;
	gap: 3rem;
	align-items: flex-start;
}
.contributors_subtitle {
	display: inline-block;
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 16px;
	border-bottom: 2px solid #4F4F4F;
}
.contributors_subtitle_others {
	margin-top: 40px;
}
.contributors_column {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0; 
}
.contributor_card {
	cursor: pointer;
}
.contributor_card a:hover { text-decoration: underline; }
.contributor_card_name {

}
.contributor_card_bio {
	font: var(--contributor-bio-font-size) 'Sligoil Micro', monospace;
	font-weight: 400;
	line-height: var(--contributor-bio-line-height);
	letter-spacing: -0.4px;
}

.content_wetlands {
	color: #16642C;
	font: var(--content-font-size) 'Sligoil Micro', monospace;
	line-height: var(--content-line-height);
	letter-spacing: var(--content-letter-spacing);
}
.content_wetlands_glossary {
	color: #FF00BF;
	font: var(--content-font-size) 'Sligoil Micro', monospace;
	line-height: var(--content-line-height);
	letter-spacing: var(--content-letter-spacing);
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	flex:0;
	margin-top: 40px;
}
.content_wetlands_glossary_item {
	color: #FF00BF;
	font: var(--content-font-size) 'Sligoil Micro', monospace;
	line-height: var(--content-line-height);
	letter-spacing: var(--content-letter-spacing);
}
.content_wetlands_readinglist {
	color: #16642C;
	font: var(--content-font-size) 'Sligoil Micro', monospace;
	line-height: var(--content-line-height);
	letter-spacing: var(--content-letter-spacing);
}
.content_wetlands_readinglist a { text-decoration: underline; color: #00250a; }

.readinglist_card
{
	background-color: #9EFFBA;
	padding: 15px 30px;
	border: 1px solid #16642C;
	border-radius: 48px;
	margin-bottom: 20px;
}
.readinglist_card:hover
{
	background-color: #cbffda;
}
.readinglist_info {
	color: #46461c;
	background-color: #fffdc7;
	border: 1px solid #a3af45;
	padding: 15px 30px;
	border-radius: 48px;
	margin-bottom: 20px;
}

.g_shape {
	font: var(--shape-font-size) 'Sligoil Micro', monospace;
	line-height: var(--shape-line-height);
	letter-spacing: var(--shape-letter-spacing);
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	cursor: pointer;
	margin-top: -1px;
    margin-left: -1px;
    position: relative;
    left: 1px;
    top: 1px;	
}
.g_shape:hover {
	background-color: #77FF9D;	
}
.g_ellipse {
	width: 200px;
	height: 160px;
	border-radius: 200px;
	border: 1.5px solid #FF00BF;
	background: rgba(235, 234, 234, 0.17);
}
.g_circle {
	width: 160px;
	height: 160px;
	border-radius: 100px;
	border: 1.5px solid #FF00BF;
	background: rgba(235, 234, 234, 0.17);
}
.g_square {
	min-width: 160px;
	min-height: 160px;
	border: 1.5px solid #FF00BF;
	background: rgba(235, 234, 234, 0.17);
}
.g_shape_big
{
	width: 260px;
	height: 160px;
}

.glossary_item_info {
	display: flex;
	gap: 20px;
	align-items: flex-end;
	justify-content: flex-start;
	margin: 0 0 40px 40px;
}
.g_item_arrow_left {
	align-self: flex-start;
	padding: 0 10px;
}
.g_item_arrow_left_a {
	display: block;
	align-self: flex-start;
}
.g_item_arrow_left img {
	width: 40px;
}
.g_item_title, .g_item_author {
	font: var(--shape-font-size) 'Sligoil Micro', monospace;
	line-height: var(--shape-line-height);
	letter-spacing: var(--shape-letter-spacing);
	color: #FF00BF;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 50px 25px;
	border-radius: 100px;
	border: 1px solid #FF00BF;
	background: #77FF9D;
}
.g_item_author {
	padding: 25px 25px;
}

.speculative_item_info {
	display: flex;
	gap: 20px;
	align-items: flex-end;
	justify-content: flex-start;
	margin: 40px 40px 40px 40px;
}

.content_wetness {
	color: #2b457e;
	font: var(--content-font-size) 'Sligoil Micro', monospace;
	line-height: var(--content-line-height);
	letter-spacing: var(--content-letter-spacing);
}
.content_wetness_cosmology {
	font: var(--content-font-size) 'Sligoil Micro', monospace;
	line-height: var(--content-line-height);
	letter-spacing: var(--content-letter-spacing);
	color: #f2f2f2;
	margin: 30px 10px;
	display: flex;
}
.stars_container {
	width:80%;
	display: flex;
	flex-wrap: wrap;
	row-gap: 20px;
	column-gap: 20px;
	font: var(--stars-font-size) 'Sligoil Micro', monospace;
	line-height: var(--stars-line-height);
	letter-spacing: var(--stars-letter-spacing);
	color: #f2f2f2;
}
.star {
	position: relative;
	padding: 0 10px;
	cursor: pointer;
	transition: transform 0.1s;
}
.star:hover {
	transform: scale(1.1);
}

.star_bullet_with_text {
	display: flex;
	align-items: center;
	gap: 3px;
}
.star_bullet {
	font-size: 8px;
}

.star_yapi, .star_filter_yapi { color: #ffc4c4; }
.star_cografya, .star_filter_cografya { color: #00FFD5; }
.star_hal, .star_filter_hal { color: #C4FFF7; }
.star_soz, .star_filter_soz { color: #FFFCC4; }
.star_musterek, .star_filter_musterek { color: #C4C1FF; }
.star_insan, .star_filter_insan { color: #FFB387; }
.star_bellek, .star_filter_bellek { color: #61FF8D; }

.star_filter_yapi svg.has_fill { fill: #ffc4c4; }
.star_filter_yapi svg.has_stroke { stroke: #ffc4c4; }
.star_filter_cografya svg.has_fill { fill: #00FFD5; }
.star_filter_cografya svg.has_stroke { stroke: #00FFD5; }
.star_filter_hal svg.has_fill { fill: #C4FFF7; }
.star_filter_hal svg.has_stroke { stroke: #C4FFF7; }
.star_filter_soz svg.has_fill { fill: #FFFCC4; }
.star_filter_soz svg.has_stroke { stroke: #FFFCC4; }
.star_filter_musterek svg.has_fill { fill: #C4C1FF; }
.star_filter_musterek svg.has_stroke { stroke: #C4C1FF; }
.star_filter_insan svg.has_fill { fill: #FFB387; }
.star_filter_insan svg.has_stroke { stroke: #FFB387; }
.star_filter_bellek svg.has_fill { fill: #61FF8D; }
.star_filter_bellek svg.has_stroke { stroke: #61FF8D; }

.stars_filter_wrapper {
	width: 20%;
	min-width: 200px;
	max-width: 320px;
}
.stars_filter_container {
	position: sticky;
	top: 240px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: flex-start;
	color: #FFC4C4;
	font: 18px 'Cabinet Grotesk', sans-serif;
	font-style: normal;
	font-weight: 400;
	line-height: 19px;
	letter-spacing: normal;
}
.star_filter {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: 350px;
	border-radius: 33px;
	border: 1px solid #C4FFF7;
	background-color: #2B457E;
	padding: 8px 10px;
}
.star_filter_svg_eye, .star_filter_svg_info {
	height: 26px;
	cursor: pointer;
}

.star_filter_text {
	word-break: break-all;
	padding: 0 4px;
}

.stars_filter_button {
    background-image: url(../images/filter.svg);
    background-repeat: no-repeat;
    background-size: 32px 32px;
    background-position: center center;
	background-color: #2B457E;
	border: 2px solid #15223d;
	border-radius: 8px;
	cursor: pointer;
}

.star_box {
    position: fixed;
    left: 40px;
    top: 146px;
    width: 500px;
	font: 15px 'Sligoil Micro', monospace;	
	font-style: normal;
	font-weight: 400;
	letter-spacing: -0.64px;
	padding: 20px 15px;
	background-color: #2B457E;
	color: #f6f6f6;
	border: 1px solid #f6f6f6;
	border-radius: 33px;
	box-shadow: 1px 1px 10px #222222;
    z-index: 9;	
}
.star_box_header {
	display: flex;
	justify-content: space-between;
	gap: 8px;
}
#star_box_title {
	text-decoration: underline;
}
#star_box_close {
	min-width: 28px;
	max-width: 28px;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    border: 1px solid;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
	cursor: pointer;
}
#star_box_content {
	max-height: calc(100dvh - 146px - 120px);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #6083cc #2B457E;
	margin-top: 16px;
}

.star_box a, .star_box a:link, .star_box a:visited, .star_box a:active, .star_box a:hover { border-bottom: 1px dashed; text-decoration: none;}

.star_box img {
	width: 98%;
	vertical-align: top;
}
.star_box video {
	width: 98%;
	vertical-align: top;
}
.star_photo_credit {
	text-align: center;
	font-size: 12px;
	margin-top: 4px;
}
.star_source {
	margin-top: 10px;
}
.star_links {
	margin-top: 10px;
}

.star_box_S {
	width: 400px;
}
.star_box_L {
	width: 680px;
}

.star_box_yapi { 
	color: #ffc4c4;
	border: 1px solid #ffc4c4;
}
.star_box_cografya {
	color: #00FFD5;
	border: 1px solid #00FFD5;
}
.star_box_hal {
	color: #C4FFF7;
	border: 1px solid #C4FFF7;
}
.star_box_soz {
	color: #FFFCC4;
	border: 1px solid #FFFCC4;
}
.star_box_musterek {
	color: #C4C1FF;
	border: 1px solid #C4C1FF;
}
.star_box_insan {
	color: #FFB387;
	border: 1px solid #FFB387;
}
.star_box_bellek {
	color: #61FF8D;
	border: 1px solid #61FF8D;
}
.star_box_yapi     #star_box_content { scrollbar-color: #ffc4c4 #2B457E; }
.star_box_cografya #star_box_content { scrollbar-color: #00FFD5 #2B457E; }
.star_box_hal      #star_box_content { scrollbar-color: #C4FFF7 #2B457E; }
.star_box_soz      #star_box_content { scrollbar-color: #FFFCC4 #2B457E; }
.star_box_musterek #star_box_content { scrollbar-color: #C4C1FF #2B457E; }
.star_box_insan    #star_box_content { scrollbar-color: #FFB387 #2B457E; }
.star_box_bellek   #star_box_content { scrollbar-color: #61FF8D #2B457E; }

.star_filter_box {
    position: fixed;
	right: 25%;
    top: 160px;	
	font: 15px 'Sligoil Micro', monospace;	
	font-style: normal;
	font-weight: 400;
	letter-spacing: -0.64px;	
	width: 320px;
	height: 500px;
	padding: 10px 15px;
	border-radius: 33px;
	color: #2B457E;
	border: 1px solid #2B457E;
	background-color: #f2f2f2;
	box-shadow: 1px 1px 10px #222222;
	z-index: 19;
}
#sfbox_content {
    height: calc(100% - 40px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #2B457E #f2f2f2;
    margin-top: 16px;
}
#sfbox_title {
	font: 18px 'Cabinet Grotesk', sans-serif;
	font-style: normal;
	font-weight: 400;
	line-height: 22px; /* 104.762% */	
}
.sfbox_header {
	display: flex;
	align-items: center;
	gap: 10px;
}
.star_filter_box svg { vertical-align: top; fill: #2B457E; }

.star_filter_box_yapi     { background-color: #ffc4c4;}
.star_filter_box_cografya { background-color: #00FFD5;}
.star_filter_box_hal      { background-color: #C4FFF7;}
.star_filter_box_soz      { background-color: #FFFCC4;}
.star_filter_box_musterek { background-color: #C4C1FF;}
.star_filter_box_insan    { background-color: #FFB387;}
.star_filter_box_bellek   { background-color: #61FF8D;}

.star_filter_box_yapi     #sfbox_content { scrollbar-color: #2B457E #ffc4c4; }
.star_filter_box_cografya #sfbox_content { scrollbar-color: #2B457E #00FFD5; }
.star_filter_box_hal      #sfbox_content { scrollbar-color: #2B457E #C4FFF7; }
.star_filter_box_soz      #sfbox_content { scrollbar-color: #2B457E #FFFCC4; }
.star_filter_box_musterek #sfbox_content { scrollbar-color: #2B457E #C4C1FF; }
.star_filter_box_insan    #sfbox_content { scrollbar-color: #2B457E #FFB387; }
.star_filter_box_bellek   #sfbox_content { scrollbar-color: #2B457E #61FF8D; }

.content_snot {
	color: #beff3b;
	font: var(--content-font-size) 'Sligoil Micro', monospace;
	line-height: var(--content-line-height);
	letter-spacing: var(--content-letter-spacing);
}

.toolbar_button_snot3, .toolbar_button_snot2 {
	display: flex;
	align-items: center;
	cursor: default !important;
}
.snot_tab3_icons, .snot_tab2_icons {
	align-items: center;
	gap: 4px;
}
.toolbar_button_snot3:hover .snot_tab3_icons {
	display: flex !important;
}
.toolbar_button_snot2:hover .snot_tab2_icons {
	display: flex !important;
}
.snot_tab3_icons img, .snot_tab2_icons img {
	vertical-align: top;
	width: 36px;
	height: 36px;
}
.snot_tab_icon_active {
	border: 3px solid #f00000;
    border-radius: 16px;
}

.snot_dropdown_button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.snot_dropdown_arrow {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #333; /* Color of your arrow */
	display: inline-block;
	transition: transform 0.2s ease; /* Smooth rotation animation */	
}
.snot_dropdown_button.active .snot_dropdown_arrow {
  transform: rotate(180deg);
}
.snot_dropdown {
	position: relative;
	/* display: inline-block; */
}
.snot_dropdown_content {
	display: none;
	position: fixed;
	flex-direction: column;
	gap: 10px;
	color: #beff3b;
	background-color: #4B6845;
	padding: 10px 10px;
	min-width: 280px;
	max-width: 280px;
	border-radius: 12px;
	box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.75);
	z-index: 10;
}
.ico_text {
	display: flex;
	align-items: center;
	gap: 10px;
}
.snot_dropdown_content img {
	width: 32px;
}
.snot_dropdown_content.show {
	display: flex;
}

.custom-tooltip {
  position: relative;
  cursor: pointer;
}
.custom-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%; /* Places it right above the button */
  left: 50%;
  transform: translateX(-50%);
 
  /* Styling options (which you can change freely) */
  background-color: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
  z-index: 10;
}
/* Show the tooltip on hover or keyboard focus */
.custom-tooltip:hover::after,
.custom-tooltip:focus::after {
  opacity: 1;
}

.content_coastline {
	color: #000D56;
	font: var(--content-font-size) 'Sligoil Micro', monospace;
	line-height: var(--content-line-height);
	letter-spacing: var(--content-letter-spacing);
}
.content_caostline_atlas {
	color: #000D56;
	font: var(--content-font-size) 'Sligoil Micro', monospace;
	line-height: var(--content-line-height);
	letter-spacing: var(--content-letter-spacing);
	margin: 0;
	padding: 0;
}
.coastlineAtlasFrame {
	width: 100%;
	height: 100%;
	border: none;
	vertical-align: top;
}

.content_speculative {
	color: #59304D;
	font: var(--content-font-size) 'Sligoil Micro', monospace;
	line-height: var(--content-line-height);
	letter-spacing: var(--content-letter-spacing);
}
.content_speculative .twf_text a, .content_speculative .twf_text a:link, .content_speculative .twf_text a:visited, .content_speculative .twf_text a:active, .content_speculative .twf_text a:hover,
.content_speculative_item .twf_text a, .content_speculative_item .twf_text a:link, .content_speculative_item .twf_text a:visited, .content_speculative_item .twf_text a:active, .content_speculative_item .twf_text a:hover,
.content_snot .twf_text a, .content_snot .twf_text a:link, .content_snot .twf_text a:visited, .content_snot .twf_text a:active, .content_snot .twf_text a:hover,
.content_coastline .twf_text a, .content_coastline .twf_text a:link, .content_coastline .twf_text a:visited, .content_coastline .twf_text a:active, .content_coastline .twf_text a:hover,
a.wavy_blue, a.wavy_blue:link, a.wavy_blue:visited, a.wavy_blue:active, a.wavy_blue:hover
{
	color: inherit;
	text-decoration-line: underline;
	text-decoration-style: wavy;
	-webkit-text-decoration-line: underline;
	-webkit-text-decoration-style: wavy;
	text-decoration-skip-ink: auto;
	text-decoration-color: #00FFE5;
	text-underline-position: from-font;
	text-decoration-thickness: var(--wavy-text-decoration-thickness);
	text-underline-offset: var(--wavy-text-underline-offset);
}
a.line_blue, a.line_blue:link, a.line_blue:visited, a.line_blue:active, a.line_blue:hover
{
	color: inherit;
	/*
	text-decoration: underline;
	text-decoration-color: #00FFE5;
	text-decoration-thickness: 2px;
	*/
	border-bottom: 1px dashed #00FFE5;
    padding-bottom: 2px;	
}


.content_coastline .twf_text a, .content_coastline .twf_text a:link, .content_coastline .twf_text a:visited, .content_coastline .twf_text a:active, .content_coastline .twf_text a:hover {
	text-decoration-color: #111144;
}

.content_speculative_fabulations {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;	
	color: #59304D;
	font: var(--content-font-size) 'Sligoil Micro', monospace;
	line-height: var(--content-line-height);
	letter-spacing: var(--content-letter-spacing);
	margin: 0 116px 0 0;
}
.content_speculative_item {
	color: #59304D;
	font: var(--content-font-size) 'Sligoil Micro', monospace;
	line-height: var(--content-line-height);
	letter-spacing: var(--content-letter-spacing);
}
.s_item_title {
	color: #FF432A;
	text-shadow: 0 4px 80px #FBFF00;
	font: 44px 'Sligoil Micro', monospace;
	font-weight: 500;
	line-height: 50px;
	letter-spacing: -3.52px;	
}
.s_item_author {
	color: #FF432A;
	text-shadow: 0 4px 55px #FBFF00;
	font: 33px 'Sligoil Micro', monospace;
	font-weight: 700;
	line-height: 33px;
	letter-spacing: -2.64px;
}

.regular {
	margin-top: 1em;
	margin-bottom: 1em;
}
.heading_date {
	margin-top: 2em;
}
.heading {
	font: var(--heading-font-size) 'Sligoil Micro', monospace;
	line-height: var(--heading-line-height);
	letter-spacing: var(--heading-letter-spacing);
	margin-bottom: 1em;
}

.c_spec_back {
	display: flex;
	justify-content: center;
	align-items: center;
	transform: scale(calc(100vw / 1680px));
	z-index: 99;
}
.c_spec_back_image {
	position: relative;
}
.c_spec_back_image img {
	vertical-align: top;
}
.cso_item {
	position: absolute;
}
.cso_item_line {
    line-height: 0;
}
.cso_item_title {
	color: #59304D;
	font: 20px 'Sligoil Micro', monospace;
	font-weight: 500;
	line-height: 22px;
	letter-spacing: -1.4px;	
}
.cso_item_title:hover {
	color: #59304D;
	font: 20px 'Sligoil Micro', monospace;
	line-height: 22px;
	letter-spacing: -1.4px;
	text-decoration-line: underline;
	text-decoration-style: wavy;
	text-decoration-skip-ink: auto;
	text-decoration-color: #00FFE5;
	text-decoration-thickness: 17.5%;
	text-underline-offset: 5px;
	text-underline-position: from-font;	
}
.cso_item_1 {
	left:-352px;
	top:49px;
}
.cso_item_1_en {
	top:27px;
}
.cso_item_2 {
	left:108px;
	top:20px;
}
.cso_item_2_en .cso_item_title {
	position: relative;
	left: -44px;
}
.cso_item_3 {
	text-align: right;
	left: 384px;
	top: -118px;
}
.cso_item_4 {
	text-align: right;
	left: 492px;
	top: -12px;
}
.cso_item_5 {
	text-align: right;
	left: 570px;
	top: 126px;
}
.cso_item_6 {
	text-align: right;
	left: 512px;
	top: 216px;
}
.cso_item_7 {
	text-align: right;
	left: 448px;
	top: 324px;
}
.cso_item_8 {
	text-align: right;
	left: 501px;
	top: 448px;
}
.cso_item_9 {
	text-align: right;
	left: 350px;
	top: 392px;
	padding-bottom: 20px;
}
.cso_item_9 .cso_item_title {
	position: relative;
	top: -30px;
	right: 0;
	margin-bottom: -22px;
}
.cso_item_10 {
	left: 102px;
	top: 340px;
}
.cso_item_10 .cso_item_title {
	position: relative;
	top: -30px;
	left: 0;
	margin-bottom: -22px;
}
.cso_item_10_en .cso_item_title {
	left: -117px;
}
.cso_item_11 {
	left: -388px;
	top: 396px;
}
.cso_item_11 .cso_item_title {
	position: relative;
	top: -30px;
	left: 0;
	margin-bottom: -22px;
}
.cso_item_11_en .cso_item_title {
	top: -52px;
}
.cso_item_12 {
	left: -422px;
	top: 284px;
}
.cso_item_12_en {
	top: 262px;
}
.cso_item_13 {
	left: -300px;
	top: 158px;
}

.big_circle {
	position: absolute;
	left: 36px;
	top: 38px;
	width: 108px;
	height: 108px;
	border-radius: 64px;
	transform: translate3d(0, 0, 0);  /* ??? safari fix for filter blur ??? */
	-webkit-filter: blur(10px);        /* ??? safari fix for filter blur ??? */
	filter: blur(10px);
	opacity: 0.35;
	z-index: -1;
}
.big_circle_wetlands {
	background-color: #009f2d;
}
.big_circle_wetness {
	background-color: #B1FEF1;
}
.big_circle_snot {
	background-color: #B6C289;
	z-index: 0;
}
.big_circle_coastline {
	background-color: #1100ff;
}
.big_circle_speculative {
	background-color: #361d1d;
}

.toolbar_circle {
    width: 42px;
    height: 42px;
    border-radius: 22px;
	transform: translate3d(0, 0, 0);  /* ??? safari fix for filter blur ??? */
	-webkit-filter: blur(8px);        /* ??? safari fix for filter blur ??? */
	filter: blur(8px);
	transition: filter 0.25s;
	cursor: pointer;
}
.toolbar_circle_green {
	background-color: #009f2d;
}
.toolbar_circle_blue {
	background-color: #1100ff;
}
.toolbar_circle_lightblue {
	background-color: #b1fef1;
}
.toolbar_circle_yellow {
	background-color: #b6c289;
}
.toolbar_circle_blackish {
	background-color: #361d1d;
}
.toolbar_circle:hover {
	transform: translate3d(0, 0, 0);  /* ??? safari fix for filter blur ??? */
	-webkit-filter: none;             /* ??? safari fix for filter blur ??? */
	filter: none;
}

.content_wetlands {
}
.titles_toolbar {
	width: calc(100% - 150px);
}
.titles_circles {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 0 100px 0 100px;
	margin-top: -16px;
}

.title_about {
	font: 80px 'Sligoil Micro', monospace;
	font-style: normal;
	font-weight: 500;
	color: #D9D9D9;
	line-height: 120px;
	letter-spacing: -13.2px;
	-webkit-text-stroke: 1px #56532D;
	margin: 0 0 30px 0px;
}
.title_roundtable {
	font: 80px 'Sligoil Micro', monospace;
	font-style: normal;
	font-weight: 500;
	color: #D9D9D9;
	line-height: 120px;
	letter-spacing: -13.2px;
	-webkit-text-stroke: 1px #56532D;
	margin: 0 0 30px 0px;
}
.title_contributors {
	font: 80px 'Sligoil Micro', monospace;
	font-style: normal;
	font-weight: 500;
	color: #D9D9D9;
	line-height: 120px;
	letter-spacing: -13.2px;
	-webkit-text-stroke: 1px #56532D;
	margin: 0 0 30px 0px;
}

.title_wetlands {
	font: var(--title-font-size) 'Sligoil Micro', monospace;
	line-height: var(--title-line-height);
	letter-spacing: var(--title-letter-spacing);
	font-style: normal;
	font-weight: 500;
	color: #ff00bf;
}
.subtitle_wetlands {
	font: var(--subtitle-font-size) 'Sligoil Micro', monospace;
	line-height: var(--subtitle-line-height);
	letter-spacing: var(--subtitle-letter-spacing);
	font-weight: 700;
	color: #FF00BF;
	margin: 40px 0;
}

.title_wetness, .title_wetness_cosmology {
	font: var(--title-font-size) 'Sligoil Micro', monospace;
	line-height: var(--title-line-height);
	letter-spacing: var(--title-letter-spacing);
	font-style: normal;
	font-weight: 500;
	color: #2B457E;
}
.title_wetness_cosmology {
	color: #B1FEF1;
	text-shadow: 6px 6px 66px #225D53;
}
.subtitle_wetness {
	font: var(--subtitle-font-size) 'Sligoil Micro', monospace;
	line-height: var(--subtitle-line-height);
	letter-spacing: var(--subtitle-letter-spacing);
	font-weight: 700;
	color: #2b457e;
	margin: 40px 0;
}

.title_snot {
	font: var(--title-font-size) 'Sligoil Micro', monospace;
	line-height: var(--title-line-height);
	letter-spacing: var(--title-letter-spacing);
	font-style: normal;
	font-weight: 500;
	color: #BEFF3B;
}
.subtitle_snot {
	font: var(--subtitle-font-size) 'Sligoil Micro', monospace;
	line-height: var(--subtitle-line-height);
	letter-spacing: var(--subtitle-letter-spacing);
	font-weight: 700;
	color: #BEFF3B;
	margin: 50px 0 50px 46px;
}

.title_coastline, .title_coastline_atlas, .title_coastline_biblio {
	font: var(--title-font-size) 'Sligoil Micro', monospace;
	line-height: var(--title-line-height);
	letter-spacing: var(--title-letter-spacing);
	font-style: normal;
	font-weight: 500;
	color: #65B3FC;
}
.title_coastline_biblio {
	color: #000D56;
}
.subtitle_coastline {
	font: var(--subtitle-font-size) 'Sligoil Micro', monospace;
	line-height: var(--subtitle-line-height);
	letter-spacing: var(--subtitle-letter-spacing);
	font-weight: 700;
	color: #65B3FC;
	margin: 50px 0 50px 46px;
}

.title_speculative {
	font: var(--title-font-size) 'Sligoil Micro', monospace;
	line-height: var(--title-line-height);
	letter-spacing: var(--title-letter-spacing);
	font-style: normal;
	font-weight: 500;
	color: #FF432A;
}
.subtitle_speculative {
	font: var(--subtitle-font-size) 'Sligoil Micro', monospace;
	line-height: var(--subtitle-line-height);
	letter-spacing: var(--subtitle-letter-spacing);
	font-weight: 700;
	color: #FF432A;
	margin: 50px 0 50px 46px;
}

.toolbar {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
	margin: 20px 0;
}
.toolbar_button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--toolbar-button-height);
	font: var(--toolbar-button-font-size) 'Cabinet Grotesk', sans-serif;
	line-height: var(--toolbar-button-line-height);
	padding: 0 20px;
	border-radius: 33px;
	text-align: center;
	cursor: pointer;
}

.toolbar_about {
	margin: 0 0 50px 0;
}
.toolbar_about .toolbar_button {
	color: #56532D;
	background-color: #D9D9D9;
	border: 1px solid #56532D;
}
.toolbar_about .toolbar_button_active {
	color: #D9D9D9;
	background: #56532D;
	border: 1px solid #D9D9D9;
}

.toolbar_roundtable {
	margin: 0 0 50px 0;
}
.toolbar_roundtable .toolbar_button {
	color: #56532D;
	background-color: #D9D9D9;
	border: 1px solid #56532D;
}
.toolbar_roundtable .toolbar_button_active {
	color: #D9D9D9;
	background: #56532D;
	border: 1px solid #D9D9D9;
}

.toolbar_contributors {
	margin: 0 0 50px 0;
}
.toolbar_contributors .toolbar_button {
	color: #56532D;
	background-color: #D9D9D9;
	border: 1px solid #56532D;
}
.toolbar_contributors .toolbar_button_active {
	color: #D9D9D9;
	background: #56532D;
	border: 1px solid #D9D9D9;
}

.toolbar_wetlands .toolbar_button {
	color: #ff00bf;
	background-color: #d9d9d9;
	border: 1px solid #ff00bf;	
}
.toolbar_wetlands .toolbar_button_active {
	color: #d9d9d9;
	background: #FF00BF;
	border: 1px solid #D9D9D9;
}
body.wetlands_glossary_item .titles_toolbar
{
	display: flex;
}

body.wetness_cosmology .titles_toolbar {
	display: flex;
	gap: 40px;
}
.toolbar_glossary {
}
.toolbar_glossary .toolbar_button {
	width: 164px;
}
.toolbar_glossary a {
    transform: rotate(-60deg);
}
.toolbar_glossary a:nth-child(n+2)
{
	position: relative;
	left: -96px;
}
.toolbar_glossary a:nth-child(n+3)
{
	position: relative;
	left: -196px;
}
.toolbar_glossary_tr a:nth-child(n+2)
{
	left: -96px;
}
.toolbar_glossary_tr a:nth-child(n+3)
{
	left: -194px;
}

.toolbar_readinglist .toolbar_button {
	width: 164px;
}
.toolbar_readinglist a {
    transform: rotate(-60deg);
}
.toolbar_readinglist a:nth-child(n+2)
{
	position: relative;
	left: -96px;
}
.toolbar_readinglist a:nth-child(n+3)
{
	position: relative;
	left: -196px;
}
.toolbar_readinglist_tr a:nth-child(n+2)
{
	left: -96px;
}
.toolbar_readinglist_tr a:nth-child(n+3)
{
	left: -194px;
}

.glossary_image_wrapper, .fabulations_image_wrapper, .coastline_image_wrapper {
	flex: 1;
    text-align: center;
}	
.glossary_image_wrapper img, .fabulations_image_wrapper img, .coastline_image_wrapper img {
	max-width: 800px;
	max-height: 800px;
	object-fit: contain;
}
.glossary_image, .fabulations_image, .coatline_image {
	margin-bottom: 10px;
}
.glossary_image img, .fabulations_image img, .coastline_image img, .glossary_image_double img {
	vertical-align: top;
	width: 100%;
	max-width: 800px;
	max-height: 800px;
	object-fit: contain;
	margin-bottom: 6px;
}
.glossary_image_text, .fabulations_image_text, .coastline_image_text {
    color: #222222;
    font: 12px 'Sligoil Micro', monospace;
    line-height: normal;
    letter-spacing: normal;
}

.glossary_image_double, .fabulations_image_double, .coastline_image_double {
	display: flex;
	gap: 6px;
}

.text_with_footnotes {
	display: flex;
	gap: 30px;
}
.twf_text {
	width: 80%;
}
.twf_text p:first-child {
	margin-top: 0;
}
.twf_footnotes {
	position: relative;
	width: 20%;
}
.marker {
	position: relative;
	font-size: 0.8em;
	top: -8px;
}
.l2 { left: 2px; }
.l4 { left: 4px; }

.footnote {
	/* position:absolute; */
	left: 0;
	width: 100%;
	font-size: 12px;
    letter-spacing: -0.6px;
    line-height: normal;
    margin-bottom: 20px;
    word-break: break-word;	
	margin-bottom: 20px;
}

.toolbar_wetness_cosmology {
	margin: 0;
}
.toolbar_wetness .toolbar_button {
	color: #2b457e;
	background: #B1FEF1;
	border: 1px solid #2B457E;
}
.toolbar_wetness .toolbar_button_active {
	color: #b1fef1;
	background: #2B457E;
	border: 1px solid #B1FEF1;
}
.toolbar_wetness_cosmology .toolbar_button {
	border: 1px solid #B1FEF1;
	background: #2B457E;
}
.toolbar_wetness_cosmology .toolbar_button_active {
	border: 1px solid #2B457E;
	background: #B1FEF1;
}

.toolbar_snot .toolbar_button {
	color: #4D5C2F;
	background: #B6C289;
	border: 1px solid #000000;
	min-height: 48px;
}
.toolbar_snot .toolbar_button_active {
	color: #BEFF3B;
	background: #4D5C2F;
	border: 1px solid #BEFF3B;
}

.toolbar_coastline .toolbar_button, .toolbar_coastline_atlas .toolbar_button, .toolbar_coastline_biblio .toolbar_button {
	color: #000D56;
	background: #65B3FC;
	border: 1px solid #000D56;
}
.toolbar_coastline .toolbar_button_active, .toolbar_coastline_atlas .toolbar_button_active, .toolbar_coastline_biblio .toolbar_button_active {
	color: #65B3FC;
	background: #000D56;
	border: 1px solid #65B3FC;
}

.toolbar_speculative .toolbar_button {
	color: #FF432A;
	background: #D9D9D9;
	border: 1px solid #FF432A;
}
.toolbar_speculative .toolbar_button_active {
	color: #D9D9D9;
	background: #FF432A;
	border: 1px solid #D9D9D9;
}

.led_by_wetlands {
	font: 18px 'Sligoil Micro', monospace;
	color: #ff00bf;
	line-height: 24px;
	letter-spacing: -1.44px;	
	padding-left: 10px;
}
.led_by_wetness {
	font: 18px 'Sligoil Micro', monospace;
	color: #2b457e;
	line-height: 24px;
	letter-spacing: -1.44px;	
	padding-left: 10px;
}
.led_by_snot {
	font: 18px 'Sligoil Micro', monospace;
	color: #BEFF3B;
	line-height: 24px;
	letter-spacing: -1.44px;	
	padding-left: 10px;
}
.led_by_coastline, .led_by_coastline_atlas, .led_by_coastline_biblio {
	font: 18px 'Sligoil Micro', monospace;
	color: #000D56;
	line-height: 24px;
	letter-spacing: -1.44px;	
	padding-left: 10px;
}
.led_by_coastline_atlas {
	color: #65B3FC;
}
.led_by_coastline_biblio {
	color: #000D56;
}
.led_by_speculative {
	font: 18px 'Sligoil Micro', monospace;
	color: #FF432A;
	line-height: 24px;
	letter-spacing: -1.44px;	
	padding-left: 10px;
}

.hdr_forum {
	font: bold 32px 'Sligoil Micro', monospace;
	color: #d9d9d9;
    -webkit-text-stroke: 0.8px #56532d;
	/*letter-spacing: -0.01em;*/
	cursor: pointer;
}

/* seasnotting windows */
.window_opener {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-style: wavy;
	-webkit-text-decoration-line: underline;
	-webkit-text-decoration-style: wavy;
	text-decoration-skip-ink: auto;
	text-decoration-color: #00FFE5;
	text-underline-position: from-font;
	text-decoration-thickness: var(--wavy-text-decoration-thickness);
	text-underline-offset: var(--wavy-text-underline-offset);	
	cursor: pointer;
}
.content_coastline .window_opener {
	text-decoration-color: #111144;
}

.content_window {
	position: fixed;
	top: 100px;
	left: 100px;
	width: 450px;
	height: 450px;
	border-radius: 16px;
	border-top-left-radius: 33px;
	border-top-right-radius: 33px;
	color: #222222;
	background: #f2f2f2;
	border: 2px solid #222222;
	box-shadow: 2px 2px 20px 0 #4D5C2F;
	overflow: hidden;
	scrollbar-width: thin;
}
.content_window_snot {
	color: #beff3b;
	border: 2px solid #B6C289;
	background: linear-gradient(180deg, #427B58 0%, #19776E 26.44%, #17524d 67.31%, #19776E 100%);
	box-shadow: 2px 2px 20px 0 #4D5C2F;
}
.content_window_speculative {
	color: #59304D;
	border: 2px solid #502c45;
	background: linear-gradient(180deg, #50E09F 0%, #79D7E4 55.77%, #4EEAFF 100%);
	box-shadow: 2px 2px 20px 0 #1f111b;
}
.content_window_coastline {
	color: #59304D;
	border: 2px solid #502c45;
	background: linear-gradient(180deg, #65B3FC 6.04%, #ACFFF7 32.7%, #418DFF 76.77%, #004CD0 100%);
	box-shadow: 2px 2px 20px 0 #1f111b;
}
.cw_header {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	position: relative;
	gap: 4px;
	height: 42px;
	padding-right: 10px;
	background-color: rgba(0, 0, 0, 0.1);
	cursor: move;
}
.cw_hdr_counter {
	position: relative;
    top: 1px;	
	padding: 0 4px;
	font-size: 18px;
	color: #222222;
	cursor: default;
}
.cw_header button {
    background-color: transparent;
	width: 36px;
	height: 42px;
    border: none;
    color: #f6f6f6;
}
.cw_header button:hover {
	background-color: #222222;
}
.cw_but, .but_maximize, .but_minimize, .but_close {
    display: flex;
    justify-content: center;
    align-items: center;	
}
.cw_svg {
	width: 24px;
	height: 24px;
}
.cw_svg_hasfill {
	width: 20px;
	height: 20px;
}

.content_window_snot .cw_header button:hover {
	background-color: #2D5542;
}
.content_window_snot .cw_svg {
	stroke: #B6C289;
	fill: none;
}
.content_window_snot .cw_svg_hasfill
{
	stroke: none;
	fill: #B6C289;
}

.content_window_speculative .cw_header button:hover {
	background-color: #33976A;
}
.content_window_speculative .cw_svg
{
	stroke: #222222;
	fill: none;
}
.content_window_speculative .cw_svg_hasfill
{
	stroke: none;
	fill: #222222;
}

.content_window_coastline .cw_header button:hover {
	background-color: #3e84bd;
}
.content_window_coastline .cw_svg
{
	stroke: #222222;
	fill: none;
}
.content_window_coastline .cw_svg_hasfill
{
	stroke: none;
	fill: #222222;
}

.content_window_wetness .cw_header button:hover {
	background-color: #6cafe6;
}
.content_window_wetness .cw_svg
{
	stroke: #222222;
	fill: none;
}
.content_window_wetness .cw_svg_hasfill
{
	stroke: none;
	fill: #222222;
}


.cw_body {
	height: calc(100% - 42px);
    scrollbar-width: thin;
    scrollbar-color: #8cfff6 transparent;	
	overflow: auto;
}
.cw_resizer {
	position: absolute;
	width: 20px;
	height: 20px;
	border-top-left-radius: 16px;
	background: linear-gradient(135deg, #eaff9c, #B6C289);
	right: 0;
	bottom: 0;
	cursor: se-resize;
}
.content_window_speculative .cw_resizer {
	background: linear-gradient(135deg, #ffffff, #4EEAFF);
}
.content_window_coastline .cw_resizer {
	background: linear-gradient(135deg, #ACFFF7, #418DFF);
}
.content_window_speculative .cw_resizer_gallery {
	background: rgba(0, 0, 0, 0.5);
}
.cw_resizer_gallery {
	background: rgba(0, 0, 0, 0.5);
}
.cw_resizer svg, .cw_resizer_gallery svg {
	stroke: #888888;
	fill: none;
	width: 20px;
	height: 20px;
	position: relative;
    top: -1px;
    left: -1px;	
}
.cw_resizer_gallery svg {
	stroke: #f2f2f2;
}

.cw_gallery_container {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}
.cw_gallery {
	display: flex;
	transition: transform 0.6s ease;
	height: 100%;
}
.cw_gallery img {
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	object-fit: cover; /* ensures image covers the div */
}
.cw_gallery img.contain {
	object-fit: contain;
}

.cw_yt_with_desc {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.cw_yt_with_desc_desc {
	padding: 10px;
}
.cw_yt_with_desc_video {
	flex: 1;
}

.cw_movie_with_desc {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.cw_movie_with_desc_desc_top { padding: 20px; }
.cw_movie_with_desc_video { flex: 1; }
.cw_movie_with_desc_desc_bottom { padding: 20px; }

.cw_pdf_with_desc {
	display: flex;
    flex-direction: column;
	height: 100%;
}
.cw_pdf_with_desc_desc_top { padding: 20px; }
.cw_pdf_with_desc_pdf { flex:1; }
.cw_pdf_with_desc_desc_bottom { padding: 20px; }

.inline_movie {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.main_home {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #d9d9d9;
	/*text-shadow: 1px 1px 3px #000000;*/
	overflow: hidden;
	z-index: 9;
}
.home_center {

}
.hmc_top {
	display: flex;
	gap: 20px;
	justify-content: center;
	align-items: center;
}
.hmc_bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;	
	margin-top: 20px;
}
.hmc_top_circles {
	display: flex;
	gap: 20px;
	justify-content: space-between;
	padding-top: 18px;
}
.home_logo {
}
.home_logo_image {
	width: 241px;
	vertical-align: bottom;
}
.nav_back_image {
	width: 241px;
	vertical-align: bottom;
    -webkit-filter: blur(2px);
    filter: blur(2px);
}

.home_top {
	height: 80px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 16px;
}
.home_mid {
	flex: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 16px;
}
.home_bottom {
	height: 48px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 16px;
}
.hf_left { flex: 1;}
.hf_center {}
.hf_right {
	flex: 1;
	text-align: right;
}

.home_mid_center {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.home_mid_logoish {
	position: relative;	
	font-size: 80px;	
	font-weight: 500;
	cursor: pointer;
}
.home_mid_subtitles {
	display: flex;
	gap: 60px;
	font-size: 18px;
}

.home_b_header {
	position: fixed;
	top: 0px;
	right: 0px;
	display: flex;
	padding: 30px 30px 0 0;
}
.home_lang, .home_b_lang {
	display: flex;
	justify-content: center;
	align-items: center;
	font: 15px 'Cabinet Grotesk', sans-serif;
    width: 42px;
    height: 27px;
	color: #00FFE5;
    border: 1px solid #00FFE5;
    border-radius: 12px;
	transform: rotate3d(0, 0, 1, -40deg); /* prevents flicker with rotate() */
	cursor: pointer;
}
.home_lang:hover, .home_b_lang:hover {
	background-color: #4794EB;
}
.home_b_lang.active {
	background-color: #4794EB;
}

.home_b_tbar {
	color: #EBEAEA;
	-webkit-text-stroke: 0.2px #56532D;
	font: 22px 'Sligoil Micro', monospace;
	line-height: 30px;
	letter-spacing: -1.98px;	
}
.home_b_tbar_b {
	display: flex;
    padding: 10px 25px;
    justify-content: center;
    align-items: center;
    border-radius: 33px;
    border: 1px solid #EBEAEA;
	background: rgba(235, 234, 234, 0.17);
	cursor: pointer;
}
.home_b_tbar_b:hover {
	background-color: #4794EB;
}

.home_b_sections {
	display: flex;
	flex-direction: column;
	gap: 20px;
	color: #EBEAEA;
	-webkit-text-stroke: 0.2px #56532D;
	font: 22px 'Sligoil Micro', monospace;
	line-height: 30px;
	letter-spacing: -1.98px;	
	margin-left: 140px;
}
.home_b_section_wrapper {
}
.home_b_section {
	display: inline-flex;
	gap: 20px;
	align-items: center;
	cursor: pointer;
}
.hbs_b {
	display: flex;
	padding: 10px 25px;
	justify-content: center;
	align-items: center;
	border-radius: 33px;
	border: 1px solid #EBEAEA;
	background: rgba(235, 234, 234, 0.17);	
}
.hbs_b:hover {
	background-color: #4794EB;
}

.text_with_circle, .text_with_circle_right {
	display: inline-flex;
	justify-content: flex-start;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}
.text_with_circle_right {
	justify-content: flex-end;
}
.blurred_circle {
	width: 36px;
	height: 36px;
	min-width: 36px;
    min-height: 36px;
	border-radius: 18px;
	transform: translate3d(0, 0, 0);  /* ??? safari fix for filter blur ??? */
	-webkit-filter: blur(8px);        /* ??? safari fix for filter blur ??? */
	filter: blur(8px);
	/*transition: filter 0.25s;*/
}
.unblurred_circle {
	width: 36px;
	height: 36px;
	min-width: 36px;
    min-height: 36px;
	border-radius: 18px;
}
.blurred_circle_green {
	background-color: #009f2d;
}
.blurred_circle_blue {
	background-color: #1100ff;
}
.blurred_circle_lightblue {
	background-color: #b1fef1;
}
.blurred_circle_yellow {
	background-color: #b6c289;
}
.blurred_circle_blackish {
	background-color: #361d1d;
}

.text_with_circle:hover, .text_with_circle_right:hover {
	.blurred_circle {
		transform: translate3d(0, 0, 0);  /* ??? safari fix for filter blur ??? */
		-webkit-filter: none;             /* ??? safari fix for filter blur ??? */
		filter: none;
	}
}

/* gradients */
.home_water_scene {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: linear-gradient(135deg, #0f172a 0%, #083344 50%, #0b1027 100%);	

	svg.svg_filter {
		position: fixed;
		top:0;
		left:0;
		width: 0;
		height: 0;
		overflow: hidden;
	}

    .gooey-layer{
      position: absolute;
      inset: 0;
      filter: url(#gooey);
    }

    .blob{
      position: absolute;
      border-radius: 9999px;
      filter: blur(64px);
      transform: translate(-50%, -50%);
      will-change: transform;
    }

    .turbulence{
      position: absolute;
      inset: 0;
      opacity: 0.40;
      filter: url(#turbulence);
      background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.10) 0%, transparent 70%);
      transform-origin: center center;
      will-change: transform;
    }

    .orb{
      position: absolute;
      border-radius: 9999px;
      filter: blur(48px);
      opacity: 0.30;
      transform: translate(-50%, -50%);
      will-change: transform;
    }
}

/* mobile */
div.header a {
	-webkit-tap-highlight-color: transparent;
	outline: none;
}

/* mobile menu */
.circle_menu {
	position: relative;
    left: 0;
    top: 10px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}
.circle_menu_svg {
	width: 48px;
	filter: drop-shadow(2px 2px 2px #000000);
	transform-origin: center;
	transform: translateY(0px) scale(1) rotate(0deg);
	transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
				filter 0.5s cubic-bezier(0.25, 1, 0.5, 1);
	will-change: transform, filter; 
}
.cmsvg_pressed {
	filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0));
	transform: translateY(2px) scale(0.98) rotate(180deg);	
}

.spec_stories_mobile ul {
	padding-left: 20px;
}

.spec_stories_mobile li {
	margin-bottom: 16px;
}

.spec_story_mobile_item {
	font: 15px 'Sligoil Micro', monospace;
	line-height: 20px;
	letter-spacing: -1.2px;
	color: #59304D;
}

.spec_stories_mobile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 90%;
	gap: 16px;
	padding-bottom: 60px;
}

.spec_stories_mobile a, .spec_stories_mobile a:link, .spec_stories_mobile a:visited, .spec_stories_mobile a:active, .spec_stories_mobile a:hover {
	border-bottom: 1px dashed;
	padding-bottom: 2px;
}


/* ------------------------------- */
/* ----- compact/mobile mode ----- */
/* ------------------------------- */

@media all and (max-width: 768px) {
	.main_home_b {align-items: flex-start; justify-content: flex-start; overflow: auto; }

	#home_center_2 { width: 100%; padding-bottom: 80px; }
	#hmc_top_circles { display:none; }
	#compact_hmc_top_circles { display: flex !important; }

	.home_b_logo { margin-top: 100px; }
	.home_logo_image { width: 160px; }

	.home_b_logo { text-align: center; }
	.home_b_tbar { flex-direction: column; margin-left:30px; font-size: 14px; line-height: 22px; letter-spacing: -0.8px; }
	.home_b_tbar_b { display: inline-flex; padding: 8px 16px; }
	.home_b_sections { font-size: 16px; margin-left: 30px; margin-right: 30px; line-height: 22px; letter-spacing: -0.8px; }
	.hbs_b { font-size: 14px; padding: 8px 16px; }

	.header_bar { padding: 0 20px; }
	.titles_circles { padding: 0 20px; margin-top: 20px; flex-direction: column; align-items: center; }
	.header_circles {
		position: fixed;
		flex-direction: row;
		width: auto;
		bottom: 32px;
		top: auto;
		right: auto;
		left: 50%;
		transform: translate(-50%, 0px);
		background: rgba(0, 0, 0, 0.06);
		padding: 10px 20px;
		border-radius: 16px;
	}

	.led_by_mobile { display: block !important; padding-left: 0; font-size: 16px; }
	.led_by_regular { display: none; }
	
	a.circle:hover + div.circle_tooltip { display: none; }

	#circle_menu { display: block !important; }

	a:has(#hdr_forum) { width: 100%; }
	.hdr_image { width: 90px; }
	.title_about, .title_roundtable, .title_contributors {
		font-size: 32px;
		font-style: normal;
		font-weight: 500;
		line-height: 32px;
		letter-spacing: -3.08px;
		-webkit-text-stroke-width: 0.2px;
		-webkit-text-stroke-color: #56532D;
	}

	.titles_toolbar { width: 100%; }
	.toolbar { justify-content: center; margin: 10px 0 !important; flex-wrap: nowrap; gap: 6px; }
	.toolbar_button { padding: 0 8px; border-radius: 16px; }

	.toolbar_snot_desktop { display: none; }
	.toolbar_snot_mobile { display: flex !important; }
	
	.content { margin: 10px 30px 80px 30px; }
	.content_wetlands_glossary { margin: 30px 10px 80px 10px; }
	.content_caostline_atlas { margin: 0; }
	.content_wetness_cosmology { margin: 10px 10px; }

	.text_with_footnotes { flex-direction: column; }
	.twf_text { height: auto !important; width: auto !important; }
	.twf_footnotes { position: static !important; width: auto !important; }
	.footnote { position: static !important; }

	/* content window */
	.content_window {
		left: 10px !important;
		right: 10px !important;
		width: auto !important;
		max-width: 600px !important;
	}

	#star_filter_box {
		left: 10px !important;
		right: 10px !important;
		width: auto !important;
		max-width: 320px !important;
	}

	#star_box {
		left: 10px !important;
		right: 10px !important;
		width: auto !important;
		max-width: 400px;
	}

	.star_box_S {
		max-width: 400px !important;
	}
	.star_box_L {
		max-width: 680px !important;
	}

	#spec_stories_desktop { display: none !important; }
	#spec_stories_mobile  { display: flex !important; }

	body.speculativefictions_fabulations {
    	background: linear-gradient(90deg, #FABEFF 0.49%, rgba(147, 242, 255, 0.80) 67.81%, rgba(95, 248, 220, 0.30) 115.15%, rgba(39, 255, 183, 0.10) 130.93%, rgba(217, 217, 217, 0.00) 148.53%), url('../images/monster.png');
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;
	}

	.s_item_title {
		font: 20px 'Sligoil Micro', monospace;
		line-height: 23px;
		letter-spacing: -2.15px;	
	}
	.s_item_author {
		font: 16px 'Sligoil Micro', monospace;
		line-height: 21px;
		letter-spacing: -2.05px;
	}	

	/* glossary toolbar */
	.toolbar_glossary .toolbar_button, .toolbar_readinglist .toolbar_button { width: auto; }
	.toolbar_glossary a, .toolbar_readinglist a { transform: none; }
	.toolbar_glossary a:nth-child(n+2), .toolbar_readinglist a:nth-child(n+2) { position: static; left: auto; }
	.toolbar_glossary a:nth-child(n+3), .toolbar_readinglist a:nth-child(n+3) { position: static; left: auto; }
	.toolbar_glossary_tr a:nth-child(n+2), .toolbar_readinglist_tr a:nth-child(n+2) { left: auto; }
	.toolbar_glossary_tr a:nth-child(n+3), .toolbar_readinglist_tr a:nth-child(n+3) { left: auto; }
	body.wetlands_glossary .titles_toolbar, body.wetlands_glossary_item .titles_toolbar, body.wetlands_readinglist .titles_toolbar {
		flex-direction: column;
	}
	.header_wetlands_glossary_item { height: 160px; }
	.glossary_item_info { margin-top: 60px; }

	.stars_container { flex: 1; }
	
	.stars_filter_button { 
		display: block !important; 
		position: fixed;
		top: 132px;
		right: 20px;
		width: 42px;
		height: 42px;
	}

	#stars_filter_wrapper {
		display: none;
		position: fixed;
		top: 180px;
		right: 20px;
		width: 320px;
        background-color: rgba(0, 0, 0, 0.75);
        padding: 20px 10px;
        border-radius: 8px;		
	}

	#stars_filter_wrapper.filter_active {
		display: block;
	}
}

@media all and (max-width: 360px) {
	.toolbar { flex-wrap: wrap; gap: 4px; }
	.toolbar_button { padding: 0 8px; border-radius: 16px; }
}

/* expedition 1 */
.map-wrapper {
	position: relative;
	display: inline-block;
	width: 100%;
	box-shadow: 0 4px 15px rgba(0,0,0,0.15);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0px 0px 20px #222222;
}
.map-wrapper .base-img {
	display: block;
	width: 100%;
	height: auto;
}
.map-wrapper .highlight-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none; 
	opacity: 0;
	transition: opacity 0.15s ease-in-out;
}
.overlay-svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
}
.map-region {
	fill: rgba(0, 0, 0, 0); 
	stroke: transparent;
	cursor: pointer;
}
/* Floating Tooltip Component */
.map-tooltip {
	position: absolute;
	z-index: 100;
	background-color: #4d5c2f;
	color: #beff3b;	
	padding: 10px 14px;
	border-radius: 4px;
	font-size: 13px;
	min-width: 160px;
	max-width: 300px;
	white-space: normal;
	line-height: 18px;
	pointer-events: none;
	box-shadow: 0 4px 8px rgba(0,0,0,0.3);
	opacity: 0;
	transition: opacity 0.15s ease-in-out;
}
.map-tooltip.active {
	opacity: 1;
}
/*
.map-tooltip::after {
	content: "";
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%);
	border-width: 5px 5px 0;
	border-style: solid;
	border-color: rgba(33, 37, 41, 0.95) transparent;
}
*/

.expedition_link_list { line-height: 34px; }

/* ----------------- */
/* ----- fonts ----- */
/* ----------------- */

/* --- Sligoil Micro --- */
/* font-family: 'Sligoil Micro', monospace; */

@font-face {
  font-family: 'Sligoil Micro';
  src: url('../fonts/Sligoil-Micro.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
	font-family: 'Sligoil Micro';
	src: url('../fonts/Sligoil-MicroMedium.otf') format('opentype');
	font-weight: 500;
	font-style: normal;
}
@font-face {
  font-family: 'Sligoil Micro';
  src: url('../fonts/Sligoil-MicroBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

/* --- Cabinet Grotesk --- */
/* font-family: 'Cabinet Grotesk', sans-serif; */

@font-face {
	font-family: 'Cabinet Grotesk';
	src: url('../fonts/CabinetGrotesk-Thin.otf') format('opentype');
	font-weight: 100;
	font-style: normal;
}
@font-face {
	font-family: 'Cabinet Grotesk';
	src: url('../fonts/CabinetGrotesk-Extralight.otf') format('opentype');
	font-weight: 200;
	font-style: normal;
}
@font-face {
	font-family: 'Cabinet Grotesk';
	src: url('../fonts/CabinetGrotesk-Light.otf') format('opentype');
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'Cabinet Grotesk';
	src: url('../fonts/CabinetGrotesk-Regular.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'Cabinet Grotesk';
	src: url('../fonts/CabinetGrotesk-Medium.otf') format('opentype');
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: 'Cabinet Grotesk';
	src: url('../fonts/CabinetGrotesk-Bold.otf') format('opentype');
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: 'Cabinet Grotesk';
	src: url('../fonts/CabinetGrotesk-Extrabold.otf') format('opentype');
	font-weight: 800;
	font-style: normal;
}
@font-face {
	font-family: 'Cabinet Grotesk';
	src: url('../fonts/CabinetGrotesk-Black.otf') format('opentype');
	font-weight: 900;
	font-style: normal;
}

/* ----- end of fonts ----- */