/**//**//**//**//**//**//**//**//**//**//**//**//**//**/

/** this is a global stylesheet for ALAFLORA.NET **//**/

/**//**//**//**//**//**//**//**//**//**//**//**//**//**/

/**/
/**//** FONTS **/
/**/

@font-face {
	font-family: "Noto Symbols";
	src:
		local("Noto Sans Symbols 2"),
		url("/assets/fonts/NotoSansSymbols2-Regular.ttf") format("truetype");
}

@font-face {
	font-family: "Noto Emoji";
	src:
		local("Noto Emoji"),
		url("/assets/fonts/NotoEmoji-Bold.ttf") format("truetype");
}

@font-face {
	font-family: "Work Sans";
	src:
		url("/assets/fonts/WorkSans.ttf") format("truetype");
	font-style: normal;
	font-feature-settings: "ss01", "ss03", "ss04";
}

@font-face {
	font-family: "Work Sans";
	src:
		url("/assets/fonts/WorkSans-Italic.ttf") format("truetype");
	font-style: italic;
	font-feature-settings: "ss03", "ss04";
}

@font-face {
	font-family: "Gabarito";
	src:
		url("/assets/fonts/Gabarito-VariableFont_wght.ttf") format("truetype"),
		local("Gabarito");
	font-feature-settings: "ss01" off, "ss03" off, "ss04" off;
	font-style: normal;
}

@font-face {
	font-family: "Tektur";
	src:
		url("assets/fonts/Tektur-VariableFont_wdth\,wght.ttf") format("truetype");
}


/**/
/**//** VARIABLES **/
/**/

:root {
	/*fonts*/
		--body-font: "Work Sans", sans-serif;
		--display-font: "Gabarito", sans-serif;
			--display-below-baseline: 0.23em;
	
	/*colors*/
		--neutral-1: #887147;    --n1h: 40;  --n1s: 31;  --n1l: 41;
		--neutral-2: #d6baa1;    --n2h: 28;  --n2s: 39;  --n2l: 74;
		--neutral-3: #faeee2;
		--neutral-dark-1: #4d3f3b;
		--blue-1:    #0a7ed1;    --b1h: 205; --b1s: 91;  --b1l: 43;
		--blue-2:    #00b6ef;    --b2h: 194; --b2s: 100; --b2l: 47;
		--deep-blue-1: #284273;
	--pale-blue-1: #e0efff;
	--gray-teal-1: #63acb8;
		--orange-1:  #ff6700;    --o1h: 24;  --o1s: 100; --o1l: 50;
		--orange-2:  #ffa600;    --o2h: 39;  --o2s: 100; --o2l: 50;
		--ochre-1:   #c78710;    --o3h: 45;  --o3s: 100; --o3l: 37;
		--green-1:   #18a300;    --g1h: 111; --g1s: 100; --g1l: 32;
		--green-2:   #91b336;    --g2h: 76;  --g2s: 54;  --g2l: 46;
		--pink-1:    #ea384c;    --p1h: 353; --p1s: 81;  --p1l: 57;
		--pink-2:    #ff6e72;    --p2h: 358; --p2s: 100; --p2l: 72;
		--pink-3:    #a30044;    --p3h: 355; --p3s: 100; --p3l: 32;
	--pale-red-1: #fae2e2;
		--violet-1:  #ce7aff;    --v1h: 278; --v1s: 100; --v1l: 74;
		--violet-2:  #e5b5ff;    --v2h: 279; --v2s: 100; --v2l: 86;
		--violet-3:  #9f1cff;    --v3h: 275; --v3s: 100; --v3l: 56;
		--pale-green-1: #d1dab1;

			--color-1: var(--neutral-1);
			--color-2: var(--neutral-2);
			--color-3: var(--blue-1);
			--color-4: var(--blue-2);
			--color-5: var(--orange-1);
			--color-6: var(--ochre-1);
			--color-7: var(--green-1);
			--color-8: var(--green-2);
			--color-9: var(--orange-2);
			--color-10: var(--pink-1);
			--color-11: var(--pink-2);
			--color-12: var(--pink-3);
			--color-13: var(--violet-1);
			--color-14: var(--violet-2);
			--color-15: var(--violet-3);
			--color-16: var(--neutral-3);
			--color-17: var(--pale-blue-1);
			--color-18: var(--pale-red-1);
			--color-19: var(--pale-green-1);
			--color-20: var(--neutral-dark-1);
			--color-21: var(--gray-teal-1);

			--page-special-color: var(--active-page-marker-color); /*accent fallback*/
			--page-accent-color: var(--page-special-color-opposite);
			--dark-mixing-color: #001a66;

				--page-special-color-darker:
						color-mix(in oklch shorter hue, var(--page-special-color) 100%, var(--dark-mixing-color) 100%);
				--page-special-color-lightish:
						color-mix(in oklch shorter hue, var(--page-special-color) 100%, white 55%);
				--page-special-color-lightish-grayish:
						color-mix(in oklch shorter hue, var(--page-special-color-lightish) 80%, var(--main-body-text-color) 40%);
				--page-special-color-lighter:
						color-mix(in oklch shorter hue, var(--page-special-color) 100%, white 100%);
				--page-special-color-light:
						color-mix(in oklch shorter hue, var(--page-special-color) 30%, white 100%);
				--page-special-color-opposite:
						color-mix(in oklch longer hue, var(--page-special-color) 100%, var(--dark-mixing-color) 70%);

				--body-background-color: white;
				--main-body-text-color: var(--color-1);
				--main-link-color: var(--page-special-color-darker);
				--main-link-hover-color: var(--page-special-color);
				--icon-color: var(--page-special-color);
				--heading-color: var(--color-6);
				--list-marker-color: var(--page-special-color);
				--active-page-marker-color: var(--color-5);
				--nav-link-color: var(--color-3);
				--header-bluesky-icon-color: var(--nav-link-color);
				--header-colon-upper-color: var(--col-u);
				--header-colon-lower-color: var(--col-l);
							--col-u: var(--page-special-color);
							--col-l: var(--nav-link-color);
				--footer-text-color: var(--color-6);
				--back-button-color: var(--page-special-color);
				--page-figcaption-color: var(--page-special-color-darker);
				--page-figcaption-pseudo-color: var(--main-body-text-color);
				--aside-color: var(--page-accent-color);
				--weak-text-color: var(--color-2);
				--archive-color: var(--color-20);
				--archive-color-pale: var(--archive-button-color);
				--archive-button-color: var(--heading-color);
				--outgoing-archive-link-hover: var(--color-17);
				--archive-nav-buttons: var(--color-21);
					--archive-prev-button: var(--archive-nav-buttons);
					--archive-return-button: rgb(224, 166, 184);
					--archive-next-button: rgb(83, 177, 237);
				--link-tap-color: color-mix(in srgb, var(--page-special-color-lighter) 30%, transparent);




	/*icons*/
		--bluesky-icon-url: url(/assets/bluesky.svg);
			--bluesky-icon-ratio: 1.133732535;
			/* NO idea why but multiplying by 1.01 fixes clipping on ipad??? ¯\_(ツ)_/¯ --2025-10-11 */
			/* o kurka wodna, to ten snippet kodu na (pointer: coarse) psuł!!!! set and forget (and break)
			nauczka na przyszłość --2025-10-12 */
		--instagram-icon-url: url(/assets/instagram.svg);
			--instagram-icon-ratio: 1;
		--cara-icon-url: url(/assets/cara.svg);
			--cara-icon-ratio: 0.75;
		--arrow-left-sq: url(/assets/arrow_back_24dp_000000_FILL0_wght500_GRAD200_opsz24.svg);

	/*sizes/lenghts*/
			--paragraph-font-size-multiplier: 1;
		--paragraph-font-size: calc(1rem * var(--paragraph-font-size-multiplier));
		--line-height: 1.15;
		--paragraph-line-height: 1.4;
		--paragraph-margin-top: calc(var(--paragraph-line-height) * var(--paragraph-font-size) * 0.5);
		--smaller-aside-font-size-multiplier: 0.8;
			--smaller-aside-font-size: calc(1em * var(--smaller-aside-font-size-multiplier));
		--link-underline-offset: 0.14em;
		--link-decoration-thickness: 0.057em;
		--header-font-size-multiplier: 1.6;
			--header-font-size: calc(1rem * var(--header-font-size-multiplier));
		--header-title-line-height: var(--line-height);
		--header-bluesky-icon-width: calc(var(--header-sidebar-width) / 3);
		--header-link-margin-top: 0.5rem; /* 0.4em? */
										/* figure out how to strip unit from this so i can use it in calc on that height of #my-face. it needs to stay rem until em until then at least --2025-09-22 */
		--nav-li-line-height: 0.85;
			--footer-font-size-multiplier: 0.8;
		--footer-font-size: calc(1rem * var(--footer-font-size-multiplier));
		--footer-line-height: 1.3;
		--footer-line-height-shrug: calc(var(--footer-line-height) * 1.1);
		--footer-line-height-real: calc(var(--footer-font-size) * var(--footer-line-height-shrug));
		--footer-height: calc(var(--footer-line-height-real) * 3);
		--art-details-figure-gap: 0.91vw;
		--main-padding-left: 2rem;
		--copyright-grid-cell-width: calc(var(--footer-font-size) * 1.3);
			--figcaption-font-size-multiplier:
				calc(var(--paragraph-font-size-multiplier) * var(--smaller-aside-font-size-multiplier));
			--figcaption-line-height: var(--line-height);
			--technical-details-line-height: var(--figcaption-line-height);
			--technical-details-font-size: var(--paragraph-font-size);
		--figcaption-font-size: calc(1em * var(--figcaption-font-size-multiplier));
		--archive-supplement-width: calc(var(--main-margin-left) - var(--body-padding-left));
		--imgset-column-gap: var(--art-details-figure-gap);
		--header-offset-top-multiplier: 0.35;
			--header-offset-top: calc(1em * var(--header-offset-top-multiplier));
			--header-offset-top-rem: calc(var(--header-font-size-multiplier) * var(--header-title-line-height) * var(--header-offset-top-multiplier) * 1rem);
			--header-offset-title-bottom: calc(var(--header-offset-top-rem) * 0.37); 
		--heading-line-height: 0.78;
		--heading-margin-bottom: calc(1.3 * var(--paragraph-margin-top));
		--button-border-width: 0.15rem;
		--button-border-radius: 0.15rem;
		--main-width: calc(100% - var(--main-margin-left));
		--archive-meta-button-height: 2rem;
		--archive-nav-block-height: 0em;

	/*weights*/
		--body-font-weight: 400;
		--body-font-weight-bold: 550;
		--display-bold: 500;
		--heading-font-weight: 700;
		--header-font-weight: calc(var(--body-font-weight) * 0.9);
		--nav-li-font-weight: 800;

	--archive-border: solid var(--button-border-width);
	--hover-color-transition: 0.08s;

}
		:root:has(main.art-details) {
			/* --main-width: calc(100% - var(--main-margin-left)); */
		}
		/* :root:not(:has(p)) {
			--figcaption-font-size-multiplier: var(--paragraph-font-size-multiplier);
		} */
		:root:has(archive-navigation.show) {
			--col-u: var(--archive-return-button);
			--col-l: var(--archive-prev-button);
		}

