@charset "UTF-8";
@import url("./fonts/public-sans/public-sans.css"); /* Public Sans */
@import url("./fonts/manuale/manuale.css"); /* Manuale */
/*----------------------------------------------------------------------------*/
* { margin: 0; }
*, *::before, *::after { box-sizing: border-box; }
img, svg { max-width: 100%; display: inline-block; }
html {
	scroll-behavior: smooth; height: 100%;
}
/*----------------------------------------------------------------------------*/
:root {
	--ff-head: "Manuale", serif;
	--ff-text: "Public Sans", sans-serif;
	--ff-ctrl: monospace;
}
body {
	padding: 0; position: relative;
	min-height: 100vh; min-height: 100dvh;
	display: flex; flex-flow: column nowrap;
	font: 400 1.125rem/1.625 var(--ff-text);
	color: #202020; background-color: #e0e0e0;
}
p { padding-block: 1ex; }
h1, h2, h3, h4, h5, h6, .h_1, .h_2 {
	line-height: 1.325; font-family: var(--ff-head);
}
h1, .h_1 { font-size: 2.375rem; }
h2, .h_2 { font-size: 2.125rem; }
h2 { border-bottom: 1px solid currentColor; margin-bottom: 1ex; }
h3 { font-size: 1.875rem; }
h4 { font-size: 1.625rem; }
h5 { font-size: 1.375rem; }
h6 { font-size: 1.125rem; }

small {
	font-size: 0.875em; line-height: 1;
}

sup, sub {
	font-size: 0.625em;
}

th, td {
	text-align: left; vertical-align: top; padding-inline: 1em;
}
td {
	border-top: 1px solid #a0a0a0;
}

.la { text-align: left; }
.ra { text-align: right; }
.ca { text-align: center; }
.sc { font-variant: small-caps; }
.col2 {
	columns: 2 352px; column-gap: 2rem;
}
.col3 {
	columns: 3 352px; column-gap: 2rem;
}

.imp {
	font-family: var(--ff-head); font-weight: bold;
}

.icon {
	width: max(1em, 24px); height: max(1em, 24px);
	vertical-align: middle; margin-top: calc((1ex - 1em) / 2);
}
.pic {
	display: block; margin: 1.5rem auto; border-radius: 5px;
}

#skip {
	position: absolute; top: 2px; left: 2px; border-radius: 0.2em;
	background-color: #c0c0c0; opacity: 0; transform: translateX(-100%);
	transition: opacity, transform 125ms ease-in-out;
}
#skip:focus { opacity: 1; transform: translateX(0); }

.segment { padding-block: 3rem; }
.segment:nth-of-type(even) { background-color: #e0e0e0; }
.segment:nth-of-type(odd) { background-color: #a0c0a0; }
.fence {
	max-width: min(80ch, 80ex, 960px, 100vw - (2 * 1rem)); margin-inline: auto;
}
.parted {
	width: 100%; display: grid; grid-auto-flow: row;
	grid-auto-columns: 1fr; grid-auto-rows: auto; gap: 1rem 2rem;
}
.part { grid-column: span 1; }
.part-2x { grid-column: span 1; }

@media screen and (min-width: 50em) { /* ~800px+ */
	.parted { grid-auto-flow: column; }
	.part-2x { grid-column: span 2; }
}

.card {
	padding: 0.5rem 1rem; position: relative;
	border-radius: 1em;
	background-color: #e0c060;
	background-image: linear-gradient(to bottom, #e0e020 25%, #e0e0e0, #e0e020 75%);
	box-shadow: 0.25rem 0.25rem 1rem 0.125rem rgba(0, 0, 0, 0.625);
}

/*----------------------------------------------------------------------------*/
#phead, #pfoot {
	color: #e0e0e0; background-color: #202020;
}
#phead:last-child, #pmain:last-child, #pfoot:last-child {
	padding-bottom: 0;
}

#plogo { margin-block: 1rem; }

#pmain {
	flex: 1;
}

#phero {
	min-height: 66vh;
}
#pname {
	min-height: 5rem; background-color: #202060;
}
#phero, #pname {
	display: grid; grid-template-areas: "layer";
	justify-items: center; align-items: center;
}
#phero > *, #pname > * {
	grid-area: layer; color: #fff; text-shadow: 1px 1px 3px #000;
}
#phero > img, #pname > img, #phero > canvas {
	width: 100vw; object-fit: cover; object-position: top center;
}
#pnavi {
	margin-block: 1rem;
}
#pnavi menu {
	margin: 0; padding: 0; list-style-type: none;
}
#phead a, #pfoot a {
	display: inline-block; margin: 0.2em; padding: 0.3em 0.7em;
	color: #e0e020; background-color: rgba(0, 0, 0, 0.325);
	text-decoration: underline;
}

#phead a:focus, #phead a:hover, #phead a:active,
#pfoot a:focus, #pfoot a:hover, #pfoot a:active {
	background-color: rgba(0, 0, 0, 1); text-shadow: 0 0 0.125em #cc0;
}
#pmain a {
	display: inline-block; color: #202060; text-shadow: 0 0 1px #000;
	text-decoration: none; padding-inline: 0.125em;
	border-bottom: 1px solid currentColor;
}
#pmain a:focus, #pmain a:hover, #pmain a:active {
	background-color: #e0e020;
	box-shadow: 1px 1px 3px 0 #202020;
}