/*********/
/* FONTS */
/*********/
@font-face {
	font-family: "Saira";
	font-weight:100..900;
	font-stretch:50..125;
	font-style: normal;
	src: url("../../fonts/Saira-Variable.woff2") format("woff2");
	font-display: fallback;
}

@font-face {
  font-family: "Saira";
	font-weight:100..900;
	font-stretch:50..125;
	font-style: italic;
  src: url("../../fonts/Saira-Italic-Variable.woff2") format("woff2");
	font-display: fallback;
}





/*********/
/* RESET */
/*********/
*, *::after, *::before {
	box-sizing:border-box;
	font-family:'Saira', sans-serif;
}





/*************/
/* CUST PROP */
/*************/
:root, ::backdrop {
	--blue:#458EF7;
	--red:#DC143C;
	
	--root-bg:#ccc;
	--root-color:#333;
	--accent-color:var(--blue);

	--link-color:var(--blue);

	--header-bg:color-mix(in srgb, var(--root-bg), transparent 25%);
	--header-color:var(--root-color);

	--section-header-bg:linear-gradient(45deg, crimson, dodgerblue);
	--section-header-color:#fff;

	--dialog-backdrop:#cccc;

	--h2-color:canvas;

	--h3-color:#fff;
	--h3-bg:#0009;

	--whitespace:1em;
	--max-inline-size:72em;

	--button-color:#333;
	--button-bg:#0002;
	--button-color-accent:#fff;
	--button-bg-accent:#333;
}

@media (prefers-color-scheme:dark) {
	:root, ::backdrop {
		--root-bg:#333;
		--root-color:#ccc;
		--accent-color:var(--blue);
		--link-color:var(--blue);
		--dialog-backdrop:#333c;

		--button-color:#ccc;
		--button-bg:#fff2;
		--button-color-accent:#000;
		--button-bg-accent:#ccc;
	}
}


@supports (background: linear-gradient(45deg in oklch, crimson, dodgerblue)) {
	:root, ::backdrop {
		--section-header-bg:linear-gradient(45deg in oklch, crimson, dodgerblue);
	}
}

@supports (backdrop-filter: blur(.4em) brightness(.6)) {
	:root, ::backdrop {
		--h3-bg:#0003;
		--dialog-backdrop:#ccc6;
	}

	@media (prefers-color-scheme:dark) {
		:root, ::backdrop {
			--dialog-backdrop:#3336;
		}
	}
}





/************/
/* WRAPPERS */
/************/
html {
	background-color:var(--root-bg);
	color:var(--root-color);
	accent-color:var(--accent-color);
	color-scheme:light dark;

	scroll-padding-block: 3em;
}

@media (prefers-reduced-motion:no-preference) {
	html {
		scroll-behavior:smooth;
	}
}

body {
	margin:0;
}






/***********/
/* GENERAL */
/***********/

/* text */

h1, h2, h3, p {
	margin:0;
	font-weight:normal;
}


/* links */

a {
	display:inline-block;
	
	color:inherit;
	outline:none;
	text-underline-offset:.25em;
	text-decoration-thickness:max(.1em, 1.5px);

	transition:.3s;
}

@media (prefers-reduced-motion:no-preference) {
	a:hover,
	a:focus-visible {
		text-underline-offset:.5em;
		text-decoration-thickness:1em;
	}
}

a span {
	font-variant-numeric: oldstyle-nums;
}

a span::before {
	content:" - ";
}


/* buttons */

button {
	-webkit-appearance: none;
	appearance: none;
	margin:0;
	padding:0;
	block-size:1.25em;
	min-inline-size:1.25em;
	display:grid;
	place-items:center;

	display:grid;
	place-items: center;

	border:none;
	outline:none;
	font:inherit;
	font-variation-settings: "wght" 600;
	cursor:pointer;
	line-height:1;

	background-color: var(--button-bg);
	color:var(--button-color);

	transition: .3s;
}

button:focus-visible,
button:hover {
	background-color: var(--button-bg-accent);
	color:var(--button-color-accent);
}






/**********/
/* HEADER */
/**********/
body > header {
	position:sticky;
	top:0;
	z-index: 100;

	padding:calc(var(--whitespace) * .25) calc(var(--whitespace) * .5);

	display: flex;
	justify-content: space-between;
	align-items:center;
	flex-wrap:wrap;
	column-gap:calc( var(--whitespace) * .5 );

	background-color: var(--header-bg);
	color:var(--header-color);
	backdrop-filter: blur(.25em);

	/* background-color: lightyellow; */
}

body > header h1 {
	font-size:1em;
	font-variation-settings: "wght" 400;
	-webkit-font-smoothing: subpixel-antialiased;
}

/* NAV */
body > header nav {
	display:flex;
	align-items: center;
	flex-wrap:wrap;
	column-gap:.5em;
}