@media (min-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
	:root {
		/* --body-padding-top: 2.5rem; */
		--body-padding-top: 10vh;
		--body-padding-bottom: 2rem;
		--body-padding-left: 2.5rem;
		--body-padding-right: 3rem;
		--header-sidebar-width: calc(var(--header-font-size) * 4.68);
		--header-title-height: calc(var(--header-font-size) * var(--header-title-line-height) * 2 - var(--header-offset-top-rem) - var(--header-offset-title-bottom));
		--header-height-outgoing-archive:
				calc(var(--header-title-height) + var(--header-offset-title-bottom) + 4 * var(--header-link-margin-top) + var(--header-font-size) * var(--nav-li-line-height) * 5);
		--header-height:
				calc(var(--header-title-height) + var(--header-offset-title-bottom) + var(--header-font-size) * 7.35);
				/* calc(var(--header-title-height) + var(--header-offset-title-bottom) + 4 * var(--header-link-margin-top) + var(--header-font-size) * var(--nav-li-line-height) * 6); */
			--header-height-w-bsky:
				calc(var(--header-height) + var(--header-bluesky-icon-width) * var(--bluesky-icon-ratio) + var(--header-bluesky-icon-margin-top));
		--header-bluesky-icon-margin-top: calc(var(--header-link-margin-top) * 1.8);
		--header-bluesky-icon-margin-left: calc((var(--header-sidebar-width) - var(--header-bluesky-icon-width)) / 3);
		--second-sidebar-width: calc(var(--header-sidebar-width) * 0.75);
		--vertical-footer-width: 1.9rem;
		--main-margin-left:
			calc(var(--body-padding-left) + var(--header-sidebar-width) + var(--second-sidebar-width));
		--contact-icon-width: 2.5rem;
		--heading-font-size: var(--header-font-size);
		--article-width: 28rem;
		--main-padding-right: var(--body-padding-right);
			--main-padding-right-when-big-background-present: var(--main-padding-left);
		--big-background-on-side-width: calc(100vw - var(--main-padding-right-when-big-background-present) - var(--main-margin-left) - var(--article-width) - var(--main-padding-left) - calc(100vw - 100%));
		--archive-meta-button-font-size: calc(var(--body-padding-top) / 2.5);
		--art-details-img-max-width: calc(var(--main-width) - var(--main-padding-left) - var(--body-padding-right));

			/* --main-body-width: calc(100vw - var(--body-padding-left) - var(--body-padding-right) - var(--header-sidebar-width#archive-meta) - var(--second-sidebar-width) - var(--vertical-footer-width)); */
				/* mam problem z tym powyżej. nie wiem o co chodzi, że nie działa vw w tym, chyba że przenoszę bezpośrednio do selektora main. trudne, confusing --2025-09-18 */
	}
	:root:has(main.image-gallery-tiled) {
		--main-width: calc(100vw - var(--main-margin-left));
	}
}
@media (min-aspect-ratio: 0.75 /*brkpnt-mobile*/) and (max-aspect-ratio: 1.35 /*brkpnt-gallery*/) {
	:root {
		--footer-height: calc(var(--footer-line-height-real) * 4);
		--body-padding-right: 1.5rem;
		--main-padding-left: calc(1.3 * var(--body-padding-left));
		--main-margin-left: calc(var(--body-padding-left) + var(--header-sidebar-width));
		--archive-supplement-width: calc(var(--main-margin-left) - var(--body-padding-left) + var(--main-padding-left));
		/* --art-details-figure-gap: calc(0.5 * var(--paragraph-margin-top)); */
	}
}
:root:has(:where(main.art-details, #web-dir)) {
	--art-accent-color: var(--page-accent-color);
	--col-l: var(--art-accent-color);
}
@media (min-height: 45rem) { :root { --body-padding-top: 7.5vh; } }
@media (min-height: 50rem) { :root { --body-padding-top: 6.5vh; } }

/* im moving the below to javascript because in instagram app browser it recalculates height when the toolbars disappear.
and then eveything shifts because new font size.
if i do it with js its gonna calculate once per load?? --2025-10-20 */
/* @media (max-aspect-ratio: 1.35 /*brkpnt-gallery* /) and (min-height: 45rem) and (orientation: landscape) {
	:root {
		font-size: 115%;
		--header-font-size-multiplier: 1.7;
	}
	@media (min-height: 50rem) {
		:root {
			font-size: 125%;
			--header-font-size-multiplier: 1.8;
		}
	}
} */

/* var mobile var */
@media (max-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
	:root {
		--header-font-size-multiplier: 1.9;
		--header-link-margin-top: 1.4rem;
		--header-background-color: var(--body-background-color);
		--nav-li-font-weight: 860;
		--mobile-header-height-nounit: 1.75;
			--mobile-header-height: calc(1em * var(--mobile-header-height-nounit));
			--mobile-header-height-rem: calc(1rem * var(--header-font-size-multiplier) * var(--mobile-header-height-nounit));
			--mobile-header-padding-top: 0.53rem;
			--mobile-header-padding-bottom: 1rem;
		--body-padding-top: var(--mobile-header-height-rem);
		--body-padding-left: 1.4rem;
		--body-padding-right: /* 1.7rem */ 1.4rem;
		--body-padding-bottom: 2rem;
		--contact-icon-width: 2.5rem;
		--heading-font-size: 1.4rem;
		--mobile-header-unroll-speed: 150ms;
		--art-details-figure-gap: var(--paragraph-margin-top);
		--active-page-marker-color: var(--color-9);
		--archive-color: var(--heading-color);
		--archive-color-pale: var(--color-19);
		/* --outgoing-archive-link-hover: var(--color-17); */
		/* --nav-link-color: var(--main-body-text-color); */
		/* --page-special-color: var(--color-3); */
		--main-width: 100%;
		--art-details-img-max-width: var(--main-width);
	}
	:root:has(archive-navigation.show):not(:has(back-button-wrapper.archive-back-button-wrapper)):not(:has(header.expand-mobile)) {
		--archive-nav-block-height: var(--mobile-header-height-rem);
		--body-padding-bottom: calc(var(--mobile-header-height-rem) + var(--paragraph-margin-top));
	}
}

/* fallback */
@supports not (color:	color-mix(in oklch decreasing hue, var(--page-special-color) 100%, var(--main-body-text-color) 100%))	{
	:root {
		--page-special-color-darker: var(--page-special-color);
	  --page-special-color-lighter: var(--color-2);       
	  --page-special-color-light: #f7eed0;
	}
}
	
/**/
/**//** LAYOUT **/
/**/


html {
	box-sizing: border-box;
	-webkit-tap-highlight-color: var(--link-tap-color);
} 
no-script {
	display: none;
}
ala-header {
	display: contents;
}
body {
	margin: 0;
	position: absolute;
	top: 0;
	width: 100%;
	min-height: 100%;
	padding: 0;
	overflow-x: hidden;
	background-color: var(--body-background-color);
}
main {
	position: absolute;
	top: 0;
	overflow-x: hidden;
}
header, footer {
	position: fixed;
}
.print {
	display: none;
}
.active-page-marker {
	display: none;
}


/*desktop*/
@media (min-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
	.mobile {
		display: none !important;
	}
	header {
		left: var(--body-padding-left);
		top: calc(var(--body-padding-top) - var(--header-offset-top));
		overflow: visible;
	}
	back-button-wrapper {
		left: calc(var(--body-padding-left) + var(--header-sidebar-width));
		top: var(--body-padding-top);
		overflow: visible;
		position: fixed;
	}
	main {
		margin-left: var(--main-margin-left);
		width: var(--main-width);
		padding-left: var(--main-padding-left);
		min-height: 100dvh;
	}
														@supports not (min-height: 100dvh) { main { min-height: 100vh; } }
		rotate-img {
			display: none;
		}
		main.page-content {
			padding-top: var(--body-padding-top);
			padding-right: var(--body-padding-right);
			padding-bottom: var(--body-padding-bottom);
		}
		back-button-wrapper:has(archive-navigation.show) ~ main.art-details {
			/* for the overflow:hidden to look correctly when swiping */
			margin-left: calc(var(--main-margin-left) + var(--main-padding-left));
			padding-left: 0;
			width: calc(var(--main-width) - var(--main-padding-left));
		}
		main.narrow {
			max-width: calc(var(--main-width) - var(--big-background-on-side-width));
		}
		.page-heading-image-short {
			height: calc(var(--header-font-size) * 7.1);
			/* max-width: calc(100vw - var(--main-margin-left) - var(--main-padding-left)); */
			max-width: unset;
		}
	footer {
		left: calc(var(--body-padding-left) - var(--copyright-grid-cell-width));
		bottom: var(--body-padding-bottom);
	}
	.hide-on-desktop {
		display: none;
	}
	/* .squish-width {
		width: 100%;
		contain: inline-size;
	} */
}	
	@media (min-height: 50rem) {
	}
	@media (min-aspect-ratio: 0.75 /*brkpnt-mobile*/) and (max-aspect-ratio: 1.35 /*brkpnt-gallery*/) {
			back-button-wrapper {
				position: absolute;
				left: calc(var(--body-padding-left) + var(--main-padding-left) + var(--header-sidebar-width));
				top: var(--body-padding-top);
				height: var(--header-title-height);
				width: auto;
			}
			main.page-content.from-internal-link {
				padding-top: calc(var(--body-padding-top) + var(--header-title-height));
			}
	}
	@media (min-aspect-ratio: 0.75 /*brkpnt-mobile*/) and (max-aspect-ratio: 1.5 /*brkpnt-imgpad*/) {
		article.art-details figure.art-details /* picture */,
		article.art-details img-set {
			/* width: calc(100% + var(--body-padding-right)); */
			margin-right: calc((-1 * var(--body-padding-right)) /* + var(--scrollbar-width) */);
			--art-details-img-max-width: calc(var(--main-width) - var(--main-padding-left));
		}
	}

/* big background on side */
.big-background-on-side { display: none; pointer-events: none; }
@media (min-width: 52.5rem) {
	main.page-content ~ .big-background-on-side {
		display: block;
		position: fixed;
		height: 100lvh;
		right: 0;
		bottom: 0; /* bottom instead of top to prevent shifing on ipad --2025-10-07 */
		width: var(--big-background-on-side-width);
		background-size: cover;
	}
	main.image-gallery-tiled ~ .big-background-on-side {
		display: block;
		/* background-image: unset !important; */
		width: 0;
		height: 0;
		visibility: hidden;
	}
}
@media (min-width: 1250px) {
	:root {
		--main-padding-right-when-big-background-present: 3.5rem;
		--body-padding-left: 7vw;
	}
	.big-background-on-side::before {
		display: block;
		content: "";
		background-size: cover;
		position: fixed;
		height: 100lvh;
		bottom: 0;
		left: calc(-1 * (var(--big-background-on-side-width) - var(--body-padding-left) + var(--main-padding-right-when-big-background-present)));
		width: var(--big-background-on-side-width);
		transform: scaleX(-1);
		visibility: visible;
	}
}
@supports not (height: 100lvh) {
	.big-background-on-side, .big-background-on-side::before {
		height: 100vh;
	}
}
@media (hover: hover) {
	.big-background-on-side {
		pointer-events: auto;
	}
	.big-background-on-side::before {
		pointer-events: none;
	}
}

@media (max-height: 430px) {
	ala-footer {
		display: none;
	}
}
/*desktop end*/

/*layout mobile layout*/
@media (max-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
	.desktop {
		display: none !important;
	}
	body {
		position: fixed;
		height: 100dvh;
		overflow: hidden;
	}
										@supports not (height: 100dvh) { body { height: 100vh; } }
	main {
		overflow-y: scroll;
		bottom: 0;
		margin-top: var(--body-padding-top);
		padding-bottom: var(--body-padding-bottom);
		padding-left: var(--body-padding-left);
		padding-right: var(--body-padding-right);
		/* margin-bottom: var(--main-margin-bottom); */
		width: 100%;
		/* min-height: calc(100vh - var(--body-padding-top));
			@supports (height: 100svh) { min-height: calc(100svh - var(--body-padding-top)); }
		max-height: fit-content; */
		height: calc(100% - var(--body-padding-top));
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
		.page-content > article:not(.art-details) { align-self: start; }
		.page-content article:not(.art-details, :has([class|="page-heading-image"])) { margin-top: var(--paragraph-margin-top); }

		main.image-gallery-tiled {
			padding-bottom: 0;
		}
		.mobile-full-width, .big-gallery, :is(figure, picture, img).art-details {
			margin-left: calc(-1 * var(--body-padding-left));
			margin-right: calc(-1 * var(--body-padding-right));
			width: 100vw;
			display: block;
			--art-details-img-max-width: 100vw;
		}
		/* .spot-center-mobile {
			position: relative;
			left: 0.3rem;
		} */
			figure.art-details figcaption {
				padding-left: var(--body-padding-left);
				padding-right: var(--body-padding-right);
			}
			figure.art-details picture {
				width: 100%;
				display: block;
			}
	footer {
		display: none;
	}
		footer.display-mobile {
			display: grid;
			z-index: 4;
			left: var(--body-padding-left);
			bottom: var(--body-padding-bottom);
		}
	footer:not(.display-mobile) {
	  position: absolute;  
	  width: 1px;  
	  height: 1px;  
	  padding: 0;  
	  margin: -1px;  
	  overflow: hidden;  
	  clip: rect(0, 0, 0, 0);  
	  white-space: nowrap;  
	  border: 0;
	}
	#hamburger:not(.display-mobile),
	#close-nav-button:not(.display-mobile) {
		display: none;
	}
}
@media (max-aspect-ratio: 0.75 /*brkpnt-mobile*/) and (orientation: landscape) {
	footer.display-mobile, rotate-img {
		display: none;
	}
}
/*mobile end*/


/**/
/**//** GLOBAL/GENERAL **/
/**/

body {
	font-family: var(--body-font); 
	font-weight: var(--body-font-weight);
	font-style: normal;
	color: var(--main-body-text-color);

	text-rendering: optimizeLegibility !important;
	font-synthesis: none !important;
	font-feature-settings: "ss01", "ss03", "ss04";
			/* this is bandaid for CHROME. it doesn't support font-feature-settings in @font-face?? it only should work bc i want ss01 and ss03 both on for Work Sans and Tektur. I also want ss04 for Work Sans but not Tektur but alas. bad bad bad!!! 2025-09-14 */
			/* tektur out so adding ss04 to bandaid --2025-10-16 */
}

.noshow {display: none !important; }
:where(.show) {display: revert}
:where(art-desc) {display: block;}

.wrapper-width { width: 100%; }

*, *::before, *::after {
	box-sizing: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	padding: 0;
}

::selection {
	background-color: var(--page-special-color);
	color: white;
}

figure, img {
	display: block;
	padding: 0;
	margin: 0;
}

img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;

	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.icon {
	font-size: 0;
	user-select: none;
	-webkit-user-select: none;
}
.icon::after, .icon::before {
	font-family: "Material Symbols Sharp";
	font-feature-settings: "liga";
	font-variation-settings:
		'FILL' 0,
		'GRAD' 200,
		'opsz' 20;
}
	
a, a::after, a::before,
.anchor-style, .anchor-style::after, .anchor-style::before {
	color: var(--main-link-color);
	text-decoration-thickness: var(--link-decoration-thickness);
	text-underline-offset: var(--link-underline-offset);
}
	a:hover, a:hover::after, a:hover::before,
	.anchor-style:hover, .anchor-style:hover::after, .anchor-style:hover::before {
		color: var(--main-link-hover-color);
		text-decoration-thickness: var(--link-decoration-thickness);
		text-underline-offset: var(--link-underline-offset);
	}
a, button.anchor-style {
	text-decoration-style: dotted;
	transition: color 0.08s, text-decoration-thickness 0.08s, text-underline-offset 0.08s, text-decoration-color 0.05s;
	text-decoration-thickness: 0.08em;
	text-decoration-color: var(--page-special-color);
	text-decoration-skip-ink: none;
	user-select: text;
	-webkit-user-select: text;
}

a.page-spot-illo {
	-webkit-tap-highlight-color: transparent;
}
@media (hover: none) {
	a.page-spot-illo:where(:active, :hover) {
		transform: scale(0.95);
	}
}

	a:hover, .anchor-style:hover {
		/* text-decoration-thickness: calc(var(--link-decoration-thickness) * 2.2); */
		/* transition: text-decoration-thickness 0.1s; */
		text-decoration-style: dotted;
		color: var(--main-link-hover-color);
		text-decoration-color: var(--page-special-color-lighter);
		text-decoration-thickness: 0.15em;
		transition: color var(--hover-color-transition), text-decoration-thickness 0.08s, text-decoration-skip-ink 0.08s;
		text-underline-offset: 0.1em;
		/* text-decoration-thickness: calc(var(--link-decoration-thickness) * 2.2); */
		/* text-decoration-color: var(--page-accent-color); */
		/* text-decoration-skip-ink: none; */
	}
	@media (hover: hover) {
		button {
			transition: color var(--hover-color-transition), all 0.08s;
		}
		path, svg {
			transition: fill var(--hover-color-transition), transform 0.04s ease-in-out;
		}
	}
	p :is(a, .anchor-style):hover {
		color: var(--main-link-color);
	}
			@supports not (text-decoration-thickness: 0.1em) {
				a:hover, .anchor-style:hover {
					color: var(--main-link-hover-color);
				}
			}
button.anchor-style {
	text-decoration-line: underline;
}
@media (hover: none) {
	@supports (-webkit-tap-highlight-color: var(--link-tap-color)) {
		button.anchor-style {
			position: relative;
		}
		button.anchor-style:where(:active, :hover)::after {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			background-color: var(--link-tap-color);
		}
	}
}
.stealth-link, .stealth-link:hover, stealth-link:active {
	font-size: inherit;
	color: inherit;
	text-decoration: inherit;
	font-weight: inherit;
}

strong {
	font-weight: var(--body-font-weight-bold);
	font-size: 1.2em;
}

em {
	font-style: italic;
}
.underline {
	text-decoration-line: underline;
}
.no-txt-transform {
	text-transform: initial;
}

/* @media (pointer: coarse) {
	:is(a, button):not(nav a, :has(img, svg)) {
	  display: inline-block;
	  position: relative;
	  z-index: 1;
	  padding: 0.5em;
	  margin: -0.5em;
	}
} */
/* GODAMIT once time bear the begging i randomly pasted it from online, didn't think hard about it, and forgot;
today i lost so much time trying to figure out what was destroying the layout on ipad --2025-10-12 */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--display-font); font-feature-settings: "ss01" off, "ss03" off, "ss04" off;
	font-weight: var(--heading-font-weight);
	font-size: var(--heading-font-size);
	line-height: var(--heading-line-height);
	color: var(--heading-color);
}

