:root {
	--color-theme: #2a3829;
	--color-theme-dark: #2b3431;
	--color-theme-light: #83a33e;
	--color-accent: #a4794e;
	--color-accent-rgb: 164, 121, 78;
	--color-beige: #c8bcaf;
	--color-bg: #fff;
	--color-bg-opacity: rgba(255, 255, 255, 0.8);
	--color-bg-hover: rgba(255, 255, 255, 0.3);
	--color-text: #2a3829;
	--color-text-invert: #d8c7bd;
	--color-heading: var(--color-theme);
	--color-link: var(--color-theme);
	--color-link-hover: var(--color-theme-dark);
	--color-text-mark: var(--color-beige);
	--color-text-figure: var(--color-text);
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-theme: #6c8633;
		--color-theme-light: #2d3e2c;
		--color-theme-dark: #83a33e;
		--color-accent: #916c51;
		--color-bg: #2a2725;
		--color-bg-opacity: rgba(42, 39, 37, 0.75);
		--color-bg-hover: rgba(42, 39, 37, 0.3);
		--color-text: #d8c7bd;
		--color-text-invert: #2a2725;
		--color-beige: #68483d;
		--color-heading: var(--color-theme-dark);
		--color-link: #c8bcaf;
		--color-link-hover: var(--color-text);
		--color-text-mark: var(--color-theme-dark);
		--color-text-figure: var(--color-text-invert);
	}
}


html {
	font-size: 150%;
}

:is(html, body) {
	margin: 0;
	padding: 0;
	min-height: 100dvh;
	background: var(--color-bg);
	color: var(--color-text);
}

:is(html, body, h1, h2, h3, h4, h5, h6, p, input, button) {
	font-family: Sentient-Variable, serif;
	font-variant-numeric: oldstyle-nums;
}

:is(h1, h2, h3, h4, h5, h6, legend) {
	font-weight: 250;
	font-style: italic;
	color: var(--color-heading);
}

p {
	letter-spacing: 2.5%;
}

a {
	color: var(--color-link);
}

a:focus,
a:hover,
a:active {
	color: var(--color-link-hover);
}

@media screen {
	.header {
		display: grid;
		grid-template-areas: "header-content";
		min-block-size: calc(85dvh - 1em);
		background: var(--color-bg) url(vennesla.webp) no-repeat 45% 70%;
		background-size: cover;
		color: var(--color-text-invert);
		text-align: center;
		padding: 1rem;
		box-sizing: border-box;
	}

	.header__content {
		grid-area: header-content;
		background-color: var(--color-bg-opacity);
		display: grid;
		align-items: center;
		outline: 1px solid var(--color-bg-opacity);
		outline-offset: 0.5rem;
		padding: 0.25rem 0.5rem;
		color: var(--color-theme);
		font-size: clamp(1.25rem, 5dvh, 4rem);
		transition: background-color 0.5s linear;
		text-shadow: 0 3px 0 var(--color-bg-opacity), 0 0 6px var(--color-bg-opacity), 0 0 12px var(--color-bg-opacity);
	}
	.header__content:hover {
		background-color: var(--color-bg-hover);
		transition-duration: 2s;
	}

	h2 {
		font-size: 1.75em;
	}

	h3 {
		font-size: 1.375em;
	}
}

.header :is(h1, h2, p) {
	margin: 0;
}

.header h1 {
	font-size: 1.75em;
	font-weight: 250;
}

.header h2 {
	font-size: 1.25em;
	color: var(--color-text);
	font-weight: 400;
	font-style: italic;
	margin-block: 0;

}

.header time {
	color: var(--color-text);
	font-weight: 550;
}

nav {
	position: sticky;
	top: 0;
	z-index: 10;

	background: var(--color-beige);
}

.nav {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	justify-content: center;
	gap: 0.25rem;
	margin: 0 auto;
}

.nav a {
	display: block;
	padding: 0.25rem 0.5rem;
	color: var(--color-text);
	text-decoration: none;
}

.nav a:is(:hover,:focus,:active) {
	background: var(--color-link-hover);
	color: var(--color-text-invert);
	text-decoration: underline;
}

.nav [aria-current] a {
	background: var(--color-bg);
}

.layout {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.75rem 1rem;
	margin: 1rem auto 2rem;
	font-size: 1.5rem;
}

.layout--flip {
	flex-direction: row-reverse;
}

.layout__content {
	flex: 0 1 60ch;
	padding-inline: 0.5rem;
}

.layout__content figure {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0.5rem auto;
	padding: 0.25rem;
	background: #fff;
	box-shadow: 1 0 0.25rem rgba(0, 0, 0, 0.25);
}

.layout__content img {
	max-width: 100%;
}

.layout__aside {
	flex: 0 2 25ch;
	font-size: 1.2rem;
}

.layout--triple,
.layout--split {
	column-gap: 5%;
	align-items: stretch;
}

.layout--split > h2 {
	flex-basis: 100%;
	text-align: center;
}


.layout--split .layout__content {
	flex-basis: 40%;
	text-align: center;
}

@media screen {
	.layout--triple .layout__content {
		flex-basis: 25%;
		text-align: left;
	}

	.layout--boxed {
		background: var(--color-theme-light);
	}
}

.lang-switch {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 2rem;
	padding-inline: 0;
	font-size: 1rem;
}


.lang-switch a {
	flex: 0 1 auto;
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.lang-switch span {
	flex: 0 1 auto;
}

.lang-switch__flag {
	flex: 0 0 1em;
}

mark {
	background: transparent;
	color: var(--color-text-mark);
	font-size: 0.875em;
	font-style: italic;
	font-weight: 250;
}

.footer {
	margin-block-start: 0.5rem;
	background: var(--color-theme-light);
	color: var(--color-text);
	text-align: center;
	font-style: italic;
	padding: 0.5rem 1rem;
}


#countdown {
	display: flex; 
	justify-content: center;
	gap: 0.5em;
}