/********/
/* MAIN */
/********/
main {
	inline-size:100%;
	max-inline-size: var(--max-inline-size);
	margin:0 auto;
	padding:clamp( calc(var(--whitespace) * 2), 10vw, calc(var(--whitespace) * 6) ) calc(var(--whitespace) * 2);

	display: grid;
	gap:clamp( calc(var(--whitespace) * 2), 10vw, calc(var(--whitespace) * 6) );
}





/***********/
/* SECTION */
/***********/
section {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(15em, 100%), 1fr));
}


/********************/
/* SECTION - HEADER */
/********************/
section header {
	position: relative;
	inline-size:100%;
	padding:calc(var(--whitespace) * 1);
	display:grid;
	place-content:center;
	place-items:center;
	
	background:var(--section-header-bg);
	color:var(--section-header-color);

	text-align:center;
}

section header h2 {
	font-variation-settings: "wdth" 100, "wght" 100;
	font-size:1.25em;
	line-height:1em;
	text-transform:uppercase;
}

section header p {
	font-variation-settings: "wdth" 100, "wght" 600;
	font-size:1.25em;
	line-height:1em;
	text-transform:uppercase;
}





/******************/
/* SECTION - LIST */
/******************/
section ul {
	display: contents;
	grid-column:1/-1;
	margin:0;
	padding:0;
	list-style: none;
}

section ul li {
	overflow:hidden;
}

section ul li a {
	position: relative;
	aspect-ratio:1;
	
	display:grid;

	color:inherit;
	text-decoration:none;
	outline:none;
}

section header::before,
section ul li a::before {
	content:"";
	position:absolute;
	inset:0;
	z-index: 50;

	background:
		linear-gradient(
			135deg,
			hsl(0 0% 0% / .34),
			hsl(0 0% 0% / .21),
			hsl(0 0% 0% / .13),
			hsl(0 0% 0% / .08),
			hsl(0 0% 0% / .05),
			hsl(0 0% 0% / .03),
			hsl(0 0% 0% / .02),
			hsl(0 0% 0% / .01),
			hsl(0 0% 0% / 0),
			hsl(0 0% 0% / .01),
			hsl(0 0% 0% / .02),
			hsl(0 0% 0% / .03),
			hsl(0 0% 0% / .05),
			hsl(0 0% 0% / .08),
			hsl(0 0% 0% / .13),
			hsl(0 0% 0% / .21),
			hsl(0 0% 0% / .34)
		);
	mix-blend-mode: overlay;
}

section header::after,
section ul li a::after {
	content:"";
	position:absolute;
	inset:0;
	z-index: 25;

	background:
		linear-gradient(
			-135deg,
			hsl(0 0% 100% / .34),
			hsl(0 0% 100% / .21),
			hsl(0 0% 100% / .13),
			hsl(0 0% 100% / .08),
			hsl(0 0% 100% / .05),
			hsl(0 0% 100% / .03),
			hsl(0 0% 100% / .02),
			hsl(0 0% 100% / .01),
			hsl(0 0% 100% / 0),
			hsl(0 0% 100% / .01),
			hsl(0 0% 100% / .02),
			hsl(0 0% 100% / .03),
			hsl(0 0% 100% / .05),
			hsl(0 0% 100% / .08),
			hsl(0 0% 100% / .13),
			hsl(0 0% 100% / .21),
			hsl(0 0% 100% / .34)
		);
	mix-blend-mode: overlay;
}


section ul li h3 {
	position:absolute;
	top:calc(var(--whitespace) * .5);
	z-index: 50;

	place-self: start center;
	max-inline-size:min(80%, 18ch);
	padding:calc(var(--whitespace) * .25) calc(var(--whitespace) * .5);
	
	background-color:var(--h3-bg);
	backdrop-filter: blur(.4em) brightness(.6);

	color:var(--h3-color);
	font-variation-settings: "wdth" 100, "wght" 400;
	font-size:1em;
	line-height:1.2em;
	text-align:center;

	transition:opacity .3s;
}

@media (any-hover: hover) {
	section ul li h3 {
		opacity:0;
		left:-9999em;
	}

	/* hover en focus*/
	section ul a:hover h3,
	section ul a:focus-visible h3 {
		left:unset;
		opacity:1;
	}
}



section ul li img {
	display:block;
	inline-size: 100%;
	block-size: 100%;
	object-fit:cover;
	border-radius:inherit;
	filter:saturate(1.5);
}







/***********/
/* POPOVER */
/***********/

dialog {
	padding:2em;
	border:solid .075em currentcolor;
	background:var(--root-bg);
	color:var(--root-color);
}

dialog::backdrop {
	background-color:var(--dialog-backdrop);
	backdrop-filter: blur(.5em);
}

html:has(dialog[open]) {
  overflow: hidden;
}

dialog button {
	position:absolute;
	right:.375em;
	top:.375em;
}