ul:not(.page-content ul, p + ul) {
	list-style: none;
	padding: 0;
	margin: 0;
}

p {
	margin: 0;
	line-height: var(--paragraph-line-height);
	size: var(--paragraph-font-size);
}
:is(p, article figure, article div, art-desc):not(:first-child),
/* div:not(:first-child)[itemprop] :is(p, article figure), */
dl div {
	margin-top: var(--paragraph-margin-top);
	margin-bottom: 0;
}

article, .article-width {
	max-width: var(--article-width);
	width: 100%;
}

*:not([hidden]) + section/* , details:not(:first-child) */ {
	margin-top: calc(1em * var(--paragraph-line-height));
}

p + ul, p + ol, p.list-above {
	margin-top: calc(var(--paragraph-margin-top) * 0.30);
	margin-bottom: 0;
}

main ul {
	padding-left: 1.5em;
	list-style: square;
}
	main ul li::marker {
		content: "•\2007";
		font-family: "Tektur";
		font-size: 0.7em;
		font-weight: bolder;
		color: var(--list-marker-color);
	}
li, dt, dd {
	line-height: calc(var(--paragraph-line-height) * 1.05);
}

aside {
	font-size: var(--smaller-aside-font-size);
	margin: calc( 1.2 * var(--paragraph-margin-top)) 0 calc( 1.2 * var(--paragraph-margin-top)) calc( 1.7 * var(--paragraph-margin-top));
}
	aside:last-child {
		margin-bottom: 0;
	}
aside.strong-aside {
	font-weight: var(--body-font-weight-bold);
	font-style: italic;
	color: var(--aside-color);
}
aside a {
	color: inherit;
	text-decoration-color: inherit;
}
	aside a:hover {
		color: var(--main-link-hover-color);
	}

details > summary {
	list-style: none;
	cursor: pointer;
}
details > summary::marker,
details > summary::-webkit-details-marker {
	display: none;
}
summary::before {
	content: "→";
	display: inline-block;
	width: 1.2em;
}
details:is(:open, [open]) summary::before {
	content: "↘";
	display: inline-block;
	width: 1.2em;
	/* position: relative; */
}

.accent-text-button {
	color: var(--main-link-color);
	font-family: var(--display-font); font-feature-settings: "ss01" off, "ss03" off, "ss04" off;
	font-size: var(--smaller-aside-font-size);
	font-weight: var(--display-bold);
	border: var(--page-special-color-light) solid var(--button-border-width);
	border-radius: var(--button-border-radius);
	corner-shape: bevel;
	display: inline-block;
	padding: 0 0.4em;
}
.accent-text-button:hover {
	color: var(--main-link-hover-color);
}
.accent-text-button:active {
	background: var(--page-special-color-light);
}

figcaption {
	font-size: var(--figcaption-font-size);
	line-height: var(--figcaption-line-height);
}


button {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
	-webkit-tap-highlight-color: transparent;
}

p cite {
	font-style: italic;
}

.no-break {
	white-space: nowrap;
}
	
.inline {
	display: inline;
}
.bold {
	font-weight: var(--body-font-weight-bold);
}
.italic {
	font-style: italic;
}
.smaller {
	font-size: var(--smaller-aside-font-size);
}
.weak {
	color: var(--weak-text-color);
}
.art-accent-color {
	color: var(--art-accent-color);
}
.page-accent-color {
	color: var(--page-accent-color);
}
.noto-emoji {
	font-family: "Noto Emoji";
	cursor: default;
}
noto-symbol {
	font-family: "Noto Symbols";
	cursor: default;
}
:where(.picto-closer, .arrow-cursor)::selection,
:where(.picto-closer, .arrow-cursor) *::selection {
	background-color: transparent;
}
.arrow-cursor {
	cursor: default;
}
.page-accent-color {
	color: var(--page-accent-color);
}

.no-selection-highlight::selection {
	background-color: transparent;
}

.no-select {
	user-select: none;
	-webkit-user-select: none;
}

button.copy-email::before {
	font-size: calc( 1.2 * var(--paragraph-font-size));
	content: "content_copy";
	font-family: "Material Symbols Sharp";
	font-feature-settings: "liga";
	font-variation-settings:
		'FILL' 0,
		'wght' 280,
		'GRAD' 200,
		'opsz' 20;
	display: inline-block;
	color: var(--main-link-color);
	position: relative;
	left: 0.2em;
	top: 0.24em;
	transition: font-variation-settings 0.005s;
}
button.copy-email:hover::before {
	font-variation-settings:
		'FILL' 0,
		'wght' 520,
		'GRAD' 200,
		'opsz' 20;
	transition: font-variation-settings 0.005s;
}
button.copy-email:active::before {
	font-variation-settings:
		'FILL' 0,
		'wght' 520,
		'GRAD' 200,
		'opsz' 20;
	transform: skew(5deg, 6deg);
}

/* when i want e.g. whitespace to be present on page, for example for copy paste purposes, simply because it belongs in the flow of the text, but don't want it visble (e.g. when i replaced it visually with pseudoelements) 2025-09-15 */
.invisible-text {
	/* color: transparent; */
	/* display: inline-block; */
	/* width: 0; */
		/* height: 0; */
	font-size: 0;
}	
.invisible-text::selection {
	background-color: transparent;
}

.outgoing::after {
	content: "↗";
	display: inline;
	font-size: 1.25em;
	position: relative;
	top: 0.1em;
	right: 0.13em;
	/* content: "arrow_outward";
	font-family: "Material Symbols Sharp";
	font-feature-settings: "liga";
	font-variation-settings:
		'FILL' 0,
		'wght' 700,
		'GRAD' 200,
		'opsz' 20; */
}

.sr-only {  
  position: absolute;  
  width: 1px;  
  height: 1px;  
  padding: 0;  
  margin: -1px;  
  overflow: hidden;  
  clip: rect(0, 0, 0, 0);  
  white-space: nowrap;  
  border: 0;
}
/*•*/
/*•*/
/*•*/
/*•*/ /*----------------*/

/* header */

header {
	white-space: nowrap;
}

header *[id|="header-title"], header *[id|="header-title"]:hover {
	/* cursor: default; */
	display: block;
	font-weight: var(--header-font-weight);
}

:where(.picto-closer, .arrow-cursor)::selection,
:where(.picto-closer, .arrow-cursor) *::selection {
	background-color: transparent;
}
.arrow-cursor {
	cursor: default;
}
@media (min-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
	/* a#header-title-name {
		cursor: text;
	}
	a#header-title-name::after {
		cursor: default;
	} */
}

header [id|="header-title-name"]::after {
	content: " :";
	font-weight: 700;
	background: linear-gradient(to bottom, var(--header-colon-upper-color) 58%, var(--header-colon-lower-color) 58%);
		color: transparent;
		background-clip: text;
		-webkit-background-clip: text;
}

header {
	width: var(--header-sidebar-width);
	font-size: var(--header-font-size);
}
	header *[id|="header-title"] {
		font-weight: var(--header-font-weight);
	}	
	#header-title-name-mobile:active {
		color: var(--page-special-color);
		-webkit-tap-highlight-color: transparent;
	}
		@media (hover: none) {
			#header-title-name-mobile:hover {
				color: var(--page-special-color);
			}
		}
/* main navigation menu, links in the header i mean */

nav,
nav ul,
/* nav ul li, */
svg-portfolio,
svg-archive,
svg-about,
svg-contact,
svg-bsky1,
avg-dot {
	display: contents;
	-webkit-tap-highlight-color: transparent;
}
nav ul li {
	position: relative;
}
#nav-links a, svg {
	display: block;
	overflow: visible;
}
#nav-links path {
	fill: var(--nav-link-color);
}
#portfolio-navlink { margin-top: 0.3em; }
#archive-navlink { margin-top: 0.09em; }
#about-navlink { margin-top: 0.3em; }
#contact-navlink { margin-top: 0.3em; }
#bluesky-header-icon {
	width: calc(var(--header-sidebar-width) * 0.26);
	margin-top: 0.2em;
	margin-left: calc(var(--header-sidebar-width) * 0.6);
}
#nav-links a svg:hover {
	transform: skew(10deg);
}
#nav-links a svg:active {
	transform: skew(10deg) scale(0.97);
	transition: unset;
}
	@media (hover: none) {
		#nav-links a svg:hover {
			transform: skew(10deg) scale(0.97);
		}
	}
	ala-header[data-active="portfolio"] #nav-links .active-page-marker.portfolio { display: contents; }
	ala-header[data-active="archive"] #nav-links .active-page-marker.archive { display: contents; }
	ala-header[data-active="about"] #nav-links .active-page-marker.about { display: contents; }
	ala-header[data-active="contact"] #nav-links .active-page-marker.contact { display: contents; }
#nav-links .active-page-marker svg {
	--page-marker-width: 1em;
	display: block;
	position: absolute;
	top: calc((100% - var(--page-marker-width)) / 2);
	left: 105%;
	width: var(--page-marker-width);
	z-index: -1;
	pointer-events: none;
}
#nav-links .active-page-marker svg path {
	fill: var(--active-page-marker-color);
}
#portfolio-navlink + .active-page-marker svg
	{ --page-marker-width: 0.6em; transform: translate(-0.08em, 0.2em) scalex(0.9); }
#archive-navlink + .active-page-marker svg
	{ transform: rotate(50deg) scalex(-1); }
#about-navlink + .active-page-marker svg
	{ --page-marker-width: 0.7em; transform: translate(-0.17em, 0.18em) rotate(320deg); }
#contact-navlink + .active-page-marker svg
	{ --page-marker-width: 0.8em; transform: scaley(-1) rotate(-150deg) translatex(0.3em); }

/*DISABLED nav old*/
/* nav ul {
padding-left: 0;
font-family: var(--display-font);
font-weight: var(--nav-li-font-weight);
font-feature-settings: "ss01", "ss03";
}
	nav ul li {
		line-height: var(--nav-li-line-height);
		margin-top: var(--header-link-margin-top);
	}
		nav ul li:has(.current-page)::after {
		content: "•";
		color: var(--active-page-marker-color);
		margin-left: 0.11em;
		display: inline-block;
		}
		nav ul li#contact-navlink::after {
		margin: -0.18em;
		}
									@supports not selector(:has(.current-page)) {
										nav ul li	a.current-page::after {
											content: "•";
											color: var(--active-page-marker-color);
											margin-left: 0.11em;
											display: inline-block;
										}
									}
		nav ul li a:is(:any-link, :hover) {
			display: inline-block;
			color: var(--nav-link-color);
			text-decoration: none;
			transition: transform 0.01s, font-variation-settings 0.01s;
		}
	@media (hover: hover) {
		nav ul li:nth-child(even) a:hover {
			transform: skew(1deg) translateY(-0.04em) translateX(0.2em);
			font-variation-settings: "wdth" 82;
		}
		nav ul li:nth-child(odd) a:hover {
			font-variation-settings: "wdth" 82;
			transform: skew(-2deg) translateY(-0.03em) translateX(0.2em);
		}
			nav ul li:nth-child(even) a:active {
				transform: skew(-9deg) translate(5px, -2px) scale(1.03);
			font-variation-settings: "wdth" 100;
				transition: none;
			}
			nav ul li:nth-child(odd) a:active {
				transform: skew(-4deg) translate(6px, -2px) scale(1.03);
			font-variation-settings: "wdth" 100;
				transition: none;
			}
	}

#bluesky-header-icon {
	display: block;
	width: var(--header-bluesky-icon-width);
	aspect-ratio: var(--bluesky-icon-ratio);
	color: transparent;
	user-select: none;
	margin: var(--header-bluesky-icon-margin-top) 0 0 var(--header-bluesky-icon-margin-left);
	text-decoration: none;

		background-color: var(--header-bluesky-icon-color);
		mask: var(--bluesky-icon-url) no-repeat 100% / contain;
	transition: transform 0.01s;
	position: relative;
}
	#bluesky-header-icon:hover {
		transform: scaleX(0.85) skew(1deg) rotate(-2deg) translateY(-2px);
		transition: transform 0.01s;
	}
	#bluesky-header-icon:active {
		transform: scaleX(1.04) skew(352deg, -5deg) translate(2px, -5px);
	}
			#bluesky-header-icon svg { display: none; }
			@supports not (mask: var(--bluesky-icon-url)) {
				#bluesky-header-icon svg {
					display: inline;
					fill: var(--header-bluesky-icon-color);
					width: 100%;
					height: auto;
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
				}
				#bluesky-header-icon svg:hover {
					transform: scale(0.95) skew(2deg, 1deg) rotate(-3deg) translate(-2px, -3px);
				}
				#bluesky-header-icon svg:active {
					transform: scale(1.01) skew(352deg, -5deg) translate(2px, -5px);
				}
			} */
