@font-face {
	font-family: Quicksand;
	src: url(../fonts/Quicksand-VariableFont_wght.ttf) format("truetype");
	font-weight: 300 900;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: Merriweather;
	src: url(../fonts/Merriweather-VariableFont_opsz,wdth,wght.ttf) format("truetype");
	font-weight: 300;
	font-style: normal;
	font-display: swap
}


@font-face {
	font-family: Playwrite;
	src: url(../fonts/PlaywriteMX-VariableFont_wght.ttf) format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap
}


:root {
	--ff-base: "Quicksand", system-ui, sans-serif;
	--ff-headings: "Merriweather",  Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
	--ff-handwritten: "Playwrite", 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive, serif;
	
	--fw-headings: 300;
	
	--clr-025: #F3F4F2;
	--clr-050: #E1E2DF;
	--clr-100: #C3C5BF;
	--clr-200: #A6A8A0;
	--clr-300: #888B80;
	--clr-400: #6A6E60;
	--clr-700: #55584D;
	--clr-900: #40423A;
	
	--primary:   var(--clr-400);
	--secondary: var(--clr-200);
	
	--surface: var(--clr-050);
	--text:    var(--clr-900);
	
	--surface-light: var(--clr-025);
		
	--link:  var(--clr-700);

	--fs--1: clamp(.9375rem, .9182rem + .0857vw, .9846rem);
	--fs-0: clamp(1.125rem, 1.0483rem + .3409vw, 1.3125rem);
	--fs-1: clamp(1.35rem, 1.1865rem + .7265vw, 1.7496rem);
	--fs-2: clamp(1.62rem, 1.3287rem + 1.2948vw, 2.3322rem);
	--fs-3: clamp(1.944rem, 1.4675rem + 2.1178vw, 3.1088rem);
	
	--space-xxs: clamp(.5625rem, .5114rem + .2273vw, .6875rem);
	--space-xs: clamp(.875rem, .8239rem + .2273vw, 1rem);
	--space-s: clamp(1.125rem, 1.0483rem + .3409vw, 1.3125rem);
	--space-m: clamp(1.6875rem, 1.5597rem + .5682vw, 2rem);
	--space-l: clamp(2.25rem, 2.0966rem + .6818vw, 2.625rem);
	--space-xl: clamp(3.375rem, 3.1449rem + 1.0227vw, 3.9375rem);
	--space-xxl: clamp(4.5rem, 4.1932rem + 1.3636vw, 5.25rem);
	
	--main-img-portrait-width: min( 40vw, 600px );
	--main-img-landscape-height: clamp( 160px, 28vh, 280px );
	--page-max-content-width: 800px;
	
	--main-margin-top-s: 48px;
	--main-margin-top-l: 192px;
	
	--main-margin-top: var(--main-margin-top-s);
	
	--logo-size-s: 64px;
	--logo-size-l: 96px;
	
	--logo-margin-s: 6px;
	--logo-margin-l: 0;

	--logo-size: var( --logo-size-s );
	--logo-margin: var( --logo-margin-s );
	
	--border-radius: 0.5em;
	
	@media( width > calc( 920px + 2rem ) ) {
		--logo-size: var( --logo-size-l );
		--logo-margin: var( --logo-margin-l );
		--main-margin-top: var(--main-margin-top-l);
	}
}

html {
	interpolate-size: allow-keywords;
	font-family: var(--ff-base, system-ui);
	line-height: 1.6;
	accent-color: var(--clr-accent);
	block-size: 100%;
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	scroll-padding-block: 5lh;
}

body {
	margin: 0;
	min-block-size: 100svh;
	display: grid;
	grid-template-rows: auto 1fr auto;
	font-family: var(--ff-base);
	background: var(--surface);
	color: var(--text);
	font-size: var(--fs-0);
	line-height: 1.6;
		
	&:has( .hamburger-container .checkbox:checked ) {
		.wp-site-blocks {
			height: 100vh;
			overflow: hidden;
		}
	}
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
	font-size: var(--fs-0);
	margin-block: 0;
}

h1,
h2,
h3,
h4 {
	font-family: var(--ff-headings, serif);
	font-weight: var(--fw-headings, 300);
	text-wrap: balance;
}