.countdown-unit {
	flex: 0 0 2.5em;
	display: flex; 
	flex-direction: column;
	text-align: center;
	padding: 0;
}

.countdown-unit__value {
	font-variant-numeric: tabular-nums oldstyle-nums;
	font-size: 1.5em;
	font-weight: var(--w, 400);
}

.countdown-unit__label {
	font-size: 0.5em;
	font-weight: 250;
}


figure {
	--reverse-rotate: -5deg;
	background: #fff;
	box-shadow: 0 0.375em 0.75em rgba(0, 0, 0, 0.15);
	rotate: 5deg;
	padding: 0.25em;
	color: var(--color-text-figure);
}
figure:nth-of-type(2n) {
	rotate: var(--reverse-rotate);
}

.layout--flip figure {
	--reverse-rotate: 5deg;
	rotate: -5deg;
}

figure img {
	max-width: 100%;
}

figcaption {
	padding: 0.25em 0 0.5rem;
}


dl {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1em;
}
dt {
	flex: 0 0 6em;
	text-align: right;
	font-weight: 600;
}
dd {
	flex: 0 1 calc(98% - 7em);
	display: inline-block;
	font-weight: 300;
	font-style: italic;
	margin-left: 0;
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1em;
	align-items: center;
	margin-bottom: 1em;
}

.action {
	flex: 1 1 auto;

	border-radius: 4em;
	padding: 1em 2em;

	background: var(--color-beige);
	color: var(--color-text);
	border: 2px solid var(--color-theme);
	font-size: 1em;

	text-decoration: none;
	cursor: pointer;
}

.action:hover,
.action:focus {
	text-decoration: underline;
	background: var(--color-theme-dark);
	border-color: var(--color-theme-light);
	color: var(--color-text-invert);
}

fieldset {
	border-color: var(--color-theme-light);
	margin-block: 1em;
}

legend {
	text-align: left;
}


input {
	font-size: 1em;
}

.radio {
	accent-color: var(--color-theme-dark);
}

.option {
	display: flex;
	align-items: center;
	gap: 0.25em;
	cursor: pointer;
}

.option:has(:focus-visible) {
	outline: 2px solid var(--color-theme-dark);
}

.option label:hover,
.option:hover label {
	text-decoration: underline;
	cursor: pointer;
}

.field {
	margin-block: 0.75em;
}

.field label {
	display: block;
	text-align: left;
}

.field > input {
	background: transparent;
	border: 2px solid var(--color-theme-light);
	border-bottom-color: var(--color-theme-dark);
	color: var(--color-text);
	padding: 0.25em 0.5em;
	width: 100%;
	box-sizing: border-box;
}

.field > input:hover,
.field > input:focus {
	border-color: var(--color-theme-dark);
}

.field > input:focus-visible {
	outline: 2px solid var(--color-theme-dark);
}

fieldset small {
	text-align: left;
	font-style: italic;
	display: block;
	margin-block: 0.25em;
}



@media screen and (max-width: 900px) {
	#countdown {
		font-size: 0.75em;
		gap: 0.25em;
	}

	:is(.layout--split, .layout--triple) :is(.layout__content, .layout__aside) {
		flex-basis: 100%;
	}
}

@media screen and (max-width: 600px) {
	.header {
		padding: 0.25em;
	}
	.header__content {
		outline-offset: 0.125em;
		font-size: clamp(1.25rem, 10dvw, 1.5rem);
	}

	.header h1 {
		font-size: clamp(1.125rem, 50dvw, 3rem); 
	}


	.lang-switch {
		gap: 0.25em 0.5em;
		font-size: 0.75em;
	}

	.lang-switch a {
		padding: 0.5em 0.5em;
		margin-block: 0;
	}

	.layout__aside {
		padding-inline: 0.5em;
	}

	#countdown {
		font-size: 0.7em;
	}

	dl {
		gap: 0.125em 0;
	}
	dt {
		text-align: left;
		flex-basis: 100%;
	}
	dd {
		flex-basis: 100%;
		margin-block-end: 0.5em;
		padding-inline-start: 0.5em;
	}

}

@media print {
	html {
		font-size: 1rem;
	}
	
	:is(h1, h2, h3, h4, h5, h6) {
		margin-block: 0.375em;
	}

	.layout__content {
		flex-grow: 1;
		flex-basis: 60%;
	}

	.layout__aside {
		flex-basis: 35%;
	}


	header {
		text-align: center;
		font-size: 2.5rem;
		color: var(--color-theme);
	}

	nav,
	.actions,
	.noprint,
	footer,
	#countdown {
		display: none;
	}
}


/**
* This is a variable font
* You can control variable axes as shown below:
* font-variation-settings: wght 700.0wght 400.0;
*
* available axes:
'wght' (range from 200.0 to 700.0'wght' (range from 200.0 to 700.0
*/
@font-face {
  font-family: 'Sentient-Variable';
  src: url('/fonts/Sentient-Variable.woff2') format('woff2'),
       url('/fonts/Sentient-Variable.woff') format('woff'),
       url('/fonts/Sentient-Variable.ttf') format('truetype');
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Sentient-Variable';
  src: url('/fonts/Sentient-VariableItalic.woff2') format('woff2'),
       url('/fonts/Sentient-VariableItalic.woff') format('woff'),
       url('/fonts/Sentient-VariableItalic.ttf') format('truetype');
  font-weight: 200 700;
  font-display: swap;
  font-style: italic;
}