/*DISABLED nav old end*/


/* header MOBILE */

@media (max-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
	header {
		background: var(--header-background-color);
		padding: var(--mobile-header-padding-top) var(--body-padding-right) var(--mobile-header-padding-bottom) var(--body-padding-left);

		width: 100%;
		top: 0;
		height: var(--mobile-header-height-rem);
			transition: height var(--mobile-header-unroll-speed), padding-bottom var(--mobile-header-unroll-speed);
		overflow: hidden;
		z-index: 3;
		display: grid;
		grid-template-columns: auto 1fr auto;
		/* grid-template-rows: auto auto 1fr; */
		grid-template-rows: calc(var(--mobile-header-height-rem) - var(--mobile-header-padding-top)) calc(100dvh - var(--mobile-header-height-rem) - var(--mobile-header-padding-top) - var(--footer-height) - var(--body-padding-bottom)) var(--footer-height);
	}
	@supports not (height: 100dvh) {
		header { 
			grid-template-rows: calc(var(--mobile-header-height-rem) - var(--mobile-header-padding-top)) calc(100vh - var(--mobile-header-height-rem) - var(--mobile-header-padding-top) - var(--footer-height) - var(--body-padding-bottom)) var(--footer-height);
		}
	}
		header.expand-mobile {
			height: 100%;
			padding-bottom: var(--body-padding-bottom);
		}
	
	#header-title-name {
		display: inline-block;
		font-weight: 400;
		grid-area: 1 / 1 / 1 / 1;
	}
	#header-title-illustrator {
		display: none;
	}
	#nav-links, nav ul {
		display: contents;
	}
	nav {
		--mobile-nav-height: calc(100vh - var(--body-padding-top) - var(--footer-height) - var(--body-padding-bottom));
		height: 100%;
		/* width: min(100%, calc(var(--mobile-nav-height) * 0.58)); */ /* *0.7 for full height */
		aspect-ratio: 0.58;
		max-width: 82%;
		grid-area: 2 / 1 / 2 / -1;
		margin: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
		/* #portfolio-navlink { margin-top: 0.0em; }
		#archive-navlink { margin-top: 0.1em; }
		#about-navlink { margin-top: 0.3em; }
		#contact-navlink { margin-top: 0.3em; } */

		#portfolio-navlink { margin-top: 0.15em; }
		#archive-navlink { margin-top: 0.3em; }
		#about-navlink { margin-top: 0.6em; }
		#contact-navlink { margin-top: 0.6em; }
		#nav-links #bluesky-header-icon { display: none; }

	#portfolio-navlink a svg path {}
	#archive-navlink a svg path {}
	#about-navlink a svg path {}
	#contact-navlink a svg path {}

#nav-links .active-page-marker svg {
	top: calc((100% - var(--page-marker-width)) / 2);
	width: var(--page-marker-width);
	z-index: -1;
	pointer-events: none;
}
#nav-links .active-page-marker svg path {
	fill: var(--active-page-marker-color);
}
#portfolio-navlink + .active-page-marker svg
	{ transform: translate(-0.25em, 0.4em) rotate(330deg); }
#archive-navlink + .active-page-marker svg
	{ --page-marker-width: 0.8em; transform: translate(-0.5em, 0.2em) rotate(-25deg) scale(0.8, -1);}
#about-navlink + .active-page-marker svg
	{}
#contact-navlink + .active-page-marker svg
	{ transform: translate(-0.6em, -0.65em);}


	@media (orientation: landscape) {
		nav {
			margin-top: var(--header-link-margin-top);
		}
		nav ul {
			--header-link-margin-top: 0;
			display: flex;
			flex-wrap: wrap;
			/* font-size: 0.8em; */
			row-gap: 0.8em;
			justify-content: space-evenly;
		}
		nav ul li {
			display: inline-block;
			width: 40vw;
			text-align: center;
		}
		#bluesky-header-icon {
			margin: auto;
			margin-top: 0.8em;
		}
		@media (max-height: 16rem) {
			nav #bluesky-header-icon {
				display: none;
			}
		}
		@media (max-height: 13rem) {
			nav {
				margin-right: calc(-1 * var(--body-padding-right));
				margin-left: calc(-1 * var(--body-padding-left));
			}
			nav ul {
				flex-wrap: nowrap;
				width: 100vw;
			}
			nav ul li {
				font-size: 0.6em;
				width: 23vw;
			}
		}
	}
}

/* hamburger / close / filter button */

.mobile-icon {
	display: inline-block;
	user-select: none;
	-webkit-user-select: none;
	font-size: 0;
	color: transparent;
	position: relative;
	bottom: 0.2rem;
}

#open-close-nav {
	--close-button-piece-offset-y: /* 210% */ 0.143lh;
	grid-area: 1 / 3 / span 1 / span 1;
	aspect-ratio: 1;
	height: 1lh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: end;
	gap: 0.25em;
	position: relative;
}
#open-close-nav::after {
	content: "";
	position: absolute;
	right: calc(-1 * var(--body-padding-right));
	left: -0.4em;
	top: -0.27em;
	bottom: -0.23em;
}
nav-button-piece {
	display: block;
	width: 75%;
	height: 0.077em;
	background-color: var(--main-body-text-color);
}
#open-close-nav.x nav-button-piece:nth-child(1) {
	transform: translateY(var(--close-button-piece-offset-y)) rotate(45deg);
}
#open-close-nav.x nav-button-piece:nth-child(2) {
	transform: translateY(calc(var(--close-button-piece-offset-y) * -1)) rotate(-45deg);
}
#open-close-nav.x nav-button-piece:nth-child(3) { display: none; }

		@supports not (height: 1lh) {
			#open-close-nav {
				--open-close-button-size: calc(var(--header-font-size) * 1.2);
				--close-button-piece-offset-y: calc(var(--open-close-button-size) * 0.133);
				height: var(--open-close-button-size);
			}
		}

.mobile-icon::before {
	font-size: calc(var(--header-font-size) * 1.2);
	color: var(--main-body-text-color);
	display: block;
	font-family: "Material Symbols Sharp";
	font-feature-settings: "liga";
	font-variation-settings:
		'FILL' 0,
		'wght' 260,
		'GRAD' 200,
		'opsz' 20;
}

@media (min-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
	.mobile-icon, .mobile-icon::before {
	 display: none;
	}
}

/* SECOND SIDEBAR */

back-button-wrapper {
	width: calc(var(--main-padding-left) + var(--second-sidebar-width));
	-webkit-tap-highlight-color: transparent;
}
back-button-wrapper :is(svg-arrow-left, svg-x) {
	display: contents;
}

/* back-button */
/* #go-back {
	color: var(--back-button-color);
	display: block;
	justify-self: start;
	text-transform: lowercase;
	font-weight: bolder;
	font-style: italic;
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
}
#go-back::before {
	content: "←";
	font-family: var(--display-font);
	font-weight: calc(0.71 * var(--nav-li-font-weight));
	font-style: normal;
	position: relative;
	bottom: 0.05em;
	
	font-size: calc(var(--header-font-size) * 2);
}
#go-back:hover {
	position: relative;
	font-size: 0.6rem;
	position: relative;
}
#go-back:hover::before {
	font-style: normal;
	margin-right: 0.07em;
} */
@media (min-aspect-ratio: 1.35 /*brkpnt-gallery*/) {
	back-button-wrapper {
		position: fixed;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows:
			/* calc(var(--header-font-size) * var(--line-height) * 2) */
			calc(var(--header-title-height) + var(--header-offset-title-bottom))
			calc(var(--header-font-size) * 1.74)
			calc(var(--header-font-size) * 2.2)
			calc(var(--header-font-size) * 1.4)
			calc(var(--header-font-size) * 2.2);
		grid-template-areas:
			"nm"
			"prt"
			"arch"
			"abt"
			"cnt";
	}
	#go-back {
		margin: auto;
	}
}

back-button-wrapper {
	z-index: 2;
	user-select: none;
}
back-button-wrapper::highlight {
	background: transparent;
}
	back-button-wrapper button {
		transition: transform 0.02s ease-out;
		/* width: calc(var(--footer-font-size) * 4); */
		margin: auto;
		position: relative;
	}
	#go-back::after {
	  content: "";
	  left: -0.5rem;
	  right: -1.5rem;
	  bottom: -1.5rem;
	  top: -1rem;
	  position: absolute;
	}
	#go-back:hover::after {
		bottom: -2rem;
		top: -1.5rem;
		right: -3rem;
		left: -0.3rem;
	}
		#go-back svg {
			width: calc(var(--footer-font-size) * 3);
			margin: auto;
		}
			#go-back path {
				fill: var(--page-special-color);
			} 
		#go-back:hover {
			transform: translateX(-47%) scale(1.15, 0.7);
		}

	button.back-to-art,
	button.back-to-whatever {
		grid-area: nm;
	}
	button.back-to-portfolio {
		grid-area: prt;
	}
	button.back-to-archive {
		grid-area: arch;
	}
	button.back-to-about {
		grid-area: abt;
	}
	button.back-to-contact {
		grid-area: cnt;
	}

archive-navigation {
	grid-area: arch;
	display: grid;
	align-self: center;
	justify-self: center;
	gap: 1em;
	width: 30%;
	fill: var(--archive-nav-buttons);
}
		back-button-wrapper.archive-back-button-wrapper archive-navigation {
		 display: none !important;
		}
archive-navigation button {
	width: 100%;
}
#archive-next {
	transform: rotate(180deg);
	fill: var(--archive-next-button);
}
#archive-return {
	/* fill: rgb(161, 127, 164); */
	fill: var(--archive-return-button);
}

@media (max-aspect-ratio: 1.35 /*brkpnt-gallery*/) {
	back-button-wrapper {
		width: fit-content;
	}
		#go-back {
			position: relative;
			right: 66%;
		}
		#go-back::after {
			bottom: -1.7rem;
			right: -2rem;
		}
		#go-back:hover::after {
			right: -3.5rem;
			bottom: -3.5rem;
		}
			#go-back:hover {
				transform: translate(-37%, 50%) scale(0.8, 1.05) rotate(-50deg);
			}
			back-button-wrapper svg {
				width: unset;
				height: calc(var(--header-title-height) * 0.9);
			}

		back-button-wrapper archive-navigation {
			grid-template-columns: auto auto auto;
			position: relative;
			right: 10%;
			width: fit-content;
		}
			back-button-wrapper archive-navigation button svg {
				height: calc(var(--header-title-height) * 0.75)
			}
	back-button-wrapper:has(#go-back.back-to-art) {
		display: none !important;
	}

}
@media (max-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
	back-button-wrapper {
		display: none;
	}
	back-button-wrapper:not(.archive-back-button-wrapper):has(archive-navigation.show) {
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		width: initial;
		height: var(--archive-nav-block-height);
		background: white;
	}
		back-button-wrapper archive-navigation {
			position: static;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
		}
		back-button-wrapper archive-navigation button {
			width: fit-content;
		}
		back-button-wrapper archive-navigation button svg {
			height: calc(var(--mobile-header-height-rem) * 0.65)
		}
}

	.archive-nav::after {
	  content: "";
	  left: -0.3rem;
	  right: -0.3rem;
	  bottom: -0.3rem;
	  top: -0.3rem;
	  position: absolute;
	}
@media (min-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
	#archive-prev:hover {
		transform: translateX(-13%) scaleY(0.95);
	}
	#archive-return:hover {
		transform: scale(0.95) rotate(3deg);
	}
	#archive-next:hover {
		transform: rotate(180deg) translateX(-13%) scaleY(0.95);
	}
		.archive-nav.arrow:hover::after {
			right: -0.8rem;
		}
	#archive-prev:active {
		transform: translateX(-13%) scaleY(0.95) scale(0.85);
		transition: unset;
	}
	#archive-return:active {
		transform: scale(0.95) rotate(3deg) scale(0.85);
		transition: unset;
	}
	#archive-next:active {
		transform: rotate(180deg) translateX(-13%) scaleY(0.95) scale(0.85);
		transition: unset;
	}
}
@media (max-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
	.archive-nav::after {
	  left: -6vw;
	  right: -6vw;
	  bottom: -0.5rem;
	  top: -0.5rem;
	}
	.archive-nav:active {
		transform: scale(0.85);
		transition: unset;
	}
	#archive-next.archive-nav:active {
		transform: rotate(180deg) scale(0.85);
	}
}


/*DISABLED*/
/* @media (min-width: 30rem breakpoint-mobile) and (max-width: 38em breakpoint-gallery) {
	#back-button { */
		/* height: */
			/* calc(100vh - var(--header-height-w-bsky) - var(--footer-height) - var(--body-padding-bottom) - var(--body-padding-top)); */
		/* display: grid; */
		/* justify-items: end; */
		/* align-items: end; */
	/* }
	#go-back {
		display: none;
	}
	#go-back::before {
		content: "";
		display: none;
	}
	@supports (mask: url(/assets/arrow_back_24dp_000000_FILL0_wght500_GRAD200_opsz24.svg)) {
		#go-back {
			margin-left: calc(var(--header-bluesky-icon-margin-left) * 0.72);
			margin-top: var(--header-link-margin-top);
			background-color: var(--color-4);
			mask: var(--arrow-left-sq) 100% / contain;
			display: block;
			width: calc(var(--header-bluesky-icon-width) * 1.35);
			aspect-ratio: 1; */		
			/* position: relative;
			overflow: visible; */
																							/*i can't make this pseudo-element to work… --2025-09-22 */
			/* &:hover::after {
				content: "back";
				position: absolute;
				display: inline-block;
				left:400px;
				top:300px;
				color: red;
				font-size: 3rem;
				mask: none;
			} */
			/* @media (hover: hover) {
			&:hover {
				transform: scale(0.95) skew(20deg) rotate(120deg) translate(-2px, -3px);
			}
			&:active {
				transform: scale(1.01) skew(-20deg) rotate(170deg)  translate(2px, -5px);
			}
			}
		}
	}
} */
/*DISABLED end*/