h1 {
	font-size: var(--fs-3);
	margin-block-end: 1em;
}

h2 {
	font-size: var(--fs-2);
}

h2,
h3,
h4 {
	margin-block-start: 1.5em;
	margin-block-end: .75em;
}

h1,
h2,
h3,
h4,
button,
input,
label {
	line-height: 1.1
}

main p,
main ul {
	margin-block-start: 0;
	margin-block-end: 1.5em;
}

main ul {
	list-style-type: disc;
	padding-inline-start: 1.5em;
}

main p:has( + ul ) {
	margin-block-end: 0;
}

main a {
	color: var(--link);
	text-decoration: underline dotted var(--clr-300);
	
	&:hover,
	&:focus {
		text-decoration: underline solid var(--clr-400);
	}
}

img,
picture,
iframe {
	max-inline-size: 100%;
	display: block;
	height: auto
}

input,
button,
textarea,
select {
	font-family: inherit;
	font-size: inherit
}

.wp-site-blocks {
	min-width: 320px;
}

.handwritten,
.has-handwritten-font-family {
	font-family: var(--ff-handwritten);
}

.has-headings-font-family {
	font-family: var(--ff-headings);
}

main {
	margin-top: var(--main-margin-top);
}

main > * {
	margin-block-start: 1.5em;
	padding-inline: 1rem;
	max-width: 1020px;
	margin-inline: auto;
}

.has-text-align-center {
	text-align: center;
}

.site-header {
	margin-top: calc( var(--logo-size) + ( var(--logo-margin) * 2) );
}

.main-img {
	width: 100%;
	height: var(--main-img-landscape-height);
}