/* MAIN */

main.page-content :is(h1, h2, h3, h4, h5, h6) {
	margin-bottom: var(--heading-margin-bottom);
}
	main.page-content :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
	margin-top: var(--heading-margin-bottom);
	}

main.page-content b {
	font-weight: var(--body-font-weight-bold);
}
aside.weak:last-child {
	margin: calc(3 * var(--paragraph-margin-top)) 0 0 calc(3 * var(--paragraph-margin-top));
	font-size: 0.65em;
}
	picture + aside.weak:last-child {
		margin-top: var(--paragraph-margin-top);
	}

.page-spot-illo {
	margin: auto;
}


/* ART DETAILSi*/

rotate-img {
	/* margin-top: var(--paragraph-margin-top); */
	width: 100%;
	color: var(--page-figcaption-color);
	-webkit-tap-highlight-color: transparent;
}
rotate-img:first-child {
	margin-top: 0;
	/* margin-bottom: var(--paragraph-margin-top); */
}
rotate-img:last-child {
	margin-bottom: 0;
	/* margin-top: var(--paragraph-margin-top); */
}
	rotate-img figure {
		width: 100%;
		display: grid;
		grid-template-columns: auto 1fr auto;
		gap: 0.3em;
	}
		rotate-img button.mobile-icon {
			font-size: 0;
			color: transparent;
			grid-column: 3;
		}
			rotate-img button.mobile-icon::before {
				content: "screen_rotation_up";
				display: block;
				color: var(--icon-color);
				transform: scaleX(-1);
			}
				rotate-img button.mobile-icon.rotated::before {
					transform: scaleX(-1) rotate(90deg);
				}

/* legacy page */				
figure.legacy-image-set {
	display: flex;
	gap: var(--paragraph-margin-top);
	flex-wrap: nowrap;
	&:is(p + figure) {
		margin-top: var(--paragraph-margin-top);
	}
	& picture {
		max-width: 100%;
	}
}
@media (min-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
	figure.legacy-image-set {
		width: calc(100vw - var(--main-margin-left));
	}
}
@media (max-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
	figure.legacy-image-set {
		flex-wrap: wrap;
	}
}
/* legacy page end */

article.art-details/* :not(:has(figure.narrow:first-child)) */ {
	width: calc-size(max-content, size + var(--body-padding-right));
	max-width: 100%;
	/* width: clamp(min(fit-content, var(--article-width)), fit-content, 100%); */
}
art-page-wrapper {
	display: flex;
	flex-direction: column;
	gap: calc(0.85 * var(--paragraph-margin-top));
	width: 100%;
	position: relative;
	/* right: 0;
	left: 0;
	transition: right 0.3s, left 0.3s; */
	transition: transform 0.4s;
}
	@media (width > 1000px) and (prefers-reduced-motion: no-preference) {
		art-page-wrapper {
			transition: transform 1s;
		}
	}
art-page-wrapper.swiped-left {
	transform: translateX(-150%);
}
art-page-wrapper.swiped-right {
	transform: translateX(150%);
}
	@media (prefers-reduced-motion: reduce) {
		art-page-wrapper {
			transition: transform 0.1s ease-in;
		}
		art-page-wrapper.swiped-left {
			transform: translateX(-8%);
		}
		art-page-wrapper.swiped-right {
			transform: translateX(8%);
		}
	}


	@supports not (width: calc-size(max-content, size + 1px)) {
		article.art-details/* :not(:has(figure.narrow:first-child)) */ {
			width: fit-content;
		}
	}

	article.art-details > :where(:not(figure.narrow ~ *):not(figure, img-set)) {
		contain: inline-size;
	}
/* main figure.art-details:not(:first-child) {
	margin-top: var(--paragraph-margin-top);
} */
main figure.art-details {
		display: grid;
		gap: var(--art-details-figure-gap);
}
figure.art-details:last-child:not(:has(figcaption:last-child)) {
	margin-bottom: calc(-1 * var(--body-padding-bottom) + var(--archive-nav-block-height));
	&:is(main:has(rotate-img:last-child) figure) {
		@media (max-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
			margin-bottom: 0;
		}
	}
}
figure.art-details picture {
	overflow: hidden;
}

			@media (min-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
				main figure.art-details:first-of-type:is(rotate-img + figure) {
					margin-top: 0;
				}
			}
	/* main figure.art-details > :not(:first-child) {
		margin-top: var(--art-details-figure-gap);
	} */
	figure.art-details #technical-details {
		margin-top: calc(-1 * 0.5 * var(--art-details-figure-gap));
		font-size: var(--technical-details-font-size);
	}
		figure.art-details #technical-details a:not(.underline) {
			text-decoration-line: none;
		}
	main figure.art-details figcaption#technical-details {
		text-transform: lowercase;
		color: var(--page-figcaption-color);
		line-height: var(--technical-details-line-height);
	}
		main figure.art-details #technical-details *:has(:empty),
		main figure.art-details #technical-details :empty {
			display: none;
		}
		main figure.art-details #technical-details time {
			white-space: nowrap;
		}
			main figure.art-details #technical-details time a {
				font-weight: var(--body-font-weight-bold);
			}
		main figure.art-details #technical-details > :not(:last-child)::after {
			content: " • ";
			color: var(--page-figcaption-pseudo-color);
		}
			main figure.art-details #technical-details:has(button#copy-link:last-child) > :nth-last-child(2)::after {
				content: " • ";
				color: var(--page-special-color-lightish);
			}
		main figure.art-details #technical-details .context a:has(cite) {
			text-decoration-line: underline;
		}

		hires-link {
			white-space: nowrap;
		}
		#technical-details button#copy-link {
			color: var(--page-special-color-lightish-grayish);
			text-decoration-color: var(--page-special-color-lighter);
			overflow: visible;
			position: relative;
			transition: 0.1s cubic-bezier(.68,-0.55,.27,1.55);
		}
	/*	#technical-details button#copy-link::after {
			content: "copied";
			color: var(--page-special-color);
			text-decoration: none;
			display: inline-block;
			font-size: 0.8em;
			font-weight: var(--body-font-weight-bold);
			cursor: default;
			/* width: 0; * /
			overflow: visible;
			pointer-events: none;
			opacity: 0%;
			position: absolute;
			left: 0;
			right: 0;
			top: -0.2em;
			transform: translate(200%);
			transition: 0.7s;
		}
		#technical-details button#copy-link:active::after {
			opacity: 100%;
			transform: unset;
			transition: opacity 0s;
		}*/
			#technical-details button#copy-link:hover {
				color: var(--page-special-color);
				/* background-color: unset; */
				/* text-decoration-color: var(--page-special-color-light); */
			}
			#technical-details button#copy-link:active {
				color: var(--page-special-color);
				/* background-color: unset; */
				transform: scale(0.8);
				/* font-size: 0.97em; */
				/* transform-origin: bottom left;
				transform: scale(0.95); */
			}
			@media (hover: none) {
				#technical-details button#copy-link:hover {
					color: var(--page-special-color);
					/* background-color: unset; */
				}
			}

figure:has(~ :where(figure, img-set)):has(~ :where([itemprop="description"], p, art-desc)) {
	--technical-details-font-size: var(--smaller-aside-font-size);

		& + [itemprop="description"] {
			margin-top: var(--paragraph-margin-top);
		}
		& ~ figure {
		--technical-details-font-size: var(--smaller-aside-font-size);
		}
}

figure:has(#technical-details):has(+ :where(p, art-desc)):not(:has(~ :where(figure, img-set))) figcaption::after {
	content: "";
	height: 0px;
	width: 2.5em;
	border-top: var(--page-special-color) dotted 3px;
	/* background-color: var(--page-special-color); */
	display: block;
	margin-top: var(--paragraph-margin-top);
}

@media (min-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
	/* the following ruleset is so the figcaption isn't wider than picture in the figure. and also if there's a picture that is ever so slightly wider than neighbouring ones, and it looks like a mistake, i can apply .squish-width class to it and make it fit in --2025-10-08 */
	figure.art-details {
	  width: fit-content;
			/* explainer: https://frontendmasters.com/blog/the-figcaption-problem/ */
	}
	figure.art-details:not(.narrow) figcaption {
	  contain: inline-size;
			/* explainer: https://frontendmasters.com/blog/the-figcaption-problem/ */
	}
		@supports not (contain: inline-size) {
			figure.art-details figcaption {
				width: 0;
				min-width: 100%;
			}
		}
}

/* img max height calculations */
main.page-content picture:not(.squish-width) {
	max-width: fit-content;
	width: auto;
}
main.page-content picture {
	background: var(--page-special-color-light);
}
main.page-content :is(img, source, a.picture) {
	max-height: var(--page-img-max-height);
}

@media (min-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
		:root {
		--page-img-max-height: calc(100svh - var(--body-padding-top) - var(--body-padding-bottom));
		}
			main.page-content figure.art-details:first-child:has(picture:only-of-type):has(figcaption) {
				--page-img-max-height:
					calc(100svh - var(--body-padding-top) - var(--body-padding-bottom) - 0.5 * var(--art-details-figure-gap) - var(--technical-details-font-size) * var(--technical-details-line-height));
			}
			main.page-content figure.art-details:first-child:not(figure:only-child):has(picture:only-of-type) {
				--page-img-max-height:
					calc(100svh - var(--body-padding-top) - var(--body-padding-bottom) - 0.5 * var(--art-details-figure-gap) - var(--technical-details-font-size) * var(--technical-details-line-height) - var(--paragraph-margin-top) - var(--paragraph-line-height) * var(--paragraph-font-size));
			}
		@media (max-aspect-ratio: 1.35 /*brkpnt-gallery*/) {
			back-button-wrapper:has(.show) ~ main.page-content figure.art-details:first-child:has(picture:only-of-type):has(figcaption) {
				--page-img-max-height:
					calc(100svh - var(--body-padding-top) - var(--body-padding-bottom) - 0.5 * var(--art-details-figure-gap) - var(--technical-details-font-size) * var(--technical-details-line-height) - var(--header-title-height));
			}
		}
		@media (min-aspect-ratio: 1.5 /*brkpnt-imgpad*/) {
			:root {
				--page-img-max-height: calc(100svh - var(--body-padding-top));
			}
			main.page-content figure.art-details:first-child:has(picture:only-of-type):has(figcaption) {
				--page-img-max-height:
					calc(100svh - var(--body-padding-bottom) - 0.5 * var(--art-details-figure-gap) - var(--technical-details-font-size) * var(--technical-details-line-height));
			}
				main.page-content figure.art-details:first-child:not(figure:only-child):has(picture:only-of-type) {
					--page-img-max-height:
						calc(100svh - var(--body-padding-bottom) - 0.5 * var(--art-details-figure-gap) - var(--technical-details-font-size) * var(--technical-details-line-height) - var(--paragraph-margin-top) - var(--paragraph-line-height) * var(--paragraph-font-size));
				}
				main.page-content figure.art-details:only-child:has(figcaption) {
					margin-top: calc(-1 * var(--body-padding-top));
					margin-right: calc((-1 * var(--body-padding-right)) /* + var(--scrollbar-width) */);
				}
				main.page-content figure.art-details:first-child:has(figcaption) {
					margin-top: calc(-1 * var(--body-padding-top));
					margin-right: calc((-1 * var(--body-padding-right)) /* + var(--scrollbar-width) */);
					--art-details-img-max-width: calc(var(--main-width) - var(--main-padding-left));
				}
		}
	@supports not (height: 100svh) {
		:root {
			--page-img-max-height: calc(100vh - var(--body-padding-top) - var(--body-padding-bottom));
		}
		main.page-content figure.art-details:first-child:has(picture:only-of-type):has(figcaption) {
			--page-img-max-height: calc(100vh - var(--body-padding-top) - var(--body-padding-bottom) - 0.5 * var(--art-details-figure-gap) - (var(--technical-details-font-size) * var(--technical-details-line-height)));
		}
		@media (max-aspect-ratio: 1.35 /*brkpnt-gallery*/) {
			back-button-wrapper:has(.show) ~ main.page-content figure.art-details:first-child:has(picture:only-of-type):has(figcaption) {
				--page-img-max-height:
					calc(100vh - var(--body-padding-top) - var(--body-padding-bottom) - 0.5 * var(--art-details-figure-gap) - var(--technical-details-font-size) * var(--technical-details-line-height) - var(--header-title-height));
			}
		}
		@media (min-aspect-ratio: 1.35 /*brkpnt-gallery*/) {
			main.page-content figure.art-details:first-child:has(picture:only-of-type):has(figcaption) {
				--page-img-max-height:
					calc(100vh - var(--body-padding-bottom) - 0.5 * var(--art-details-figure-gap) - var(--technical-details-font-size) * var(--technical-details-line-height));
			}
		}
	}

	.ignore-padding:last-child {
		margin-bottom: calc(-1 * var(--body-padding-bottom));
	}
	@media (min-aspect-ratio: 1.35 /*brkpnt-gallery*/) {
			.ignore-padding:first-child {
				margin-top: calc(-1 * var(--body-padding-top));
			}
		@media (min-aspect-ratio: 1.5 /*brkpnt-imgpad*/) {
			.ignore-padding {
				margin-right: calc((-1 * var(--body-padding-right)) /* + var(--scrollbar-width) */);
				--art-details-img-max-width: calc(var(--main-width) - var(--main-padding-left));
			}
		}
	}
}

/* .page-content picture::before {
	content: "";
	display: block;
	aspect-ratio: var(--picture-aspect-ratio);
	height: min(var(--picture-height), var(--page-img-max-height));
} */
/* img max height calculations end */

img-set.imgset {
	display: grid;
	gap: var(--art-details-figure-gap);
	column-gap: var(--imgset-column-gap);
}
img-set:not(:first-child) {
	margin-top: var(--paragraph-margin-top);
}
.column-2 {
	grid-template-columns: 1fr 1fr;
}
@media (max-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
	.column-2 {
		grid-template-columns: 1fr;
	}
}
/* ART DETAILS end */
		
/*about me*/
article#about-me {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 1em;
}
	article#about-me h1 {
		grid-area: 1 / 2 / 1 / 2;
		align-self: end;
		margin: 0;
		position: relative;
		top: calc(var(--heading-line-height) * 0.43 * var(--display-below-baseline));
	}
	article#about-me h1 ~ * {
		grid-column: span 2;
	}
	article#about-me #my-face {
		grid-area: 1 / 1 / 1 / 1;
		/* background-size: cover; */
		/* height: var(--header-height); */ 
		/* overflow: hidden; */
		width: fit-content;
	}
		article#about-me #my-face :is(img, source) {
			height: 100%;
			width: auto;
		}
		@media (min-aspect-ratio: 0.75 /*brkpnt-mobile*/) { article#about-me #my-face :is(img, source) { max-width: unset; } }

@media (max-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
	article#about-me #my-face {
		height: unset;
		width: 10rem;
	}
	article#about-me #my-face :is(img, source) {
		height: unset;
	}
	article#about-me h1 {
		top: calc(var(--heading-line-height) * 0.17 * var(--display-below-baseline));
	}
	/* article#about-me #my-face :is(img, source) {
		height: 100%;
		width: 100%;
		object-fit: cover;
	} */
}
/*about me end*/


/*contact*/
#contact-links .email {
	font-weight: var(--display-bold);
	font-family: var(--display-font); font-feature-settings: "ss01" off, "ss03" off, "ss04" off;
}
#contact-links button.copy-email::before {
	color: var(--icon-color);
}


dl#social-media-links-on-page div {
	display: grid;
	grid-template-columns: var(--contact-icon-width) 1fr;
	column-gap: calc(1em * var(--paragraph-line-height) * 0.4);
}

	dl#social-media-links-on-page div dd:first-of-type a {
		font-family: var(--display-font); font-feature-settings: "ss01" off, "ss03" off, "ss04" off;
		color: var(--main-link-color);
		font-weight: var(--display-bold);
		text-decoration-line: none;
		font-size: 1.2em;
	}
		dl#social-media-links-on-page div dd:first-of-type a:hover {
			text-decoration-line: underline;
		}

	dl#social-media-links-on-page div dd {
		grid-column: 2;
	}
		dl#social-media-links-on-page div dd:last-of-type {
			/* font-size: var(--smaller-aside-font-size); */
		}

	dl#social-media-links-on-page div dt {
		width: 100%;
		grid-area: 1 / 1 / span 2 / 1;
		position: relative;
		top: 0.4em;
	}
		dl#social-media-links-on-page div dt a {
			display: block;
			font-size: 0;
			color: transparent;
			width: 100%;
			/* mask-size: contain;
			mask-repeat: no-repeat;
			background-size: contain; /* fallback * / */
			position: relative;
			transition: transform 0.01s ease-out;
		}
			dl#social-media-links-on-page div dt a path { fill: var(--icon-color); }
			
			dl#social-media-links-on-page div dt a:hover {
				/* background-color: var(--main-link-color); */
				/* position: absolute;
				width:105%; */
				transform: scale(1.1);
				transition: transform 0.01s ease-out;
			}
				dl#social-media-links-on-page div:nth-of-type(odd) dt a:active {
					transform: skew(5deg, 6deg);
				}
				dl#social-media-links-on-page div:nth-of-type(even) dt a:active {
					transform: skew(-5deg, -6deg);
				}
			/* dl#social-media-links-on-page div dt a:is(.bluesky a) {
					mask-image: var(--bluesky-icon-url); aspect-ratio: var(--bluesky-icon-ratio); }
			dl#social-media-links-on-page div dt a:is(.instagram a) {
					mask-image: var(--instagram-icon-url); aspect-ratio: var(--instagram-icon-ratio); }
			dl#social-media-links-on-page div dt a:is(.cara a) {
					mask-image: var(--cara-icon-url); aspect-ratio: var(--cara-icon-ratio);
					width: 90%; position: absolute; right: 0; } */

					@supports not (mask-image: var(--bluesky-icon-url)) {
							dl#social-media-links-on-page div dt a:is(.bluesky a) {
									background: transparent url(--bluesky-icon-url); }
							dl#social-media-links-on-page div dt a:is(.instagram a) {
									background: transparent url(--instagram-icon-url); }
							dl#social-media-links-on-page div dt a:is(.cara a) {
									background: transparent url(--cara-icon-url); } }
@media print {
	dl#social-media-links-on-page div {
		grid-template-columns: auto auto 1fr;
		column-gap: 0.2rem;
		/* row-gap: 0.1rem; */
	}
	dl#social-media-links-on-page div dt {
		position: unset;
		grid-area: 1 / 1 / 1 / 1;
		white-space: nowrap;
	}
	dl#social-media-links-on-page div dt a {
		font-size: inherit;
		color: black;
		background: unset;
		aspect-ratio: unset !important;
		mask: unset !important;
		position: unset !important;
		text-decoration-line: none;
		display: inline-block;
		width: fit-content !important;
	}
	dl#social-media-links-on-page div dt a:hover {
		transform: unset;
		text-decoration-line: underline;
	}
	dl#social-media-links-on-page div dt::after {
		content: attr(data-platform) ": ";
		/* color: var(--light-gray); */
		font-family: var(--display-font);
		/* font-weight: var(--body-font-weight-bold); */
		width: fit-content;
		font-size: 1.2em;
	}
	dl#social-media-links-on-page div dd:first-of-type {
		grid-area: 1 / 2 / 1 / 2;
	}
	dl#social-media-links-on-page a:hover,
	dl#social-media-links-on-page div dd:first-of-type a:hover {
		color: var(--main-link-hover-color);
	}		
	dl#social-media-links-on-page div dd:nth-of-type(2) {
		font-size: var(--smaller-aside-font-size);
		grid-row: 2;
		grid-column: 1 / span 3;
		/* padding-left: 1rem; */
	}
	dl#social-media-links-on-page div dd:nth-of-type(3) {
		grid-row: 3;
		grid-column: 1 / span 3;
		padding-left: 1rem;
		margin-top: 0.3em;
	}
}

#print-page-button {
	margin: auto;
	margin-top: calc(2* var(--paragraph-margin-top));
	display: block;
	font-size: inherit;
	font-weight: var(--body-font-weight);
	padding: 0.3rem 0.6rem;
}
#web-dir-link {
	display: block;
	width: fit-content;
	font-size: var(--smaller-aside-font-size);
	margin: auto;
	margin-top: 0.5em;
}
/*contact end*/

/*portfolio gallery*/

/* main.image-gallery-tiled {
	font-size: 0;
} */
.big-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	-webkit-tap-highlight-color: transparent;
}
	.big-gallery figure {
		overflow: hidden;
	}
#archive-gallery {
		background: var(--archive-color) top left round url("/assets/svg/sq-tektur-bullet.svg");
		background-size:
			calc(100% / var(--number-of-archive-columns) /* + var(--button-border-width) */);
			/* calc((100% - (var(--number-of-archive-columns) - 1) * var(--button-border-width)) / var(--number-of-archive-columns)); */
			/* zrob zeby javascript ustawiał height backgrounsize na computed width + 0.15rem pls --2025-10-13*/
			/* pogięło mnie??? to chyba było niewyspanie… --2025-10-15 */
}
#archive-gallery.loading {
	/* width: calc(var(--main-width) / var(--number-of-archive-columns)); */
	/* height: calc(var(--main-width) / var(--number-of-archive-columns)); */
	/* background-size: contain; */
	visibility: hidden;
}
		archive-meta {z-index: 2;}
		.big-gallery#archive-gallery figure a { position: relative; display: block; height: 100%; width: 100%; }
		.big-gallery#archive-gallery figure a:is(a[href=""], a:not([href]))::after {
			content: "";
			background: url("assets/svg/gallery-X.svg");
			background-size: cover;
			display: block;
			width: 100%;
			height: 100%;
			position: absolute; top: 0; left: 0; bottom: 0; right: 0;
			mix-blend-mode: normal;
		}
		#archive-gallery figure a[target="_blank"]::after {
			content: "↗";
			font-family: "Work Sans";
			color: var(--outgoing-archive-link-hover);
			font-size: calc((100vw - var(--main-margin-left)) / var(--number-of-archive-columns) * 0.27);
			position: absolute;
			background: var(--archive-color);
			bottom: 0;
			right: 0;
				margin: 0 calc(var(--button-border-radius) * -0.5) calc(var(--button-border-radius) * -0.5) 0;
				padding: 0 calc(var(--button-border-radius) * 0.5) calc(var(--button-border-radius) * 0.5) 0;
			line-height: 0.8;
			display: block;
			height: 22%;
			width: 22%;
			border-radius: var(--button-border-radius) 0 0 0;
			corner-shape: bevel;
						/* top: 0;
			right: 6%;
			mix-blend-mode: difference;
				transition: all 0.08s ease-out; */
		}
			@media (hover: hover) {
				#archive-gallery figure a[target="_blank"]::after {
					color: var(--archive-color-pale);
				}
				#archive-gallery figure:hover a[target="_blank"]::after {
					/* transform: scale(1.6);
					transition: all 0.08s ease-in; */
					color: var(--outgoing-archive-link-hover);
				}
				#archive-gallery figure:hover a[href]:not([href=""]) :is(img, source) {
					transform: scale(1.022);
				}
			}
		@media (max-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
			.big-gallery#archive-gallery figure a[target="_blank"]::after {
				/* font-size: 10vw;
				line-height: 0.7; */
			font-size: calc(100vw / var(--number-of-archive-columns) * 0.29);
			}
		}

@media (min-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
	/* #archive::before {
		content: "";
		display: block;
		position: absolute;
		z-index: -1;
		background-color: var(--green-2);
		top: 0; bottom: 0;
		right: var(--body-padding-right);
		left: var(--main-margin-left);
	} */
	.big-gallery#archive-gallery {
		/* gap: 0.1rem; */
		gap: var(--button-border-width);
		display: grid;
		grid-template-columns: repeat(var(--number-of-archive-columns), 1fr);

		border-left: var(--archive-border) var(--archive-color);
		border-top: var(--archive-border) var(--archive-color);
			border-radius: var(--button-border-radius) 0 0 0;
			corner-shape: bevel;

		/* background-size: var(--archive-cell-bg-size); */
	}
		archive-gallery#archive-gallery.squat:not(.empty) {
			border-bottom: var(--archive-border) var(--archive-color);
			border-radius: var(--button-border-radius) 0 0 var(--button-border-radius);
		}
		archive-gallery#archive-gallery.squat.with-scroll:not(.empty) {
			border-right: var(--archive-border) var(--archive-color);
			border-radius: var(--button-border-radius);
		}
		
	.big-gallery#archive-gallery figure {
		--square-size: 20vh;
		/* min-height: var(--square-size); /* min(14vw, 20vh); */
		/* min-width: var(--square-size); */
		height: 100%;
		aspect-ratio: 1;
		 /* i would use clamp() but the above seems more backwards compatible? --2025-09-23 */
		 /* what a headache https://stackoverflow.com/questions/70157949/how-does-clamp-differ-from-setting-width-max-width-min-width#comment139598255_70160531 --2025-09-23 */
		flex-grow: unset;

		border-radius: var(--button-border-radius);
		corner-shape: bevel;
	}
	.big-gallery#archive-gallery :is(img, source) {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
			/* i experimented with a grid, but returned to flexbox --2025-09-23 */
	/* .big-gallery#archive-gallery {
		display: grid;
		grid-template-columns: repeat(var(--number-of-archive-columns), auto);
		gap: 1px;
	}
	.big-gallery#archive-gallery figure {
		width: 100%;
		height: auto;
		aspect-ratio: 1;
	} */
}	

@media (min-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
	main.image-gallery-tiled figure {
		max-height: 300px;
		height: 20vw;
	}
		@media (max-aspect-ratio: 1.1) {
			main.image-gallery-tiled figure {
				height: 30vw;
			}
		}
		main.image-gallery-tiled figure :is(img, source) {
			object-fit: cover;
			height: 100%;
			width: 100%;
		}
			#portfolio-gallery figure:hover :is(img, source) {
				transform: scale(1.009);
			}
	/* #empty br {
		display: none;
	} */
}

@media (max-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
	:root {
		--number-of-archive-columns: 3;
	}
	main#archive {
		display: block;
	}
	#archive-gallery {
		display: grid;
		grid-template-columns: repeat(var(--number-of-archive-columns), 1fr);
		gap: var(--button-border-width);
		background-image: url("/assets/svg/sq-tektur-bullet-palegreen.svg");

		
		/* padding-top:
			calc(var(--archive-meta-padding-top) + var(--archive-meta-button-height) + var(--archive-meta-padding-bottom) + var(--button-border-width)); */
		margin-top:
			calc(var(--archive-meta-padding-top) + var(--archive-meta-button-height) + var(--archive-meta-padding-bottom));
		padding-top: var(--button-border-width);
		background-color: var(--archive-color);
		background-origin: content-box;
	}
	#archive-gallery figure {
		margin:0;
		width: 100%;
		aspect-ratio: 1;
	}
	/* #archive-gallery figure:nth-child(3n) {
		opacity: 0;
	} */
	#archive-gallery :is(img, source) {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transform: scale(1.06);
	}
		#archive-gallery :where(a:hover, a:active) :is(img, source) {
			transform: unset;
		}
	#portfolio-gallery {
		/* grid-template-columns: 1fr 1fr; */
		display: block;
	}	
	#portfolio-gallery figure {
		width: 100%;
		height: auto;
	}
	#portfolio-gallery figure:not(:first-of-type) {
		margin-top: calc(var(--mobile-header-height-rem) / 4);
	}
	#portfolio-gallery :is(img, source) {
		width: 100%;
		height: auto;
		aspect-ratio: auto;
	}
		#portfolio-gallery :where(a:active) :is(img, source) {
			transform: scale(0.985);
		}
		@media (hover: none) {
			#portfolio-gallery :where(a:hover) :is(img, source) {
				transform: scale(0.985);
			}
		}
	#archive-gallery.squat {
		border-bottom: var(--archive-border) var(--archive-color);
	}
	#empty {
		margin: auto;
		line-height: var(--paragraph-line-height);
		text-align: center;
	}
	#empty span[aria-hidden] {
		display: block;
	}
}