.main-img * {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.site-header > .wp-block-site-logo {
	position: absolute;
	left: var(--logo-margin);
	top: var(--logo-margin);
}
	
.wp-block-site-logo img {
	height: var(--logo-size) !important;
	width: var(--logo-size) !important;
}

.wp-block-site-title {
	position: absolute;
	top: var(--logo-margin);
	left: calc( var(--logo-size) + ( var(--logo-margin) * 2) );

	a {
		display: block;
		width: calc( 100vw - var(--logo-size) - ( var(--logo-margin) * 3) - 52px );
		max-width: 256px;
		min-width: 160px;
		aspect-ratio: 4;
		background-image: url( ../img/title.png );
		background-size: cover;
		text-indent: 100%;
  		white-space: nowrap;
  		overflow: hidden;
	}
}
.main-section-select {
	background-color: var(--surface-light);
	border-radius: var(--border-radius);
	gap: 1rem;
	margin-block-end: 1.5em;
	padding-block-end: 1rem;
	
	figure	{
		width: 100%;
	}
	
	.wp-block-column:nth-child(2) > *,
	.wp-block-column:nth-child(3) > * {
		padding: 0 1rem;
	}
	
	@media( ( width < 800px ) or ( 1360px > width > calc(920px + 2rem) ) ) {
		flex-direction: column;
	}
	
	@media( not ( ( width < 800px ) or ( 1360px > width > calc(920px + 2rem) ) ) ) {
		padding-block-end: 0;
		
		.wp-block-column:nth-child(1) {
			flex-basis: 20%;
		}
		.wp-block-column:nth-child(2) {
			flex-basis: 45%;
			> * {
				padding: 0.5rem 0;
			}
		}
		.wp-block-column:nth-child(3) {
			flex-basis: 35%;
			> * {
				padding: 0.5rem 0.5rem 0.5rem 0;
			}
		}
	}
	
	p {
		margin-block-end: .75em;
	}

	.wp-block-column:nth-child(2) p:first-child {
		font-family: var(--ff-headings, serif);
		font-weight: var(--fw-headings, 300);
		text-wrap: balance;
		font-size: 1.125em;
		line-height: 1.35;
	}

	.wp-block-button {
		width: 100%;
		text-align: center;
		
		&:not(:last-child) {
			margin-bottom: 1em;			
		}
	}
	
	.wp-block-column {
		place-self: center;
	}

	figure {
		margin: 0;
	}
	
	img {
		height: 200px;
		object-fit: cover;
		border-radius: var(--border-radius) var(--border-radius) 0 0;
		
		@media( not ( ( width < 800px ) or ( 1360px > width > calc(920px + 2rem) ) ) ) {
			height: 264px;
			border-radius: var(--border-radius) 0 0 var(--border-radius);
		}
	}
}

.wp-block-buttons {
	text-align: center;
	
	.wp-block-button__link {
		width: 100%;
		text-align: center;
		padding-inline: 1rem;
		background-color: var(--primary);
		border-radius: var(--border-radius);
		color: var(--surface-light);
		text-decoration: none;
	}
}


footer {
	border-top: 1px solid var(--primary);
	margin-block-start: var( --space-m );
	line-height: 1.3;
	
	p {
		font-size: inherit;
		margin-block-start: 0;
   		margin-block-end: .75em;
	}

	a {
		color: inherit;
	}
}

.primary-footer {
	padding-block: var( --space-l );	
}
	
.secondary-footer {
	border-top: 1px solid var( --clr-300 );
	font-size: var( --fs--1 );
	padding-block: var( --space-l );
}

@media( width > calc( 920px + 2rem ) ) {
	.main-img {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: var(--main-img-portrait-width);
		height: 100vh;
	}
	
	main,
	footer {
		margin-left: calc( var(--main-img-portrait-width) + var(--logo-size) / 2 );
		margin-right: calc( var(--logo-size) / 2 );
	}
	
	.site-header > .wp-block-site-logo {
		z-index: 20;
    	position: fixed;
    	top: calc( var(--logo-size) / 4 );
    	left: calc( var(--main-img-portrait-width) - ( var(--logo-size) / 2 ) );
	}
	
	.wp-block-site-title {
		top: calc( var(--logo-size) / 4 );
		left: calc( var(--main-img-portrait-width) + var(--logo-size) );
		
		a {
			width: 384px;
			max-width: auto;
		}
	}
	
	

}

.hamburger-container {
  	width: max-content;
	position: fixed;
	z-index: 30;
  	top: 6px;
  	right: 6px;
    transition: transform 0.5s ease;
}


.hamburger-container .checkbox {
    opacity: 0;
    position: absolute;
}

.hamburger-container .drawer a {
   	visibility: hidden;
	font-size: var(--fs-1);
  	transition: visibility 0.5s linear;
}

.hamburger-container .drawer li:not( .current-menu-item ) a {
	color: var(--link);
	
	&:hover,
	&:focus {
		text-decoration: underline;
	}
}

.hamburger-container .checkbox:checked ~ .drawer a {
  	visibility: visible;
}

.hamburger-container .checkbox:checked ~ .drawer {
  	transform: translateX(0%);
}

.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(1) {
  	transform: translateY(12px) rotate(45deg);
}

.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(2) {
  	opacity: 0;
}

.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(3) {
  	transform: translateY(-12px) rotate(-45deg);
}

.hamburger {
	width: 32px;
	padding: 9px 6px;
	background-color: rgb( 255 255 255 / 50% );
	border-radius: 3px;
	position: relative;
	display: block;
	transition: transform 0.5s ease;
	z-index: 50;
	cursor: pointer;
}

.hamburger .slice {
  	display: block;
  	width: 100%;
  	height: 2px;
  	background-color: var(--primary);
  	transition: all 0.5s ease;
}

.hamburger .slice:not(:first-child) {
  	margin-top: 10px;
}

.drawer {
  	position: fixed;
  	top: 0;
	left: 0;
  	right: 0;
  	min-height: 100%;
	padding: 2rem;
  	background: var(--surface);
  	transform: translateX(100%);
  	transition: transform 0.5s ease;
	display: flex;
	flex-direction: column;
	align-items: center;

	ul.wp-block-navigation__container {
	    flex-direction: column;
		padding-top: 24px;
	}
	
	.wp-block-navigation ul li {
		padding: .5rem 0;
	}
}

a.res-button {
	background: var(--primary);
	color: #fff;
	text-decoration: none;
	padding: 12px 24px;
	border-radius: 3px;
}

@media( width <= 1340px ) {
	.wp-block-responsive-block-editor-addons-card__inner {
		grid-auto-flow: row;
	}
}

main .wp-block-responsive-block-editor-addons-card__inner {
	grid-gap: 24px;
}