#archive-gallery figure.filtered {
	display: none !important;
}
#archive-gallery > strong#empty {
	display: none;
}
#archive-gallery.empty {
	background: unset;
	border: unset;
	display: block;
}
#archive-gallery.empty > strong#empty {
	display: block;
	width: fit-content;
	font-weight: normal;
	margin-top: calc(2 * var(--paragraph-margin-top));
}
archive-meta:has(+ #archive-gallery.empty) {
	border: unset;
}

/* .position-top          :is(img, source) { object-position: top         ; }
.position-bottom       :is(img, source) { object-position: bottom      ; }
.position-left         :is(img, source) { object-position: left        ; }
.position-right        :is(img, source) { object-position: right       ; }
.position-top-left     :is(img, source) { object-position: top left    ; }
.position-top-right    :is(img, source) { object-position: top right   ; }
.position-bottom-left  :is(img, source) { object-position: bottom left ; }
.position-bottom-right :is(img, source) { object-position: bottom right; } */



@media (min-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
	                                                      :root { --number-of-archive-columns: 3;  }
	@media (min-width: 40rem)                           { :root { --number-of-archive-columns: 4;  } }
	@media (min-width: 52rem)                           { :root { --number-of-archive-columns: 5;  } }
	@media (min-width: 64rem)                           { :root { --number-of-archive-columns: 6;  } }
	@media (min-width: 76rem)                           { :root { --number-of-archive-columns: 7;  } }
	@media (min-width: 88rem)                           { :root { --number-of-archive-columns: 8;  } }
	@media (min-width: 100rem)                          { :root { --number-of-archive-columns: 9;  } }
	@media (min-width: 112rem)                          { :root { --number-of-archive-columns: 10; } }
	@media (min-width: 124rem)                          { :root { --number-of-archive-columns: 11; } }
	@media (min-width: 136rem)                          { :root { --number-of-archive-columns: 12; } }
	@media (min-width: 148rem)                          { :root { --number-of-archive-columns: 13; } }
	@media (min-width: 160rem)                          { :root { --number-of-archive-columns: 14; } }
	@media (min-width: 172rem)                          { :root { --number-of-archive-columns: 15; } }
	@media (min-width: 184rem)                          { :root { --number-of-archive-columns: 16; } }
	@media (min-width: 196rem)                          { :root { --number-of-archive-columns: 17; } }
	@media (min-width: 208rem)                          { :root { --number-of-archive-columns: 18; } }
	@media (min-width: 220rem)                          { :root { --number-of-archive-columns: 19; } }
	@media (min-width: 232rem)                          { :root { --number-of-archive-columns: 20; } }
	@media (min-width: 244rem)                          { :root { --number-of-archive-columns: 21; } }
	@media (min-width: 256rem)                          { :root { --number-of-archive-columns: 22; } }
	@media (min-width: 268rem)                          { :root { --number-of-archive-columns: 23; } }
	@media (min-width: 280rem)                          { :root { --number-of-archive-columns: 24; } }
}

/* @media (min-aspect-ratio: 0.75 /*brkpnt-mobile* /) {
	                                                   :root { --number-of-archive-columns: 4;  }
	@media (max-aspect-ratio: 1.15)                          { :root { --number-of-archive-columns: 4;  } }
	@media (min-aspect-ratio: 1.3)                           { :root { --number-of-archive-columns: 5;  } }
	@media (min-aspect-ratio: 1.45)                          { :root { --number-of-archive-columns: 6;  } }
	@media (min-aspect-ratio: 1.6)                           { :root { --number-of-archive-columns: 7;  } }
	@media (min-aspect-ratio: 1.75)                          { :root { --number-of-archive-columns: 8;  } }
	@media (min-aspect-ratio: 1.9)                           { :root { --number-of-archive-columns: 9;  } }
	@media (min-aspect-ratio: 2.05)                          { :root { --number-of-archive-columns: 10; } }
} */

/*portfolio gallery end*/

/* WEBMASTER */
article#webmaster {
	margin-bottom: var(--paragraph-margin-top);
}
#webmaster hr {
	color: var(--page-special-color-light);
	margin-right: calc((var(--main-padding-right) + var(--body-padding-right)) * -1);
	margin-top: calc(2 * var(--paragraph-margin-top));
	background-color: var(--page-special-color-light);
	height: var(--button-border-width);
	border: 0;
	border-radius: var(--button-border-radius);
	corner-shape: bevel;
}
aside#mod-time {
	margin-left: 0;
	margin-top: calc(var(--paragraph-margin-top) * 0.5);
	/* margin-top: calc(-0.7 * var(--paragraph-margin-top)); */
	font-size: var(--smaller-aside-font-size);
	color: var(--heading-color);
	text-transform: lowercase;
	text-align: left;

	& time {
	font-weight: var(--body-font-weight-bold);
		/* font-family: var(--display-font); font-feature-settings: "ss01" off, "ss03" off, "ss04" off; */
	}

	/* &::before { content: "["; margin-right: 0.2em; }
	&::after  { content: "]"; margin-left:  0.2em; }
	&::before, &::after {
		font-size: var(--paragraph-font-size);
		color: var(--weak-text-color); */


		/* font-family: var(--display-font);
		position: relative;
			top: 0.03em; */
	/* } */
}
/* WEBMASTER end */


/* archive stuff buttons etc see more */
div#archive-stuff {
	position: fixed;
	width: var(--archive-supplement-width);
	top: calc(var(--body-padding-top) + var(--header-height-w-bsky));
	left: var(--body-padding-left);
	bottom: calc(var(--body-padding-bottom) + var(--footer-height) + 0.5rem);
}
@media (max-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
	div#archive-stuff {
		position: static;
		width: 100%;
		margin-bottom: var(--paragraph-margin-top);
	}
}
/* archive supplemental div end */


/* footer */

footer, footer *, footer *:is(:hover, ::before, ::after, :active) {
	--footer-link-color: var(--footer-text-color);
	--footer-link-color-hover: var(--page-special-color-darker);
	color: var(--footer-text-color);
}

footer {
	font-size: var(--footer-font-size);
	line-height: var(--footer-line-height);
	align-self: end;
	display: grid;
	grid-template-columns: var(--copyright-grid-cell-width) auto;
}
/* footer span#copyright-year-range,
footer address b.myname { */
		/* to jest brute-force patch, bo nie umiem sobie poradzić z tym, że ikonka odpycha pierwszy wiersz stopki od drugiego. najpierw były spacery niewidzialne w następnych linijkach, ale nie działają na ipadzie.
		i może to lepsza higiena żeby było spaghetti css, a nie dodatkowy ukryty markup… --2025-10-11 */
	/* position: relative;
	top: 0.2em;
} footer b.copyright { position: relative; top: 0.07em; } */
/* wracam do spejserów. okazało się że ten snippet z (pointer:coarse) psuł WSZYSTKO --2025-10-12 */

footer a[href="/webmaster.html"] {grid-area: 2 / 2;}
footer a[href="/links.html"] {grid-area: 3 / 2;}

footer #footer-links {
	grid-column: 2;
}
@media (max-aspect-ratio: 0.75 /*brkpnt-mobile*/) or (min-aspect-ratio: 1.35 /*brkpnt-gallery*/) {
	footer #footer-links > span:not(:last-child)::after {
		content: " : ";
		font-weight: bolder;
	}
}
footer #footer-links a {
	/* justify-self: end; */
	color: var(--footer-link-color);
	/* width: fit-content; */
	white-space: nowrap;
}
footer #footer-links a:hover {
	color: var(--footer-link-color-hover);
}
	footer :is(*, *::after, *::before, *:hover) {
		color: var(--footer-text-color);
		text-decoration-line: none;
	}
	footer a:hover,
	footer a:hover:hover::after {
		text-decoration-line: underline;
		color: var(--footer-link-color-hover);
	}
	footer b.copyright {
		font-weight: calc(var(--body-font-weight) * 0.9);
		font-size: 130%;
		align-self: center;
		cursor: copy;
		/* color: var(--active-page-marker-color); */
	}
	footer #copyright-year-range::after {
		content: " : ";
		font-weight: bolder;
	}
	footer button.copy-email::before {
		font-size: var(--footer-font-size);
		font-variation-settings: "wgth" var(--body-font-weight);
		left: 0.2rem;
		bottom: -0.06rem;
		top: unset;
		color: var(--footer-text-color);
		font-variation-settings:
			'FILL' 0,
			'wght' 320,
			'GRAD' 200,
			'opsz' 20;
	}
		footer button.copy-email:hover::before {
			color: var(--footer-link-color-hover);
		}
footer a.compact {
	display: none;
}
/* footer #mod-time {
	grid-column: 2;
} */
	/* footer #mod-time time::before {
		content: ": ";
		font-weight: bolder;
	} */
/*stop displaying extra info when space too narrow*/
@media (min-aspect-ratio: 0.75 /*brkpnt-mobile*/) and (max-aspect-ratio: 1.35 /*brkpnt-gallery*/) {
	footer a.compact {
		display: inline;
	}
	footer a.verbose/* , footer #mod-time */ {
		display: none;
	}
	/* footer a:hover {
		text-decoration-line: none;
	} */
	footer #copyright-year-range {
		display: none;
	}
	/* footer a.email-me {
		font-size: 0;
		color: transparent;
	} */
	/* footer a.email-me::after {
		content: "Email";
		font-size: var(--footer-font-size);
		color: var(--footer-text-color);
	} */
	footer #footer-links {
		/* user-select: none; */
		width: min-content;
		overflow: visible;
	}
	@supports not (width: min-content) { footer #footer-links { width: 1px } }

	/* footer #footer-links::selection {
		background: transparent;
	} */
	/* footer #footer-links a {
		justify-self: unset;
		font-size: 0;
		color: transparent;
	} */
	/* footer a[href="/webmaster.html"]::after {content: "Bugs??";}
	footer a[href="/links.html"]::after {content: "All links";} */
	/* footer #footer-links a::after {
		font-size: var(--footer-font-size);
		color: var(--footer-link-color);
	}
	footer #footer-links a:hover::after {
		color: var(--footer-link-color-hover);
	} */
}
/*---------------------------------------------------------------------------*/
/* that details tag over archive */

archive-meta {
	--archive-button-bgcolor: var(-- color-17);
	--archive-button-hovercolor: var(--color-16);
	/* width: calc(100vw - (100vw - 100%) - var(--body-padding-left) - var(--main-padding-left)); */
	display: grid;
				/* position: fixed;
				background-color: white;
				width: 100%;
				z-index: 2; */
	align-items: center;
	padding-top: var(--body-padding-top);
	grid-template-rows: var(--header-title-height) auto;
	grid-template-columns: auto auto 1fr;
	overflow: hidden;
}

archive-meta button.topmenu {
	width: fit-content;
	align-self: start;
}

@media (min-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
		archive-meta button#filter { margin-right:1.2rem; }
		archive-meta button#more { margin-right:1.4rem; }

	archive-meta button.topmenu svg { height: calc(0.8 * var(--header-title-height)); }
	@media (max-aspect-ratio: 1.2) {
		archive-meta button.topmenu { align-self: center; }
		archive-meta button.topmenu svg { height: calc(0.7 * var(--header-title-height)); }
	}
	@media (max-aspect-ratio: 1.1) {
		archive-meta button.topmenu svg { height: calc(0.65 * var(--header-title-height)); }
	}
	@media (max-aspect-ratio: 1) {
		archive-meta button.topmenu svg { height: calc(0.6 * var(--header-title-height)); }
		archive-meta button#filter { margin-right:1rem; }
		archive-meta button#more { margin-right:1.2rem; }
	}
	@media (max-aspect-ratio: 0.9) {
		archive-meta button.topmenu svg { height: calc(0.55 * var(--header-title-height)); }
		archive-meta button#filter { margin-right:0.9rem; }
		archive-meta button#more { margin-right:1.15rem; }
	}
}
	archive-meta button.topmenu {
		fill: var(--archive-button-color);
		/* transition: fill 0.08s; */
	}
	archive-meta#archive-meta button.disabled,
	archive-meta#archive-meta button.disabled:hover {
		fill: var(--color-19);
		cursor: default;
	}
				archive-meta button.topmenu:is(:hover, :active, .opened) { fill: var(--active-page-marker-color); }

/* archive-meta#archive-meta section { display: none; } */
archive-meta#archive-meta section.show { display: block; grid-column: 1 / -1; }

archive-meta#archive-meta section {
	margin: 0 var(--body-padding-right) var(--paragraph-margin-top) 0;
	line-height: var(--paragraph-line-height);
}

archive-meta #filter-info {
	display: block;
	grid-column: 1 / -1;
}
archive-meta #filter-info span {
	font-weight: var(--body-font-weight-bold);
	color: var(--page-special-color);
}
archive-meta #filter-info button {
	font-weight: var(--body-font-weight-bold);
}
archive-meta#archive-meta section.show ~ #filter-info {
	display: none;
}

	@media (max-aspect-ratio: 1.35 /*brkpnt-gallery*/) {
		/* archive-meta {
			grid-template-columns: 1fr 1fr 1fr;
			column-gap: 1vw;
			width: 101%;
		} */
		/* archive-meta button {
			padding: 0 calc(0.2 * var(--body-padding-top) + 0.3vw); */
			/* margin: 0 calc(0.25 * var(--body-padding-top)); */
			/* margin: 0;
			height: fit-content;
			width: 100%;
		} */
	}
@media (max-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
	:root {
		--archive-meta-button-height: 2rem;
		--archive-meta-padding-top: 1rem;
		--archive-meta-padding-bottom: 0.2rem;
	}
	archive-meta {
		--border-growth-time: 0.15s;
			position: fixed;
			top: var(--mobile-header-height-rem);
			background: var(--body-background-color);
			left: 0;
			right: 0;
		grid-template-rows: var(--archive-meta-button-height) auto;
		grid-template-columns: 1fr 1fr 1fr;
		justify-content: center;
		padding:
			var(--archive-meta-padding-top) 0 var(--archive-meta-padding-bottom) 0;
		/* border-bottom: var(--archive-border); */
		width: 100%;
		border-bottom: var(--archive-border) var(--archive-color);
	}
		archive-meta:has(:is(.show, #filter-info)) { padding-bottom: 0; }
		archive-meta:has(.show) { row-gap: var(--archive-meta-padding-bottom); }
		archive-meta:has(#filter-info):not(:has(.show)) {row-gap: calc(var(--archive-meta-padding-bottom) + var(--button-border-width));}
		
	archive-meta button.topmenu {
		justify-self: center;
		height: 100%;
	}
		@media (max-width: 23rem) { :root { --archive-meta-button-height: 1.8rem; } } 
		@media (max-width: 21rem) { :root { --archive-meta-button-height: 1.6rem; } } 

	archive-meta button.topmenu svg {
		height: 100%;
		width: auto;
	}
		archive-meta #filter { position: relative; left: 0.4rem; }
		archive-meta #more { position: relative; right: 0.4rem; }
		archive-meta #random { /* position: relative; right: 0.3rem; */ justify-self: left; }

	archive-meta#archive-meta section {
		margin: var(--paragraph-margin-top) 0 0;
		padding: 0 var(--body-padding-right) var(--paragraph-margin-top) var(--body-padding-left);
		max-height: calc(100dvh - var(--archive-meta-padding-top) - var(--archive-meta-button-height) - var(--body-padding-top));
		overflow-y: scroll;
			/* to do:
			-learn intersection observer, apply border top when scrolled from the top;
			-apply larger padding bottom if there's overflow - var(--body-padding-bottom);
			--2025-10-20 */
	}
		@supports not (height: 100dvh) {
			archive-meta#archive-meta section {
				max-height: calc(100vh - var(--archive-meta-padding-top) - var(--archive-meta-button-height) - var(--body-padding-top));
			}
		}
	/* archive-meta section {
		transition: border var(--border-growth-time);
	}
	#archive-mode section.show {
		border-top: solid 0px var(--archive-color);
	}
	archive-meta section.show.tall {
		margin: 0;
		padding: var(--paragraph-margin-top) var(--body-padding-right) var(--body-padding-bottom) var(--body-padding-left);
		border-top: var(--archive-border) var(--archive-color);
	} */
	archive-meta#archive-meta :is(section.show/* , #filter-info */) {
		margin: 0;
		border-top: var(--archive-border) var(--archive-color-pale);
		padding-top: var(--paragraph-margin-top);
	}
	archive-meta#archive-meta section.show.tall {
		padding: var(--paragraph-margin-top) var(--body-padding-right) var(--body-padding-bottom) var(--body-padding-left);
	}
}
/* archive-meta {
	position: relative;
	top: 0;
}
#archive details {
	font-size: calc(1rem * var(--smaller-aside-font-size-multiplier));
	line-height: 1.5;
	margin-right: var(--body-padding-right);
}
#archive details:is(:open, [open]) {
	margin-bottom: var(--paragraph-margin-top);
}
#archive summary {
	color: var(--heading-color);
	font-size: var(--heading-font-size);
	font-weight: var(--heading-font-weight);
	cursor: pointer;
	font-family: var(--display-font);
	line-height: calc(var(--header-title-height) * 0.33);
	display: block;
} */
/* #archive summary::before {
	content: "→";
	display: inline-block;
	width: 1.2em;
	color: var(--color-3);
}
#archive details:is(:open, [open]) summary::before {
	content: "↘";
	display: inline-block;
	width: 1.2em;
	position: relative;
	color: var(--color-3);
} */
details > summary::-webkit-details-marker {
	/* display: none; */
}

@media (max-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
	/* #archive details {
		margin-top: 0;
		margin-bottom: var(--paragraph-margin-top);
		margin-right: unset;
		margin-left: unset;
	} */
}
@media (min-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
	archive-meta {
		overflow: visible;
	}
} 

/* FILTERS */

.filter form {
}

.filter form select {
	text-align: center;
	font-family: var(--body-font);
	/* font-weight: var(--body-font-weight-bold); */
	font-variant-numeric: tabular-nums;
	background-color: var(--page-special-color-light);
	border-radius: var(--button-border-radius);
	border-style: solid;
	border-width: 1px;
	border-color: var(--main-body-text-color);
	color: var(--dark-mixing-color);
	padding: 0.05em 0.25em;
}
/* .filter form select option[value] {
	font-family: var(--display-font);
} */
.filter form dl input[type="checkbox"] {
	accent-color: var(--archive-button-color);
}
.filter form dl div.checkbox {
	display: flex;
	flex-direction: row-reverse;
	width: fit-content;
	gap: 0.5em;
}
.filter form dl .checkbox.small {
	font-size: var(--smaller-aside-font-size);
}
.filter form dl .checkbox.small input {
	height: calc(var(--smaller-aside-font-size) * 1.1);
}
.filter form dl div.checkbox:not(div.checkbox + div.checkbox) {
	border-top: solid /* calc(var(--button-border-width) / 2) */ 1px var(--page-special-color);
	padding-top: var(--paragraph-margin-top);
}
	.filter #year-range-span.show,
	.filter form span.checkbox {
		display: inline-flex;
		flex-direction: row;
		width: fit-content;
		gap: 0.5em;
		align-items: center;
	}
.filter form .select {
	display: flex;
	flex-direction: row;
	width: fit-content;
	gap: 0.5em;
	flex-wrap: wrap;
	align-items: center;
}
.filter form .select select:has(+ .checkbox) {
	margin-right: 0.35em;
}
/* .filter form p.select {
	min-width: 40%;
}
.filter form p.select select {
	flex-grow: 10;
} */
.filter form .select > label {
	white-space: nowrap;
	font-weight: var(--body-font-weight-bold);
}

archive-meta filter-buttons {
	margin-top: var(--paragraph-margin-top);
	display: flex;
	gap: 0.8rem;
}
archive-meta .filter filter-buttons button {
	font-size: var(--paragraph-font-size);
}
	@media (max-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
		archive-meta filter-buttons {
			width: 100%;
			margin-bottom: calc(1.5 * var(--paragraph-margin-top));
		}
		archive-meta filter-buttons:not(:first-child) {
			margin-top: calc(1.5 * var(--paragraph-margin-top));
			margin-bottom: calc(0.5 * var(--paragraph-margin-top));
			/* margin-bottom: calc(1.5 * var(--paragraph-margin-top)); */
		}
	}

archive-meta filter-buttons button {
	fill: var(--main-link-color);
	/* box-sizing: content-box; */
	/* border: solid 2px var(--main-link-color); */
	/* padding: 0.2em; */
}
archive-meta filter-buttons button.accent-text-button:hover {
	background-color: var(--page-special-color-light);
}
archive-meta filter-buttons button.accent-text-button:active {
	background-color: var(--page-special-color-light);
	color: var(--active-page-marker-color);
}
filter-buttons button, filter-buttons svg {
	height: 100%;
}
svg-clear, svg-apply { display: contents; }

archive-meta dt:not(.checkbox dt) {
	/* font-weight: var(--body-font-weight-bold); */
}

archive-meta summary {
	/* font-weight: var(--body-font-weight-bold); */
	/* font-weight: 650; */
	color: var(--main-link-color);
	font-size: 1.1em;
	font-weight: 450;
	/* transition: font-weight 0.06s, transform 0.09s; */
} 

archive-meta details:is(:open, [open]) summary,
archive-meta summary:hover {
	/* font-weight: 750; */
	font-weight: var(--body-font-weight-bold);
}
	archive-meta summary::before {
		content: "#";
		width: 0.85em;
	}
	details:is(:open, [open]) summary::before {
		content: "#";
		width: 0.85em;
	}
	archive-meta summary:hover::after {
		content: " :";
	}
	archive-meta details.changed summary::after {
		content: "•";
		color: var(--archive-button-color);
		transform: translate(0.148em, 0.037em) scale(1.5);
		display: inline-block;
	}
	/* archive-meta details.changed:is(:open, [open]) summary::after, */
	archive-meta details.changed summary:hover::after {
		color: var(--active-page-marker-color);
		transform: translate(0.148em, 0.037em) scale(1.7);
	}
archive-meta#archive-meta details:is(:open, [open]) {
	margin-bottom: var(--paragraph-margin-top);
}
archive-meta details p {
	margin-left: var(--paragraph-margin-top);
}
.filter form #button-wrapper-b { display: none; }
.filter form #button-wrapper-b.show { display: flex; }
	
/* FILTERS END */



/* link directory / web directory */

article dt {
	color: var(--main-link-color);
}
article#web-dir dt {
	display: flex;
	gap: 0 0.7em;
	flex-wrap: wrap;
	align-items: center;
}
article#web-dir dt :is(a, .anchor-style) {
	font-family: var(--display-font); font-feature-settings: "ss01" off, "ss03" off, "ss04" off;
	font-weight: var(--heading-font-weight);
	font-size: 120%;
	/* text-decoration-thickness: 0.08em;
	text-underline-offset: 0.1em; */
}
article#web-dir dt :is(a, .anchor-style):hover {
	color: var(--main-link-hover-color);
	text-decoration-color: var(--art-accent-color);
}
article#web-dir .specify {
	font-size: var(--smaller-aside-font-size);
	font-weight: var(--body-font-weight-bold);
}
article#web-dir .handle {
		font-family: var(--display-font); font-feature-settings: "ss01" off, "ss03" off, "ss04" off;
	/* font-style: italic; */
	font-weight: var(--display-bold);
	color: var(--page-accent-color);
	/* font-size: 0.85em; */
	text-decoration-line: none;
}
@media (max-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
	article#web-dir dl {
		margin: var(--paragraph-margin-top) calc(-1 * var(--body-padding-right)) 0 calc(-1 * var(--body-padding-left));
		width: 100vw;
	}
	article#web-dir dl div {
		margin: 0;
		border-top: dashed var(--page-special-color-light) 0.175rem;
		padding:
			var(--paragraph-margin-top) var(--body-padding-right) var(--paragraph-margin-top) var(--body-padding-left);
	}
	article#web-dir dl div:last-child {
		padding-bottom: 0;
	}
	article#web-dir dt {
		font-size: 1.2em;
	}
	article#web-dir dt :is(.anchor-style, a) {
		text-decoration: none;
		margin-bottom: -0.17em;
	}
}
@media (min-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
	article#web-dir dl div {
		margin-top: calc(var(--paragraph-margin-top) * 1.1);
	}
}


/************META********************TECHNICAL*************************************/
/* PRINT */
@media print {
	:root {
		--main-body-text-color: black;
		--heading-color: rgb(0 0 0 / 50%);
		--list-marker-color: var(--light-gray);
		--light-gray: rgb(0 0 0 / 30%);
		--main-link-color: black;
		--text-gray: rgb(0 0 0 / 65%);
	}
	ala-header, ala-footer, back-button-wrapper, rotate-img, .copy-email, .not-print, .big-background-on-side {
		display: none !important;
	}
	.print {
		display: block;
	}
	main {
		width: 100%;
		margin: 0 0 0 1rem;
		padding: 0;
	}
	main a {
		text-decoration-line: none;
		text-decoration-thickness: unset;
		text-underline-offset: unset;
		font-weight: var(--body-font-weight-bold);
	}
	main a:hover {
		text-decoration-line: underline;
	}
	main h1.print {
		color: black;
		font-family: var(--body-font);
		font-weight: var(--body-font-weight-bold);
		font-size: 1.6em;
		line-height: 1.6;
	}
}

/* NOSCRIPT */
/* copy of what is in /noscript.css, whole file */
@media (scripting: none) {
	body {
		background: no-repeat top / cover url("https://cdn.cara.app/production/posts/fcb4e801-65fd-4674-91e8-9821f5175042/alaflora-ey5qqG1MPZ26ZBLNZiMrs-10c.png");
		/* background: no-repeat bottom / cover url("https://cdn.cara.app/production/posts/39d3cfaa-cb00-4435-ba73-614931374d48/alaflora-qQQLnHrrleq0clEBMYYaQ-alaflora-zawiesina8.png"); */
		width: 100vw;
		height: 100vh;
	}
	body > * {
	display: none;
	}
	div#noscript {
		min-height: unset;
		z-index: 2;
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		width: fit-content;
		height: fit-content;
		margin: auto;
		text-align: center;
		line-height: 2;
		padding: 2rem 3rem;
	}
	div#noscript *, div#noscript {
		font-size: 1.2rem;
	}
	div#noscript a {
		/* color: #4683bd; */
		color: #3f8692;
	}
	div#noscript span[aria-hidden="true"] {
		color: #281a1d;
		user-select: none;
		-webkit-user-select: none;
		pointer-events: none;
	}
	div#noscript span.dot {
		color: #df0010;
	}
	div#noscript noto-symbol {
		/* color: #63a5cb; */
		color: #3f8692;
	}
	div#noscript::before {
		content: "";
		display: block;
		background: center bottom / contain no-repeat url("https://alaflora.carrd.co/assets/images/gallery03/9f69d802.jpg?v=5b6043d8");
		width: 100%;
		height: 50vh;
		max-height: 80vw;
		z-index: 2;
	}
	div#noscript noto-symbol {
		margin-left: 0.17rem;
	}
	div#noscript::selection, div#noscript *::selection {
		background-color: #dfe8bb;
	}
	div#noscript::selection, div#noscript em:not(a em)::selection {
		color: #724e30;
	}
	a::selection, a *::selection {
		color: #246c6e;
	}
	div#noscript::after {
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background:white;
		display: block;
		z-index: -1;
	}
	@media (max-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
		/* body {
			background: white;
		} */
		div#noscript {
			padding: 1rem;
			width: 100vw;
		}
		div#noscript, div#noscript * {
			font-size: 1rem;
		}
	}
}


@keyframes fadeInOut {
	from {
		opacity: 0;
	}
	to {
		opacity: 100;
	}
}